:root {
  --card-grid-offset: 4rem;

  @include use-responsive-sizing(--card-grid-columns, (xs: 1, m: 2));
}

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

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

.card-grid__card {
  --card-aspect-ratio: 9 / 13;

  display: grid;

  @include mq($from: s) {
    --card-aspect-ratio: 1 / 1;
  }

  @include mq($from: m) {
    .card-grid--offset &:nth-child(even) {
      margin-block: var(--card-grid-offset) calc(var(--card-grid-offset) * -1);
    }
  }
}

.card-grid__card--more-card {
  --tile-aspect-ratio: var(--card-aspect-ratio);
  --icon-button-background-color: transparent;
  --icon-button-background-color-active: var(--color-orange);
  --tile-background-color: var(--color-cyan-light);
}