/* Media — full-bleed image band with an overlaid caption */

.media {
  position: relative;
  background: var(--green-deep);
}
.media__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (min-width: 768px) {
  .media__image {
    aspect-ratio: 3 / 1;
  }
}
.media__image.placeholder {
  background: var(--green-darker);
}

.media__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 4rem 1.5rem 1.25rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  background: linear-gradient(transparent, rgba(13, 36, 27, 0.75));
}

@media (min-width: 768px) {
  .media__caption {
    padding-left: max(1.5rem, calc((100vw - var(--container)) / 2 + 1.5rem));
  }
}