@layer components {
  .large-signpost-carousel__bg::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-color: var(--ui-images-overlays-image-tint);
  }
  .large-signpost-carousel .arrow-button {
    position: absolute;
    z-index: 2;
    top: calc(50% - 1.6rem);
  }
  .large-signpost-carousel .arrow-button:first-of-type {
    inset-inline-start: var(--sm-3);
  }
  .large-signpost-carousel .arrow-button:last-of-type {
    inset-inline-end: var(--sm-3);
  }
  @media (min-width: 768px) {
    .large-signpost-carousel .arrow-button:first-of-type {
      inset-inline-start: var(--lg-3);
    }
    .large-signpost-carousel .arrow-button:last-of-type {
      inset-inline-end: var(--lg-3);
    }
  }
}