:root {
  @include use-responsive-sizing(--tiles-columns, (xs: 1, 500px: 2));
}

.tiles {
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: repeat(var(--tiles-columns), minmax(0, 1fr));

  @include use-responsive-sizing(gap, $gaps);
}

.tiles--3 {
  @include use-responsive-sizing(--tiles-columns, (xs: 1, 500px: 2, l: 3));
}

.tiles--4 {
  @include use-responsive-sizing(--tiles-columns, (xs: 1, 500px: 2, l: 3, xl: 4));
}