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

  .benefits-table__container {
    display: grid;
    gap: var(--container-gap, 6rem);
    width: 100%;

    .benefits-table__header {
      display: grid;
      gap: var(--header-gap, 2rem);
      text-align: center;

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

      .benefits-table__content {
        font-size: var(--content-size, 2rem);
        font-weight: var(--content-weight);
        line-height: var(--content-height, 1.75);
      }
    }

    .benefits-table__row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);

      &:nth-child(odd) {
        background: var(--alter-bg);
        color: var(--alter-color);
      }

      &.benefits-table__column-heading {
        font-size: var(--table-heading-size, 2rem);
        font-weight: var(--table-heading-weight);
        line-height: var(--table-heading-height, 1.5);
      }

      &.benefits-table__column-content {
        font-size: var(--table-content-size, 2rem);
        font-weight: var(--table-content-weight);
        line-height: var(--table-content-height, 1.5);
      }

      .benefits-table__column {
        padding: var(--column-padding, 3rem 2.5rem 4rem 6rem);

        &.benefits-table__column-merged {
          grid-column: span 2;
        }

        .icon__checkbox {
          height: auto;
          width: 1.5em;
        }

        &.benefits-table__column-merged~.benefits-table__column,
        &:nth-child(2)~.benefits-table__column {
          text-align: center;

          svg {
            margin: auto;
          }
        }
      }
    }

    .benefits-table__footer {
      display: flex;
      font-size: var(--link-size, 2rem);
      font-weight: var(--link-weight);
      justify-content: center;
      line-height: var(--link-height, 1.75);
      text-align: center;

      .benefits-table__link {
        align-items: center;
        color: var(--color);
        display: flex;
        gap: 0.83em;
        justify-content: center;

        &:hover .benefits-table__link-text {
          opacity: 0.6;
        }
      }
    }
  }

  @media screen and (width < 1024px) {
    .benefits-table__container {
      --block-padding: 0 5rem;
      --container-gap: 4rem;
      --link-height: 1.5;
    }
  }

  @media screen and (width < 768px) {
    .benefits-table__container {
      --column-padding: 13px 5px 5px 4px;
    }
  }
}