.spr-card-list {
  position: relative;
}

.spr-card-list__header:not(:empty) {
  grid-column: 1 / span 4;
  margin-block-end: 1.5rem;

  @media (min-width: 768px) {
    margin-block-end: 4rem;
  }

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

.spr-card-list__content {
  display: flex;
  flex-direction: column;
  grid-column: 1 / span 4;
  gap: clamp(2rem, calc(1.861rem + 0.591vw), 2.5rem);
  margin-block-end: var(--padding-component);

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

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

.spr-card-list__pager {
  grid-column: 1 / span 4;

  &.spr-card-list__infinite-scroll {
    a.button {
      transition: all 0.3s ease-in-out;
      text-decoration: none;
      color: var(--color-white);
      border-radius: 0.3125rem;
      background-color: var(--color-tertiary);
      font-family: var(--font-alternate);
      font-size: 1.5rem;
      font-weight: 700;
      padding-block: 0.625rem;
      padding-inline: 1.25rem;

      &:hover {
        transition: all 0.3s ease-in-out;
        background-color: var(--color-primary);
      }
    }
  }

  @media screen and (min-width: 48rem) {
    grid-column: 1 / span 12;
  }
}

.spr-card-list__from-category,
.spr-card-list__news-block-all,
.spr-card-list__campaign-items,
.spr-card-list__block-all-risks {
  .spr-card-list__content {
    display: grid;
    grid-template-columns: subgrid;
    scroll-padding-block-start: 10rem;

    .spr-card {
      grid-column: auto / span 4;

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

      @media screen and (min-width: 48rem) {
        grid-column: auto / span 6;
      }

      @media screen and (min-width: 62rem) {
        grid-column: auto / span 4;
        scroll-padding-block-start: 12.5rem;
      }
    }
  }
}

/* Overrides for the PWA */

body.site--is-pwa .spr-card-list__block-all-risks,
body.site--is-pwa .spr-card-list__news-block-all {
  .spr-card.is-vertical {
    flex-direction: row;
    align-items: center;
    border-radius: 0;
    background-color: var(--color-white);

    .spr-heading {
      a::before {
        width: 37.5rem;
        height: 12.5rem;
        transform: translate(-4rem, -4rem);
      }
    }

    &:hover {
      box-shadow: none;
    }
  }

  .spr-card__actions {
    display: none;
  }

  .vocabulary-incident-category {
    display: none;
  }

  .spr-heading {
    display: flex;
    align-items: center;
    margin-block-end: 0;
    padding-block: 0;
    font-size: 1rem;
    line-height: 120%;

    a::before {
      position: absolute;
      z-index: 100;
      display: block;
      width: 37.5rem;
      height: 12.5rem;
      content: "";
      transform: translate(-4rem, -4rem);
      inset: 0;
    }

    &::after {
      position: absolute;
      right: 1rem;
      bottom: 0.5rem;
      display: block;
      content: url(../../images/icons/icon-caret-circle-orange.svg);
      max-inline-size: 1.5rem;
      max-block-size: 1.5rem;
      block-size: 100%;
      inline-size: 100%;
    }
  }

  .spr-card__media {
    max-inline-size: 4rem;
    flex-shrink: 0;
    height: 100%;
  }

  .spr-card-list__content {
    gap: 0.125rem;
  }

  .spr-card__content {
    padding-block: 1.375rem;
    padding-inline-end: 3rem;

    .spr-card__badges + p {
      display: none;
    }
  }
}

body.site--is-pwa .spr-card-list__news-block-all {
  .spr-card {
    height: auto;
    margin-block-end: 0;

    .spr-card__badges + p {
      display: none;
    }
  }
}

body.page-node-type-marketing-page .block-views-blocknews-article-news-block-all,
body.page-node-type-marketing-page .block-views-blocknews-article-campaign-items {
  background-color: var(--color-gray-20);
  padding-block: var(--padding-component) calc(var(--padding-component) - clamp(2rem, calc(1.861rem + 0.591vw), 2.5rem));

  h2 {
    margin: 0 var(--padding-inline-grid) clamp(1rem, calc(0.584rem + 1.774vw), 2.5rem);
    /* min: 16px, max: 40px */
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-extra-bold);
  }

  .spr-card-list__content {
    margin-block-end: unset;
  }
}