/* Additive refinement of the installed screenshot network cards; six publishers. */
.network-grid-screenshots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.network-card-3kill { background: var(--surface); }
.network-card-3kill::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 100% 0%, rgba(225, 29, 72, .12), transparent 65%);
}
.network-card-3kill .network-mark { color: #dc1745; font-family: inherit; font-size: 26px; }
/* This card has no screenshot dependency. Keep its useful text on hover/focus. */
.network-card-3kill:is(:hover, :focus-visible) .network-mark,
.network-card-3kill:is(:hover, :focus-visible) .network-status,
.network-card-3kill:is(:hover, :focus-visible) .network-card-body,
.network-card-3kill:is(:hover, :focus-visible) .network-domain { opacity: 1; }
.metric-preview .network-report-caption {
    grid-column: 1 / -1;
    margin: 0;
    padding: 12px 24px;
    background: color-mix(in srgb, var(--black) 92%, transparent);
    color: rgba(255, 255, 255, .75);
    font-size: 11px;
}
@media (max-width: 980px) {
    .network-grid-screenshots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .network-grid-screenshots { grid-template-columns: 1fr; }
}