.photo-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.photo-grid img { height: 220px; }
.photo-grid figcaption { padding: 10px; font-size: 13px; font-weight: 700; }
.photo-open { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; background: none; }
.photo-open:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.photo-lightbox { width: min(1100px, 94vw); max-height: 94vh; padding: 44px 16px 16px; border: 0; border-radius: 12px; background: #07131e; color: white; }
.photo-lightbox::backdrop { background: #000c; }
.photo-lightbox img { display: block; max-width: 100%; max-height: 78vh; margin: auto; object-fit: contain; }
.photo-lightbox p { text-align: center; font-weight: 700; }
.lightbox-close { position: absolute; right: 10px; top: 8px; border: 0; background: transparent; color: white; font-size: 30px; padding: 0 10px; }
.badge.test-data { background: #ffe0df; color: #8f1f1a; }
.test-warning { margin: 8px 0 0; color: #8f1f1a; font-weight: 800; }
.test-filter { flex-direction: row; align-items: center; white-space: nowrap; padding: 9px; }
.test-filter input { width: auto; }
@media (max-width: 1100px) and (min-width: 801px) { .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .photo-grid img { height: 190px; } }
@media (max-width: 430px) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }