@layer sections {
.benefits__grid {
  display: grid;
  gap: var(--row-gap) var(--benefit-gap);
}

@media (min-width: 37.5em) {
  .benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 75em) {
  .benefits__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.benefits__cta {
  display: grid;
  gap: 1.25rem;
  max-inline-size: 51.25rem;
  margin-block-start: var(--title-gap);
}

.benefits__cta-title {
  color: var(--color-teal);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
}

.benefits__cta a {
  color: var(--color-link);
  text-decoration: underline;
}

.benefits__cta a:hover {
  color: var(--color-purple-hover);
}
}