.benefits-section__container {
  color: var(--color);
  display: grid;
  gap: 4rem;
  grid-template-columns: 38% 1fr;

  .benefits-section__image {
    border-radius: 2rem;
    overflow: hidden;

    &>* {
      height: auto;
    }
  }

  .benefits-section__context {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    justify-content: center;

    .benefits-section__heading {
      color: var(--color);
      font-size: var(--heading_size);
      font-weight: 500;
      line-height: 1.2;
    }

    .benefits-section__content {
      font-size: var(--content_size);
      line-height: 1.3;
    }

    .benefits-section__call-outs__wrapper {
      display: flex;
      flex-direction: column;
      gap: 2.4rem;

      .benefits-section__call-out {
        align-items: center;
        background-color: var(--call-out-bg);
        border-radius: 1.2rem;
        color: var(--call-out-color);
        display: grid;
        font-size: var(--call_out_size);
        gap: 3.2rem;
        grid-template-columns: auto 1fr;
        line-height: 1.3;
        padding: 1.2rem;
      }
    }

    .benefits-section__benefits__wrapper {
      display: grid;
      gap: 2.4rem;
      grid-template-columns: repeat(var(--per-row, 3), 1fr);
    }

    .benefits-section__benefit {
      align-items: center;
      background-color: var(--benefit-bg);
      border-radius: 0.8rem;
      color: var(--benefit-color);
      display: grid;
      font-size: var(--benefit_size);
      gap: 1.6rem;
      grid-template-columns: 2.8rem 1fr;
      line-height: 1.3;
      padding: 1.2rem;
      min-height: 6.5rem;
    }
  }
}

@media (width < 768px) {
  .benefits-section__container {
    grid-template-columns: 100%;

    .benefits-section__context {
      gap: 2.4rem;

      .benefits-section__benefit {
        grid-template-columns: 2.2rem 1fr;

        br {
          display: none;
        }
      }
    }
  }
}