.collection-list {
  max-width: var(--max-width);
  margin-inline: auto;
  margin-block-end: var(--spacing-xxl);
  padding-inline: var(--padding-inline);

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;

  list-style: none;
}

.card {
  --padding-inline: 0.75rem;

  position: relative;

  padding: 0;
  aspect-ratio: 5 / 4;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto 1fr;

  border: 1px solid var(--color-border);
  border-radius: var(--rounded-corners);

  transition: all 400ms var(--easing-bounce-2);

  .covers {
    display: flex;

    img {
      display: block;

      max-width: 100%;
      width: 50%;
      height: auto;

      border-radius: 0;

      filter: saturate(70%);

      &:first-of-type {
        border-start-start-radius: var(--rounded-corners);
      }

      &:last-of-type {
        border-start-end-radius: var(--rounded-corners);
      }
    }
  }

  h2 {
    margin-block-start: 0.5rem;
    margin-block-end: 1rem;
    padding-inline: var(--padding-inline);

    font-size: var(--font-size-l);

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    .count {
      padding-inline-start: 0.25rem;
      font-size: 0.9rem;
    }
  }

  .description {
    margin: 0;
    margin-block-end: 0.5rem;

    padding-inline: var(--padding-inline);

    font-family: inherit;
    font-size: 0.9em;
  }

  &:where(:hover, :focus-within) {
    scale: 1.015;

    .covers img {
      filter: none;
    }
  }
}