[id*="storybook_wrapper"] {
  background-color: var(--color-white);
}

[id*="storybook_wrapper"] .spr-card-shortview .spr-card {
  inline-size: unset;
  max-inline-size: unset;
  margin-inline: unset;
}

.block-views-blocknews-article-shortview-marketing {
  background-color: var(--card-list-background-color);
}

.spr-card-shortview {
  overflow-x: hidden;
  background-color: var(--color-gray-20);
  padding-block: var(--padding-component);
  container-name: card-shortview;

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

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

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

  .spr-card {
    flex-direction: column;

    .spr-card__media {
      @media (min-width: 48rem) and (max-width: 62rem) {
        inline-size: 40%;
      }
    }

    .spr-card__content {
      @media (min-width: 48rem) and (max-width: 62rem) {
        inline-size: 60%;
      }
    }

    @media (min-width: 48rem) {
      flex-direction: row;
    }

    @media (min-width: 62rem) {
      flex-direction: column;
    }
  }

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

  .spr-card-shortview__heading {
    display: flex;
    grid-column: 1 / span 4;
    align-items: flex-end;
    justify-content: space-between;

    h2 {
      font-size: var(--font-size-h2);
      font-weight: var(--font-weight-extra-bold);
    }

    .spr-card-shortview__link {
      padding-block-end: 0.25rem;

      a {
        color: var(--color-primary-dark);
        font-size: clamp(1rem, calc(0.931rem + 0.296vw), 1.25rem);
        text-underline-offset: 0.125rem;

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

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

/* Style for the news article shortview */

.spr-article-detail__content-footer.news-article .spr-card__content {
  background-color: var(--news-article-interesting-card-background-color);
}

body.site--is-pwa .spr-card-shortview {
  gap: 0.125rem;

  .spr-card-shortview__heading {
    margin-block-end: 1rem;
  }

  .spr-card.is-vertical {
    flex-direction: row;
    align-items: center;
    margin-block-end: 0;
    border-radius: 0;

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

    &: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%;

    &::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;
    }
  }
}