/* ---------------------------------------------------------------------------
   yuu Ferry Protect lucky-draw campaign banner slide — TEMPORARY, 21 Sep – 15 Nov 2026.

   Teardown is three deletes: this file, its <link> in Views/ElvesLab/Index.cshtml,
   and the .lucky-draw-slide markup in the same file. Nothing else references it.

   This lives in its own local stylesheet rather than index.css because index.css
   is served from the CDN under an SRI hash, so editing it needs a CDN deploy and
   a new integrity value.

   Artwork comes in two crops, picked by <picture> in the markup: 1308x480 (2.7:1)
   for the landscape desktop box and 1200x1818 (0.66:1) for the portrait mobile
   one. Both are close enough to their box that object-fit:cover barely trims.
   --------------------------------------------------------------------------- */

/* Owl's .owl-item and .owl-stage have auto height, so a height:100% chain has
   nothing to resolve against and the image's own aspect would set the slide
   height - making this slide a different height from the other two and
   stretching the whole carousel. These mirror #Banner's min-height in index.css
   so all three slides come out the same height; keep them in step if that changes. */
#Master #Content #Banner .lucky-draw-slide {
  height: 550px;
}

@media screen and (min-width: 1024px) {
  #Master #Content #Banner .lucky-draw-slide {
    height: 34.375vw;
  }
}

@media screen and (max-width: 1023px) {
  #Master #Content #Banner .lucky-draw-slide {
    height: 167.205vw;
  }
}

#Master #Content #Banner .lucky-draw-slide,
#Master #Content #Banner .lucky-draw-slide .w1542 {
  width: 100%;
}

#Master #Content #Banner .lucky-draw-slide .w1542 {
  height: 100%;
  padding: 0;
  max-width: none;
}

#Master #Content #Banner .lucky-draw-slide .lucky-draw-slide-link,
#Master #Content #Banner .lucky-draw-slide .lucky-draw-slide-picture {
  display: block;
  width: 100%;
  height: 100%;
}

#Master #Content #Banner .lucky-draw-slide .lucky-draw-slide-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}