/*
 * ENITA homepage Hero mobile calibration, remix 02.
 * The new portrait plate is composed independently from desktop: pulled-back
 * bottle, one compact herb grouping, and a barely visible dropper refraction.
 */

@media (max-width: 760px) {
  .hero-home-concept-carousel .home-hero-slide[data-slide-id="skinimalism"] > picture > img {
    object-position: center 20%;
  }

  .hero-home-concept-carousel .home-hero-slide[data-slide-id="pure-science"] > picture > img {
    object-position: center 42%;
  }

  .hero-home-concept-carousel .home-hero-slide[data-slide-id="less-is-more"] {
    background: #d3d5d1;
  }

  .hero-home-concept-carousel .home-hero-slide[data-slide-id="less-is-more"]::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(
      ellipse at 18% 20%,
      rgba(250, 250, 248, 0.08),
      transparent 48%
    ), radial-gradient(
      ellipse at 76% 79%,
      rgba(250, 250, 248, 0.045),
      transparent 24%
    );
    content: "";
    pointer-events: none;
  }

  .hero-home-concept-carousel .home-hero-slide[data-slide-id="less-is-more"] > picture > img {
    position: relative;
    z-index: 0;
    object-position: center center;
  }
}

/* Wide handsets and narrow tablets keep the portrait plate centred. The
   product is baked into the plate, so no width-based cutout correction is
   needed here; this rule only protects the focal point from cover cropping. */
@media (min-width: 481px) and (max-width: 760px) {
  .hero-home-concept-carousel .home-hero-slide[data-slide-id="skinimalism"] > picture > img {
    object-position: center 34%;
  }

  .hero-home-concept-carousel .home-hero-slide[data-slide-id="pure-science"] > picture > img {
    object-position: center 58%;
  }

  .hero-home-concept-carousel .home-hero-slide[data-slide-id="less-is-more"] > picture > img {
    object-position: center center;
  }

  .hero-home-concept-carousel .home-hero-slide[data-slide-id="less-is-more"] .home-hero-less-is-more-copy__lockup {
    top: clamp(96px, 13.8svh, 124px);
    width: min(52vw, 300px);
  }
}
