@use "@styles/abstracts/mixins" as mix;
@use "@styles/abstracts/placeholders";

.wrapper {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    min(calc(100vw - (var(--spacing-md) * 2)), var(--card-width, 30ch))
  );
  gap: var(--spacing-sm);
  place-content: center;
  align-items: stretch;
  justify-items: stretch;

  @include mix.media("screen") {
    @include mix.dimensions(null, "sm") {
      gap: var(--spacing-lg);
    }
  }

  &--ordered {
    @extend %reset-ordered-list;
  }

  &--unordered {
    @extend %reset-list;
  }
}

.card {
  height: 100%;
}