.health-benefits-tabs {
  display: block;
  padding: var(--PT) 0px var(--PB);

  .health-benefits-tabs__container {
    align-items: center;
    display: grid;
    gap: 3rem;
    grid-template-columns: 50% 50%;

    .health-benefits-tab__context {
      display: grid;
      gap: 2.5rem;

      &:not(.active) {
        display: none;
      }

      .health-benefits-tab__title {
        font-size: var(--title-size, 2.4rem);
        font-weight: var(--title-weight, 400);
        line-height: var(--title-height, 1.5);
      }

      .health-benefits-tab__content {
        font-size: var(--content-size, 3.4rem);
        font-weight: var(--content-weight, 400);
        line-height: var(--content-height, 1.4);
      }
    }

    .health-benefits-tabs__headings {
      display: grid;

      .health-benefits-tab__heading {
        background: transparent;
        border: 0px solid transparent;
        border-left-width: 0.4rem;
        cursor: pointer;
        font-size: var(--heading-size, 2.8rem);
        font-weight: var(--heading-weight, 300);
        line-height: var(--heading-height, 1.3);
        padding: var(--heading-padding, 2.4rem 4rem);
        text-align: left;

        &.active {
          background: #FBFBFB;
          border-color: var(--main-color);
        }
      }
    }
  }

  @media (width < 1024px) {
    .health-benefits-tabs__container {
      --title-size: 1.8rem;
      --title-weight: 700;
      --content-size: 2.8rem;
      --heading-size: 2.4rem;
      --heading-padding: 2.4rem 3.2rem;
      grid-template-columns: 100%;
    }
  }
}