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

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

  .grid {
    display: block;

    @media screen and (min-width: 62rem) {
      padding-inline-end: unset;
    }
  }

  .slick-slide {
    display: flex !important;
    height: inherit;
    margin: 0 1.25rem;

    &:focus-visible {
      outline: 0.0625rem solid var(--color-secondary-dark);
    }
  }

  .slick-slider {
    padding-bottom: 4.25rem;
  }

  .slick-list {
    overflow: visible;
    margin: 0 -1.25rem 0 0;

    @media screen and (min-width: 62rem) {
      padding-inline-end: unset;
    }
  }

  .slick-track {
    display: flex;
  }

  button.is-control {
    position: absolute;
    z-index: 10;
    bottom: 0;
    display: block;
    border: 0;
    inline-size: 2.5rem;
    block-size: 2.5rem;

    &:hover {
      cursor: pointer;
    }

    &.slick-disabled {
      opacity: 0.6;
    }

    &.previous-button {
      left: 0;
      background: transparent url("../../images/icons/icon-arrow.svg") no-repeat center;

      @media screen and (min-width: 62rem) {
        right: 8.5rem;
        left: unset;
      }

      @media screen and (min-width: 108rem) {
        right: 4.25rem;
        left: unset;
      }
    }

    &.next-button {
      left: 4.25rem;
      transform: rotate(180deg);
      background: transparent url("../../images/icons/icon-arrow.svg") no-repeat center;

      @media screen and (min-width: 62rem) {
        right: 4.25rem;
        left: unset;
      }

      @media screen and (min-width: 108rem) {
        right: 0;
        left: unset;
      }
    }
  }

  .spr-card {
    flex-shrink: 0;
    width: 100% !important;
    max-inline-size: 18.5rem;

    @media screen and (min-width: 62rem) {
      max-inline-size: 22.5rem;
    }

    @media screen and (min-width: 108rem) {
      max-inline-size: 26.5rem;
    }
  }

  /* .fake {
    display: flex;
    @media screen and (min-width: 62rem) {
      display: none !important;
      max-inline-size: unset;
      width: 0 !important;
    }
  } */

  .fake {
    display: none;

    @media screen and (min-width: 62rem) {
      display: block !important;
      flex-shrink: 0;
      width: 100% !important;
      max-inline-size: 22.5rem;
    }

    @media screen and (min-width: 108rem) {
      max-inline-size: 26.5rem;
      display: none;
    }
  }

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

  .spr-card-shortview-slider__heading {
    display: flex;
    grid-column: 1 / span 4;
    align-items: flex-end;
    justify-content: space-between;
    margin-block-end: clamp(1.5rem, calc(1.223rem + 1.183vw), 2.5rem);

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

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

      &.mobile-hidden {
        display: none;

        @media screen and (min-width: 62rem) {
          display: block;
          padding-inline-end: 3rem;
        }

        @media screen and (min-width: 120rem) {
          padding-inline-end: 0;
        }
      }

      a {
        color: var(--color-secondary-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: 62rem) {
        padding-inline-end: 0;
      }
    }

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

  .spr-card-shortview-slider__bottom-link.mobile-only {
    position: absolute;
    right: var(--padding-inline-grid);
    transform: translateY(-125%);
    color: var(--color-secondary-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: 62rem) {
      display: none;
    }
  }
}

/* Style for the news article shortview */

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

/* Overrides for the PWA */

body.site--is-pwa.path-frontpage .spr-card-shortview-slider {
  display: none;
}