.sa-posters {
    margin-block: 1.5rem;
    --sa-posters-max-height: 280px;
}

.sa-posters--message .sa-posters-alert__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    font-size: 1rem;
}

.sa-posters-grid__item img,
.sa-posters-grid__img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: var(--sa-posters-max-height);
    object-fit: contain;
    margin-inline: auto;
}

.sa-posters--grid .sa-posters-tile {
    max-width: 100%;
}

.sa-posters-tile {
    cursor: zoom-in;
}

.sa-posters-tile:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: 0.5rem;
}

/* Poster slider. */
.sa-posters--slider {
    margin-block: 0.5rem;
}

.sa-posters--slider .sa-posters-slider {
    max-width: min(100%, 17.5rem);
    margin-inline: auto;
}

.sa-posters--slider .sa-posters-slider__viewport {
    padding: 0.65rem 0.8rem;
    line-height: 0;
    box-sizing: border-box;
}

.sa-posters--slider .sa-posters-slider__viewport--square {
    border-radius: 0;
}

.sa-posters--slider .sa-posters-slider__track {
    display: flex;
    transition: transform 0.45s ease;
    will-change: transform;
    align-items: center;
}

.sa-posters--slider .sa-posters-slide {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.sa-posters--slider .sa-posters-slide__caption {
    display: none !important;
}

.sa-posters--slider .sa-posters-slide__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
}

.sa-posters--slider .sa-posters-slide__img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: var(--sa-posters-max-height);
    height: auto;
    object-fit: contain;
    margin-inline: auto;
}

.sa-posters--slider .sa-posters-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    opacity: 0.9;
    padding: 0.25rem 0.45rem;
}

.sa-posters--slider .sa-posters-slider__nav--prev {
    left: 0;
}

.sa-posters--slider .sa-posters-slider__nav--next {
    right: 0;
}

@media (min-width: 576px) {
    .sa-posters--slider .sa-posters-slider {
        max-width: min(100%, 19rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sa-posters--slider .sa-posters-slider__track {
        transition: none;
    }
}