.case-page-hero-media {
  position: relative;
  min-width: 0;
  min-height: 680px;
  overflow: hidden;
}

.case-page-hero-media > img {
  width: 100%;
  height: 100%;
  min-height: 680px;
  object-fit: cover;
  object-position: center bottom;
}

.case-cover-band {
  position: absolute;
  inset: auto 0 0;
  min-height: 18%;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: white;
  background: rgba(0, 36, 66, 0.9);
  pointer-events: none;
}

.case-cover-band > span { display: grid; gap: 3px; }
.case-cover-band strong { color: var(--gold); font: 700 clamp(1.2rem, 2vw, 1.8rem) "Space Grotesk"; text-transform: uppercase; }
.case-cover-band small { color: white; font-size: 10px; }
.case-cover-band > img { width: min(30%, 190px); height: auto; object-fit: contain; }
.case-cover-band.compact { min-height: 18%; padding: 10px 13px; }
.case-cover-band.compact strong { font-size: 13px; }
.case-cover-band.compact small { font-size: 8px; }
.case-page-gallery-grid button { position: relative; }
.case-page-gallery-grid .case-cover-band > img { width: 34%; height: auto; min-height: 0; aspect-ratio: auto; }
.case-page-gallery-grid .case-cover-band small { position: static; padding: 0; background: transparent; }

@media (max-width: 800px) {
  .case-page-hero-media,
  .case-page-hero-media > img { min-height: 420px; }
}

@media (max-width: 520px) {
  .case-page-hero-media,
  .case-page-hero-media > img { min-height: 330px; }
}