@media (max-width: 900px) {
  /* Hero card image */
  img[alt="Image banner"] {
    object-fit: contain !important;
    object-position: center !important;
    background: #0a0a0a !important;
  }

  /* Slider container: drop the stacked-height + force full width on inner wrapper */
  [data-framer-name="Image slider"] {
    height: auto !important;
  }
  [data-framer-name="Image slider"] > div {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    align-self: stretch !important;
  }

  /* Wake up thumbnails: kill scale(0.5)/opacity:0 on Framer slide containers */
  [data-framer-name="Image slider"] > div > div[class*="-container"] {
    transform: none !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Each slide wrapper (Variant 2) */
  [data-framer-name="Image slider"] [data-framer-name="Variant 2"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* The actual slide: full width, height driven by image native ratio (no aspect-ratio lock) */
  [data-framer-name="videoshot_4 1"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
  }

  /* Force absolute wrapper INTO normal flow so its child img dictates height */
  [data-framer-name="videoshot_4 1"] > div {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Image inside each slide: full width, height auto = native ratio */
  [data-framer-name="videoshot_4 1"] img,
  [data-framer-name="Image slider"] img {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    background: transparent !important;
  }
}