main.no-sugar.parent-no-sugar {
  --container: 10%;

  .hero-section {
    position: relative;
    margin-top: -127px;

    figure.hero-mobile {
      display: none;
    }

    figure.deco-img {
      position: absolute;
      bottom: -30%;
      right: 5%;
      width: 100%;
      max-width: 32%;
    }
  }

  .content-section {
    padding-block: 60px;
    position: relative;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);

    .banner {
      line-height: 1.55;
      background-color: #fff;
      padding: 0 1rem 0 var(--container);
      border-radius: 0 50px 50px 0;
      width: fit-content;
      max-width: 90%;
    }

    .content {
      position: relative;
      z-index: 1;
      padding: 2rem var(--container) 0;

      .text {
        line-height: 1.3;
        width: 72%;
      }

      .btn {
        margin-top: 1.25rem;

        >a {
          border: 2px solid transparent;
          background-color: var(--c-l-blue);
          color: var(--c-white);
          font-family: var(--fd);
          transition-property: background-color, color, border-color;
          transition-duration: .3s;
          transition-timing-function: ease-in-out;
        }

        &:hover>a {
          border-color: var(--c-blue);
          background-color: var(--c-white);
          color: var(--c-blue);
        }
      }
    }

    .products {
      padding: 4rem var(--container);
    }

    figure.deco-img-1 {
      position: absolute;
      top: 0;
      left: 0;
      width: 8%;
      z-index: 3;
    }

    figure.deco-img-2 {
      position: absolute;
      top: 180px;
      right: 0;
      width: 8%;
    }

    figure.deco-img-3 {
      position: absolute;
      top: 0;
      right: 0%;
      width: 10%;
    }

    figure.deco-img-4 {
      position: absolute;
      top: 0;
      right: 12%;
      width: 10%;
    }
  }

  .why-section {
    position: relative;
    padding-bottom: 100px;

    figure.top_background {
      padding-top: 20px;
      position: relative;
      z-index: 1;
    }

    figure.top_deco_1 {
      position: absolute;
      top: 8%;
      right: 4%;
      width: 15%;
      z-index: 3;
    }

    figure.top_deco_2 {
      position: absolute;
      top: 0;
      left: 4%;
      width: 25%;
      z-index: 3;
    }

    figure.top_deco_3 {
      position: absolute;
      top: 20%;
      right: 0;
      width: 9%;
      z-index: 3;
    }

    figure.top_deco_4 {
      position: absolute;
      top: -2%;
      right: 17%;
      width: 13%;
      z-index: 1;
    }

    .content_container {
      padding: 2rem calc(var(--container) * 2) 270px;
      margin-top: -120px;
      position: relative;
      z-index: 2;

      .header {
        line-height: 1;
        margin-inline: auto;
        max-width: 70%;
      }

      .text {
        line-height: 1.2;
        margin: 2rem 1rem;
      }

      .btn {
        >a {
          border: 2px solid transparent;
          background-color: var(--c-l-blue);
          color: var(--c-white);
          font-family: var(--fd);
          transition-property: background-color, color, border-color;
          transition-duration: .3s;
          transition-timing-function: ease-in-out;
        }

        &:hover>a {
          border-color: var(--c-blue);
          background-color: var(--c-white);
          color: var(--c-blue);
        }
      }

      .wp-block-buttons:has(>.btn) {
        width: 100%;
        justify-content: center;
      }

      .sell_points_holder {
        position: absolute;
        bottom: -175px;
        left: 15%;
        height: 350px;
        width: 70%;

        .sell_point {
          line-height: 1.25;
          border-radius: 50%;
          aspect-ratio: 1;
          padding: .5rem;
          width: calc(25% - 1rem);
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          transition: transform .7s ease-in-out;

          &:hover {
            transform: scale(1.05);
          }
        }
      }
    }

    figure.bottom_background {
      margin-top: 2rem;
    }

    .video {
      max-width: 80%;
      margin-inline: auto;
      margin-top: -2rem;

      iframe {
        width: 100%;
        height: 100%;
        aspect-ratio: 16 / 9;
      }
    }
  }

  @media(max-width: 1600px) {
    .hero-section {
      margin-top: -80px;
    }

    .content-section {
      .banner {
        line-height: 1.4;
      }

      figure.deco-img-4 {
        top: 180px;
      }
    }

    .why-section {
      .content_container {
        padding-inline: var(--container);

        .sell_points_holder {
          left: var(--container);
          width: 80%;
        }
      }
    }
  }

  @media(max-width: 1200px) {
    .hero-section {
      margin-top: -80px;

    }

    .content-section {
      .content {
        .text {
          width: 100%;
        }
      }

      figure.deco-img-4 {
        display: none;
      }
    }

    .why-section {
      .content_container {
        .header {
          margin-top: 2rem;
        }

        .text {
          margin-top: 3rem;
        }

        .sell_points_holder {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          position: relative;
          top: 0;
          left: 0;
          width: 100%;
          margin-top: 2rem;
          gap: 2rem .5rem;
          margin-bottom: calc(-50% - 2.5rem);
          bottom: unset;
          height: fit-content;

          .sell_point {
            width: 90%;
          }
        }
      }
    }
  }

  @media(max-width: 981px) {
    --container: 2rem;

    .hero-section {
      margin-top: -30px;
    }

    .content-section {
      .banner {
        border-radius: unset;
        text-align: center;
        line-height: 1;
        padding: .675rem calc(var(--container) * 2);
        width: 100%;
        max-width: unset;
      }

      .content {
        padding-inline: var(--container);

        .wp-block-buttons:has(>.btn) {
          margin-inline: auto;
        }
      }

      .products {
        padding-inline: var(--container);
      }
    }

    .why-section {
      .content_container {
        padding: 2rem 0 0;
        margin: 0 1rem 2rem;

        .header {
          margin-top: 0;
          max-width: 100%;
        }

        .text {
          margin: 1rem 1rem 2rem;
        }

        .sell_points_holder {
          margin-top: 1rem;
          padding-top: 3rem;
          background-color: #99c2d0;
          display: flex;
          flex-direction: column;
          gap: 0;
          margin-bottom: 0;

          .sell_point {
            width: 60%;
            margin-right: auto;
            border: 4px solid var(--c-white);

            &:nth-of-type(2n) {
              margin-right: unset;
              margin-left: auto;
            }
          }
        }
      }

      figure.top_deco_1 {
        top: 4%;
        right: 2%;
      }

      figure.top_deco_2 {
        top: 1%;
        left: 2%;
      }

      figure.top_deco_4 {
        right: 12%;
        width: 25%;
      }

      .video {
        max-width: 100%;
        margin-top: -5%;
        margin-inline: var(--container);
      }
    }
  }

  @media(max-width: 550px) {
    --container: 1rem;

    .hero-section {
      figure.hero-desktop {
        display: none;
      }

      figure.hero-mobile {
        display: block;
      }

      figure.deco-img {
        display: none;
      }
    }

    .content-section {
      .banner {
        padding-inline: var(--container);
      }
    }

    .why-section {
      .content_container {
        .sell_points_holder {
          .sell_point {
            width: 65%;

            &:nth-of-type(2n) {
              margin-top: -5%;
            }

            &:nth-of-type(3) {
              margin-top: -5%;
            }
          }
        }
      }

      figure.top_deco_1 {
        display: none;
      }

      figure.top_deco_2 {
        display: none;
      }
    }
  }
}