.ingredient-section {
  padding: var(--PT) 0 var(--PB);

  .ingredient-section__text-box {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 0 auto;
    text-align: center;

    h3,
    h6 {
      font-family: var(--font-heading-family);
      font-style: var(--font-heading-style);
      font-weight: var(--font-heading-weight);
    }

    h3 {
      font-size: 1.7rem;
      letter-spacing: normal;
      line-height: 1.25;
    }

    h6 {
      font-size: 1.4rem;
      line-height: 1.7;
      letter-spacing: 0.1em;
    }

    p {
      font-family: var(--font-body-family);
      font-size: 2rem;
      font-style: var(--font-body-style);
      font-weight: 500;
      letter-spacing: normal;
      line-height: 1.6;
    }
  }

  .ingredient-section__img-box {
    margin: 0 auto;
    max-width: 45rem;
    overflow: unset;
    position: relative;
    text-align: center;

    figure {
      position: relative;
      z-index: 1;

      img {
        height: auto;
      }
    }

    &.aos-animate .ingredient-section__lineborder:after {
      transition: all 1s ease-in-out 0.3s;
      transform: scaleY(1);
    }

    .ingredient-section__lineborder {
      background: transparent;
      display: inline-block;
      height: 10rem;
      left: 48%;
      position: absolute;
      top: 47%;
      transform: translateX(-49%);
      width: 0.1rem;
      z-index: 2;

      &:after {
        background: var(--color);
        content: '';
        height: 10rem;
        position: absolute;
        transform: scaleY(0);
        transform-origin: top left;
        transition: all 1s ease-in-out 0.3s;
        width: 0.1rem;
      }

      &:before {
        background: #d0debb;
        border: 0.1rem solid var(--color);
        border-radius: 50%;
        content: '';
        position: absolute;
        height: 2rem;
        margin-left: -1rem;
        top: -1.8rem;
        width: 2rem;
        z-index: 1;
      }
    }

    .ingredient-section__img-box-circle {
      background: #d0debb;
      border-radius: 50%;
      height: 27.2rem;
      position: absolute;
      left: 50%;
      top: 42%;
      transform: translate(-50%, -50%);
      width: 27.2rem;
    }

    .ingredient-section__img-box-text {
      bottom: 6.5rem;
      left: 50%;
      max-width: 27rem;
      position: absolute;
      transform: translateX(-50%);
      width: 100%;
      z-index: 10;

      h4,
      p {
        color: var(--color);
        font-size: 1.8rem;
        letter-spacing: normal;
      }

      h4 {
        font-family: var(--font-heading-family);
        font-style: var(--font-heading-style);
        font-weight: var(--font-heading-weight);
        margin-bottom: 1rem;
      }

      p {
        font-family: var(--font-body-family);
        font-style: var(--font-body-style);
        font-weight: normal;
        line-height: 1.5;
      }
    }
  }
}

@media (max-width: 1280px) {
  .ingredient-section .ingredient-section__text-box {
    max-width: 67rem;

    h3 {
      margin-left: auto;
      margin-right: auto;
      max-width: 44rem;
    }
  }

  .ingredient-section .ingredient-section__img-box {
    .ingredient-section__lineborder {
      height: 8.4rem;

      &:after {
        height: 8.4rem;
      }
    }

    .ingredient-section__img-box-text {
      bottom: 7.5rem;
      max-width: 100%;
    }
  }
}

@media (max-width: 767px) {
  .ingredient-section {
    .page-width {
      padding: 0;
    }

    .ingredient-section__text-box {
      max-width: 35.5rem;
      padding: 0 2rem;

      h3 {
        font-size: 4rem;
        line-height: 1.3;
      }

      p {
        font-size: 1.8rem;
        line-height: 1.6;
      }
    }

    .ingredient-section__img-box {
      margin: 0 auto;
      max-width: 50rem;
      overflow: unset;

      .ingredient-section__img-box-circle {
        width: 23rem;
        height: 23rem;
      }
    }
  }
}

@media (max-width: 600px) {
  .ingredient-section .ingredient-section__img-box {
    max-width: 32rem;

    .ingredient-section__img-box-circle {
      height: 16rem;
      width: 16rem;
    }

    .ingredient-section__img-box-text {
      bottom: 1.5rem;
      max-width: 100%;
    }
  }
}