/* RED FAWN — definitive mobile hero override */
@media (max-width: 767px), (max-width: 1100px) and (hover: none) and (pointer: coarse) {
  #carousel.carousel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #carousel.carousel .carousel-inner,
  #carousel.carousel .carousel-inner > .item.rf-hero {
    position: relative !important;
    display: block !important;
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  #carousel.carousel .carousel-inner > .item.rf-hero img {
    position: relative !important;
    z-index: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
    object-fit: cover !important;
    object-position: center bottom !important;
    transform: scale(1.18) !important;
    transform-origin: center bottom !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  #carousel.carousel .carousel-inner::after {
    content: none !important;
    display: none !important;
  }

  #carousel.carousel .carousel-inner > .item.rf-hero::after {
    content: none !important;
    display: none !important;
  }

  #carousel.carousel .carousel-inner > .item.rf-hero > .rf-mobile-hero-fade {
    display: block !important;
    position: absolute !important;
    z-index: 10 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 82px !important;
    pointer-events: none !important;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .18) 28%,
      rgba(255, 255, 255, .72) 70%,
      #fff 100%
    ) !important;
  }
}