/* HERO */
.super-skin-drink-hero {
  position: relative;
  width: 100%;
  height: calc(min(max(380px, 665/1024 * 100vw), 665px));
  padding-block: 20px;
}

.super-skin-drink-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  z-index: -1;
}

@media screen and (max-width: 1024px) {
  .super-skin-drink-hero__image {
    object-position: 70%;
    -o-object-position: 70%;
  }
}

.super-skin-drink-hero__text-container {
  display: grid;
  height: 100%;
  /* align-items: center; */
}

.super-skin-drink-hero__text-container h1 {
  margin-top: calc(min(max(15px, 50/1300 * 100vw), 50px));
}

.super-skin-drink-hero__text {
  width: 90%;
  max-width: 580px;
}

.super-skin-drink-hero__logos {
  align-self: end;
}

/* Intro */
.super-skin-drink-intro__container {
  max-width: 1175px;
  padding-block: calc(min(max(50px, 70/1024 * 100vw), 70px));
}

/* Bordered Grid */
.super-skin-drink-border-grid__container {
  max-width: 960px;
  border: 4px solid #eaddda;
  padding-block: calc(min(max(30px, 40/1024 * 100vw), 40px));
  padding-inline: calc(min(max(20px, 45/1024 * 100vw), 45px));
}

.super-skin-drink-border-grid__items {
  display: grid;
  gap: calc(min(max(30px, 40/1024 * 100vw), 40px));
}

@media screen and (min-width: 641px) {
  .super-skin-drink-border-grid__items {
    grid-template-columns: 1fr 1fr;
  }
}

/* Colored BG */
.super-skin-drink-color-bg {
  padding-block: calc(min(max(50px, 70/1024 * 100vw), 70px));
}

.super-skin-drink-color-bg__container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  overflow: hidden;
}

.super-skin-drink-color-bg__img-container img {
  height: 100%;
  object-fit: cover;
}

.super-skin-drink-color-bg__text-container {
  padding: calc(min(max(35px, 70/1680 * 100vw), 70px))
    calc(min(max(20px, 70/1680 * 100vw), 70px));
}

.super-skin-drink-color-bg__text {
  column-count: 2;
  column-gap: calc(min(max(20px, 70/1680 * 100vw), 70px));
}

.super-skin-drink-color-bg__note {
  padding-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(min(max(20px, 70/1680 * 100vw), 70px));
}

@media screen and (max-width: 1024px) {
  .super-skin-drink-color-bg__container {
    grid-template-columns: 1fr;
  }

  .super-skin-drink-color-bg__img-container {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    overflow: hidden;
  }

  .super-skin-drink-color-bg__img-container img {
    height: calc(100vw - 40px);
    object-fit: cover;
    transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
  }

  .super-skin-drink-color-bg__text {
    column-count: 1;
  }

  .super-skin-drink-color-bg__note {
    grid-template-columns: 1fr;
  }
}

/* Image Banner 1 */
.super-skin-drink-img-banner-1__container {
  background-image: url(/wp-content/uploads/2025/07/super-skin-drink-img-banner-1.jpg);
  background-size: cover;
  background-position: center;
  min-height: 740px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.super-skin-drink-img-banner-1__text-container {
  grid-column: 2;
  max-width: 640px;
  display: grid;
}

.super-skin-drink-img-banner-1__text-container h2 {
  width: fit-content;
  padding-block: 14px;
}

@media screen and (max-width: 1024px) {
  .super-skin-drink-img-banner-1__container {
    grid-template-columns: 1fr 2fr;
  }
}

@media screen and (max-width: 768px) {
  .super-skin-drink-img-banner-1__container {
    background-position: 40%;
  }
}

@media screen and (max-width: 540px) {
  .super-skin-drink-img-banner-1__container {
    background-position: left;
    grid-template-columns: 1fr;
  }

  .super-skin-drink-img-banner-1__text-container {
    grid-column: 1;
  }
}

/* Image Banner 1 */
.super-skin-drink-img-banner-2 {
  padding-block: calc(min(max(50px, 70/1024 * 100vw), 70px));
}

.super-skin-drink-img-banner-2__container {
  background-image: url(/wp-content/uploads/2025/07/super-skin-drink-img-banner-2.jpg);
  background-size: cover;
  background-position: center;
  min-height: 650px;
  padding-block: calc(min(max(45px, 112/1024 * 100vw), 112px));
  padding-inline: calc(min(max(20px, 112/1680 * 100vw), 112px)) 20px;
}

.super-skin-drink-img-banner-2__text-container {
  max-width: 600px;
}

@media screen and (max-width: 1024px) {
  .super-skin-drink-img-banner-2__container {
    background-position: 60%;
  }
}

/* Steps */
.super-skin-drink-step__container {
  margin-block: calc(min(max(50px, 70/1024 * 100vw), 70px))
    calc(min(max(100px, 140/1024 * 100vw), 140px));
  border: 1px solid #b9503c;
}

.super-skin-drink-step__heading {
  letter-spacing: -0.043em;
  width: fit-content;
  margin: auto;
  padding: 10px 30px 12px;
  transform: translateY(-50%);
  max-width: 95%;
}

.super-skin-drink-step__heading:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-60%) translateY(-70%);
  width: calc(min(max(80px, 125/1024 * 100vw), 125px));
  height: 49px;
  background-image: url(/wp-content/themes/organique-child/images/step-1.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
}
.step-2 .super-skin-drink-step__heading:before {
  background-image: url(/wp-content/themes/organique-child/images/step-2.svg);
}
.step-3 .super-skin-drink-step__heading:before {
  background-image: url(/wp-content/themes/organique-child/images/step-3.svg);
}

.super-skin-drink-step__subheading {
  font-style: italic;
  margin-block: 0 20px;
  text-align: left;
}
.super-skin-drink-step__subheading > div {
  text-align: right;
}

.super-skin-drink-step__grid-txt {
  max-width: 840px;
}

.super-skin-drink-step__text {
  margin-block: 0px calc(min(max(40px, 80/991 * 100vw), 80px));
}

@media screen and (min-width: 1025px) {
  .super-skin-drink-step__grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
  }

  .step-2 .super-skin-drink-step__grid-img,
  .step-3 .super-skin-drink-step__grid-img {
    margin-top: calc(clamp(40px, 7.44vw, 125px) * (-1));
  }
}

@media screen and (max-width: 640px) {
  .super-skin-drink-step__subheading,
  .super-skin-drink-step__subheading > div {
    text-align: center;
  }
}

/* BUTTON */

.three-steps-btn {
  height: 80px;
  padding: 0 calc(min(max(25px, 50/991 * 100vw), 50px));
  margin-bottom: calc(min(max(50px, 70/1024 * 100vw), 70px));
  max-width: 455px;
  width: 85%;
  transform: translateY(-50%);
}
.three-steps-btn a {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: -0.045em;
  transition: 0.3s ease;
}
.three-steps-btn a span {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.29em;
}
a:focus {
  outline: 0px;
  text-decoration: none;
}
.three-steps-btn a:hover {
  color: #fff;
  opacity: 0.8;
}
.three-steps-btn a:focus {
  color: #fff;
}
.three-steps-btn a:hover .three-steps-btn-arrow img {
  transform: translateX(0px);
}
.three-steps-btn-arrow img {
  transform: translateX(7px);
  transition: 0.4s ease-in-out;
}