.spr-card-list {
  position: relative;
  padding-block: var(--space-small);
  background-color: var(--card-list-background);

  &:has(.spr-card-list__heading) {
    padding-block: var(--padding-vertical-main);
  }
}

.spr-card-list.has-background-color-white {
  --card-list-background: var(--color-white);
}

.spr-card-list.has-background-color-gray {
  --card-list-background: var(--color-light);

  .spr-card {
    @media (max-width: 767px) {
      background-color: transparent;
    }
  }
}

.spr-card-list--teaser .spr-card {
  @media (max-width: 767px) {
    background-color: transparent;
  }
}

.spr-card-list__heading > * {
  grid-column: 1 / span 4;
  margin-block: 0 var(--space-medium);

  @media (min-width: 992px) {
    grid-column: 1 / span 12;
    margin-block: 0 var(--padding-vertical-main);
  }
}

.spr-card-list:has(.spr-card-list__exposed:not(:empty)) .spr-card-list__heading > * {
  margin-block: 0 var(--space-medium);
}

.spr-card-list__exposed {
  &:not(:empty) {
    margin-block: 0 var(--space-medium);
  }

  &:empty {
    display: none;
  }
}

.spr-card-list__content {
  position: relative;
  grid-column: 1 / span 12;

  &.grid {
    @media (max-width: 991px) {
      gap: var(--space-medium);
    }
  }

  &.grid--3 {
    @media (min-width: 992px) {
      row-gap: var(--space-medium);
    }
  }
}

.spr-card-list__content.grid-alt > * {
  .user-logged-in &.contextual {
    grid-area: 1 / 1;
  }

  &:nth-of-type(1):not(.contextual) {
    grid-column: 1 / span 4;

    @media (min-width: 992px) {
      grid-row: span 3;
      grid-column: 1 / span 6;
    }
  }

  &:nth-of-type(2),
  &:nth-of-type(3),
  &:nth-of-type(4) {
    grid-column: 1 / span 4;

    @media (min-width: 992px) {
      grid-column: 7 / span 6;
    }
  }

  @media (max-width: 991px) {
    grid-template-rows: 1fr 1fr 1fr;
  }
}

.pager {
  display: flex;
  grid-column: 1 / span 4;
  justify-content: center;
  padding-block: var(--padding-vertical-small);

  @media (min-width: 992px) {
    grid-column: 1 / span 12;
  }
}

ul.pager__items {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: var(--space-x-small) var(--space-small);
}

.pager__item {
  a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.125rem;
    height: 3.125rem;
    white-space: nowrap;
    text-decoration: none;
    color: var(--color-black);
    border: 0.0625rem solid var(--color-gray-40);
    border-radius: 1.5625rem;
    background-color: transparent;

    &:hover {
      background-color: var(--color-secondary);
    }
  }

  &.is-active {
    a {
      color: var(--color-white);
      border-color: var(--color-primary);
      background-color: var(--color-primary);
    }
  }

  &.pager__item--previous,
  &.pager__item--next {
    a {
      width: auto;
      padding-inline: var(--space-small);
    }
  }

  &.pager__item--first,
  &.pager__item--last {
    a {
      width: auto;
      padding-inline: var(--space-small);
    }
  }
}