/**
 * @file
 * Defines styles for the tiles component.
 */

.tiles__title {
  font-size: var(--font-size-h2-responsive);
  margin-bottom: var(--spacing-4xl);
}

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

/* Responsive grid layouts. */
@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);
  }
}

/* Call to action styles. */
.tiles__call-to-action {
  margin-top: var(--spacing-3xl);
}

.tiles__call-to-action a {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.tiles__call-to-action a:hover {
  text-decoration: none;
}