/* sixm/home-image-banner — ported from sections/s6m-image-banner.liquid <style>.
   Only the bare-image branch is reproduced: on live every copy field is empty,
   so the overlay, scrim and button never render. */

.s6m-banner {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #0a0a0a;
  color: #fff;
}

/* Mobile heights — the mobile artwork is a 1:1 crop. */
.s6m-banner--small-m,
.s6m-banner--medium-m,
.s6m-banner--large-m { aspect-ratio: 1 / 1; }
.s6m-banner--full-m { aspect-ratio: 1 / 1; min-height: 60vh; }

@media (min-width: 768px) {
  .s6m-banner--small-d { aspect-ratio: auto; min-height: 480px; max-height: 540px; }
  .s6m-banner--medium-d { aspect-ratio: auto; min-height: 560px; max-height: 620px; }
  .s6m-banner--large-d { aspect-ratio: auto; min-height: 660px; max-height: 720px; }
  .s6m-banner--full-d { aspect-ratio: auto; min-height: 70vh; max-height: 880px; }
}

.s6m-banner__media,
.s6m-banner__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Desktop: contain, so the FULL source image (sign + storefront + date) shows
   without cropping. Mobile keeps cover because the mobile art is already 1:1. */
@media (min-width: 768px) {
  .s6m-banner__media img { object-fit: contain; }
}

.s6m-banner__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}