.healthier-features {
  display: block;
  padding: var(--PT) 0px var(--PB);

  .healthier-features__body {
    --context-gap: 4.5rem;
    --content-gap: 3.5rem;
    --box-gap: 4rem 2rem;

    align-items: center;
    display: grid;
    grid-template-columns: var(--body-items, 1fr 40%);
    gap: var(--box-gap);

    .healthier-features__header {
      display: flex;
      flex-direction: column;
      gap: var(--context-gap, 2rem);
      grid-area: var(--header-position, 1 / 1 / 1 / 1);
      line-height: 1.8;

      .healthier-features__heading {
        font-size: var(--heading-size, 1.4rem);
        font-weight: var(--heading-weight);
        line-height: var(--heading-height, 1.3);
      }

      .healthier-features__content {
        display: grid;
        font-size: var(--content-size, 2rem);
        font-weight: var(--content-weight);
        gap: var(--content-gap, 2rem);
        line-height: var(--content-height, 1.75);
      }

      a {
        color: inherit;
      }
    }

    .healthier-features__image-wrapper {
      grid-area: var(--image-position, 1 / 2 / 3 / 3);
      margin: auto;
      max-width: var(--image-width, 100%);
      width: 100%;

      .healthier-features__image-media {
        padding-bottom: 100%;
        position: relative;

        .healthier-features__image {
          height: 100%;
          left: 50%;
          object-fit: cover;
          position: absolute;
          top: 50%;
          translate: -50% -50%;
          width: 100%;
        }
      }
    }

    .healthier-features__context-wrapper {
      grid-area: var(--context-position, 2 / 1 / 2 / 1);

      .healthier-features__blocks {
        display: grid;
        gap: 1rem;

        .healthier-features__block {
          align-items: center;
          background: #f9f9f9;
          border-left: 0.4rem solid transparent;
          border-radius: 1rem;
          display: grid;
          grid-template-columns: 8rem 1fr;
          padding: var(--block-padding, 3.5rem 0);
          transition: all .5s;

          &:hover {
            border-color: #d0debb;
            background: #fff;
          }

          .healthier-features__block-icon {
            margin: 0 auto;
            position: relative;
            width: 3.8rem;

            .healthier-features__block-tag:nth-child(2) {
              height: 100%;
              left: 50%;
              object-fit: contain;
              position: absolute;
              top: 50%;
              translate: -50% -50%;
              width: 100%;
            }
          }


          &:has(.healthier-features__block-tag:nth-child(2)):not(:hover) .healthier-features__block-tag:last-child,
          &:has(.healthier-features__block-tag:nth-child(2)):hover .healthier-features__block-tag:first-child {
            opacity: 0;
          }

          .healthier-features__block-content {
            display: grid;
            gap: 1rem;
            padding-right: 2rem;

            .healthier-features__block-heading {
              font-size: var(--block-size, 1.4rem);
              font-weight: var(--block-weight);
              line-height: var(--block-height, 1.7);
            }

            .healthier-features__block-text {
              font-size: var(--block-content-size, 1.4rem);
              font-weight: var(--block-content-weight);
              line-height: var(--block-content-height, 1.35);
            }
          }
        }
      }
    }
  }

  @media (width <=1024px) {
    .healthier-features__body {
      --body-items: 100%;
      --header-position: 1 / 1 / 1 / 1;

      --image-position: 2 / 1 / 2 / 1;
      --image-width: 50rem;

      --context-position: 3 / 1 / 3 / 1;
    }
  }
}