.court-photo,
.gallery-image-button,
.gallery-image-empty {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(145deg, #143d55, #03111d);
}

.court-photo img,
.gallery-image-button img {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .5s ease;
}

.court-photo img {
  object-fit: cover;
  object-position: center 18%;
}

.gallery-image-button img {
  object-fit: contain;
  object-position: center;
  background: #071c2c;
}

.court-card:hover .court-photo img,
.gallery-photo-card:hover img {
  transform: scale(1.055);
  filter: brightness(1.04) contrast(1.03);
}

.gallery-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.gallery-photo-card {
  background: #fff;
  border: 1px solid rgba(7, 28, 44, .16);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease;
}

.gallery-photo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(7, 28, 44, .13);
}

.gallery-image-button {
  display: block;
  padding: 0;
  border: 0;
  cursor: zoom-in;
}

.gallery-image-empty {
  color: #e6c982;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 8px;
}

.gallery-image-empty span { font-size: 34px; }
.gallery-image-empty small { letter-spacing: .18em; text-transform: uppercase; }
.gallery-photo-caption { padding: 22px 24px; }
.gallery-photo-caption h3 { margin: 0 0 6px; color: #071c2c; font: 600 16px var(--serif); }
.gallery-photo-caption p { margin: 0; color: #657078; font-size: 12px; }
.gallery-photo-card.is-hidden { display: none; }

.gallery-lightbox {
  position: fixed;
  z-index: 9998;
  inset: 0;
  padding: 5vw;
  background: rgba(2, 11, 19, .94);
  backdrop-filter: blur(12px);
  display: grid;
  place-items: center;
}
.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; border: 1px solid #c99a3d; }
.gallery-lightbox-close { position: fixed; top: 22px; right: 25px; width: 48px; height: 48px; border: 1px solid #e6c982; background: #071c2c; color: #fff; font-size: 28px; }

@media (max-width: 820px) {
  .gallery-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .gallery-photo-grid { grid-template-columns: 1fr; }
}