.tiles {
  padding-block: var(--spacing-xxxlarge);
}

.tiles__title {
  font-size: var(--font-size-responsive-from-large-c-to-large-d);
}

.tiles__tiles {
  display: grid;
  gap: var(--spacing-xlarge);
}

@media screen and (min-width: 40em) {
  .tiles__layout--three .tiles__tiles {
    grid-template-columns: repeat(2, 1fr);
  }

  .tiles__layout--four .tiles__tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 48em) {
  .tiles__layout--four .tiles__tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 60em) {
  .tiles__layout--three .tiles__tiles {
    grid-template-columns: repeat(3, 1fr);
  }

  .tiles__layout--four .tiles__tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tiles__cta {
  margin-top: var(--spacing-xxxlarge);
}

.tiles__cta a {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.tiles__cta a:hover {
  text-decoration: none;
}