/* CMS-ready hero: editorial photo and brand boundary are independent layers. */
.hero-photo-cms,
.hero-overlay-desktop,
.hero-overlay-mobile {
  display: none;
}

@media screen and (min-width: 761px) {
  .hero-photo-desktop,
  .hero-photo-mobile,
  .hero-photo-mask,
  .grindline-desktop {
    display: none !important;
  }

  .hero-photo-cms {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 430px !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    z-index: 1 !important;
  }

  .hero-overlay-desktop {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 1024px !important;
    height: 430px !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  .hero-overlay-mobile {
    display: none !important;
  }
}

@media screen and (max-width: 760px) {
  .hero-photo-desktop,
  .hero-photo-mobile,
  .hero-photo-mask,
  .grindline-mobile {
    display: none !important;
  }

  .hero-photo-cms {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 709rem !important;
    height: 400rem !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    z-index: 1 !important;
  }

  .hero-overlay-desktop {
    display: none !important;
  }

  .hero-overlay-mobile {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 322rem !important;
    width: 709rem !important;
    height: 88rem !important;
    pointer-events: none !important;
    z-index: 3 !important;
  }
}