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

  .cellular-benefits__container {
    display: grid;
    gap: 7rem;

    .cellular-benefits__heading {
      font-size: var(--heading-size, 1.4rem);
      font-weight: var(--heading-weight);
      line-height: var(--heading-height, 1.3);
      text-align: center;
    }

    .cellular-benefits__content {
      font-size: var(--content-size, 2rem);
      font-weight: var(--content-weight);
      line-height: var(--content-height, 1.75);
      text-align: center;
    }

    .cellular-benefits__block {
      --size: 25rem;
      align-items: center;
      display: grid;
      color: var(--block-text-color);
      grid-template-columns: var(--size) 1fr;
      position: relative;

      &::before {
        background: var(--block-background);
        border-radius: calc(var(--size) / 2) 2.5rem 2.5rem calc(var(--size) / 2);
        bottom: 0;
        content: "";
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
      }

      .cellular-benefits__block-counter {
        background: var(--counter-background);
        border-radius: calc(var(--size) / 2);
        color: var(--counter-text-color);
        display: grid;
        font-size: var(--counter-size);
        font-weight: var(--counter-weight);
        height: var(--size);
        line-height: 1;
        place-items: center;
        position: relative;
        width: var(--size);
        z-index: 2;
      }

      .cellular-benefits__block-context {
        display: grid;
        gap: var(--block-gap, 2rem);
        padding: 3.5rem;
        position: relative;
        z-index: 2;

        .cellular-benefits__block-title {
          font-size: var(--block-title-size, 2rem);
          font-weight: var(--block-title-weight);
          line-height: var(--block-title-height, 1.35);
        }

        .cellular-benefits__block-content {
          font-size: var(--block-text-size, 2rem);
          font-weight: var(--block-text-weight);
          line-height: var(--block-text-height, 1.35);
        }
      }
    }
  }

  @media screen and (width < 1024px) {
    .cellular-benefits__container {
      gap: 4rem;

      .cellular-benefits__block {
        grid-template-columns: 100%;

        &::before {
          border-radius: 2.5rem;
          top: calc(var(--size) / 2);
        }

        .cellular-benefits__block-counter {
          margin: auto;
        }

        .cellular-benefits__block-context {
          padding: 3.5rem 1.5rem;
        }
      }
    }
  }
}