[id*="storybook_wrapper"] .spr-banner {
  inline-size: 100%;
  max-inline-size: 1140px;
  margin-inline: auto;
}

.spr-banner {
  overflow: hidden;
  border-radius: clamp(0.5rem, calc(0.361rem + 0.591vw), 1rem);
  container: banner / inline-size;

  .spr-banner__content {
    display: flex;
    flex-direction: row;
    height: 100%;
    container: banner-content / inline-size;

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

  .media__image {
    inline-size: 100%;
    height: 100%;
  }

  .spr-rich-text {
    display: flex;
    flex: 1 0 100%;
    flex-direction: column;
    padding: 2rem;
    inline-size: 100%;

    a:not(.spr-button) {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: var(--color-black);
      font-weight: var(--font-weight-extra-bold);
      gap: 0.625rem;

      &:hover {
        text-decoration: underline;
        color: var(--color-black);
        text-decoration-thickness: 0.125rem;
      }

      &::after {
        position: relative;
        top: -0.25rem;
        display: inline-block;
        content: url("../../images/icons/icon-caret-black.svg");
        transform: scale(2);
        transform-origin: center;
      }

      &:has(span.extlink-nobreak) {
        &::after {
          content: unset;
        }
      }
    }

    @media screen and (min-width: 62rem) {
      flex: 1 0 50%;
    }
  }

  .spr-banner__links {
    display: flex;
    justify-content: flex-end;
    margin-block-start: auto;
    padding-block-start: 1.25rem;
  }

  .spr-banner__media:has(img) {
    position: relative;
    inline-size: 60%;

    .media.contextual-region {
      display: contents;
    }

    img {
      position: absolute;
      inset: 0;
      aspect-ratio: 3 / 2;
      inline-size: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    @media (min-width: 62rem) {
      aspect-ratio: 3/2;
      inline-size: 100%;

      img {
        aspect-ratio: 3/2;
      }
    }
  }

  @container banner (max-inline-size: 30rem) {
    .spr-banner__content {
      flex-direction: column;
      flex-wrap: nowrap;
      height: auto;
    }
  }

  @container banner-content (max-inline-size: 30rem) {
    .spr-banner__media:has(img) {
      aspect-ratio: 3/2;
      inline-size: 100%;

      img {
        aspect-ratio: 3/2;
      }
    }
  }
}

.spr-banner.spr-banner--bg-is-primary .spr-banner__content {
  background-color: var(--color-primary-light);
}

.spr-banner.spr-banner--bg-is-secondary .spr-banner__content {
  background-color: var(--color-secondary-light);
}

.spr-banner.spr-banner--bg-is-tertiary .spr-banner__content {
  background-color: #fff8b1;
}

.spr-call-to-actions {
  padding: var(--padding-component) 0;

  .spr-banner {
    grid-column: auto / span 12;

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

.spr-article-detail__sidebar {
  .spr-banner {
    margin-block-end: clamp(1.5rem, calc(0.876rem + 2.661vw), 3.75rem);
  }
}

.spr-article-detail__sidebar .spr-banner__content {
  @media screen and (max-width: 62rem) {
    .spr-rich-text {
      flex: unset;
    }
  }
}

.spr-banner--warning,
.spr-banner--info {
  .spr-banner__content {
    grid-column: 1 / span 12;
  }
}

/* stylelint-disable */
.spr-banner--warning {
  border: 5px dashed var(--color-warning);

  .spr-banner__content {
    background-color: hsl(from var(--color-warning) h s calc(l + 30));
  }
}

.spr-banner--info {
  border: 5px dashed hsl(from var(--color-success) h s l);

  .spr-banner__content {
    background-color: hsl(from var(--color-success) h s calc(l + 40));
  }
}
/* stylelint-enable */