/* Tierzuliebe Animal-Slider
 * Slider-Container und Slide-Animation für mod_tzl_animalSlider.
 * Polaroid-Styling (.polaroid-wrapper/-frame) liegt in files/css/modules/animal-card.css.
 * Slide-Position-Wechsel wird von animalSlider.js via data-slide-position gesteuert.
 */

.mod_tzl_animalSlider {
    container-type: inline-size;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 40vh;
    margin-top: calc(-1 * var(--size-large));

    .slides {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .slide {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        overflow: hidden;
        transition: translate 0.5s ease;

        &[data-slide-position="start"]  { translate: 100%; transition: none; }
        &[data-slide-position="center"] { translate: 0; }
        &[data-slide-position="end"]    { translate: -100%; }
    }

    .bg-image {
        position: absolute;
        inset: 0;
        background-size: auto 50%;
        background-position: center;
        filter: sepia(1);
        background-repeat: repeat-x;
    }

    .slide-link {
        height: 80%;
        aspect-ratio: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mod_tzl_animalSlider .slide {
        transition: none;
    }
}