.block__images {
    overflow: hidden;
}

.imagecarousel {
    position: relative;
    display: flex;
    justify-content: center;
}

@media(min-width: 992px) {

    .imagecarousel > .button {
        position: absolute;
        top: calc(50% - 1.8rem);
        z-index: 1;
    }

    .imagecarousel > .button--prev {
        left: 2rem;
    }

    .imagecarousel > .button--next {
        right: 2rem;
    }
}

@media(max-width: 991px) {
    .imagecarousel > .button {
        display: none;
    }
}

.imagecarousel > ul {
    list-style: none;
    display: flex;
    position: absolute;
    bottom: 2rem;
    z-index: 1;
}

    .imagecarousel > ul li button {
        outline: 0;
        border: 0;
        box-shadow: none;
        margin: 0 1rem;
        padding: 0;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background-color: var(--white);
        text-indent: -9000px;
        transition: var(--transition-default);
    }

    .imagecarousel > ul li.is--active button {
        background-color: var(--orange);
    }

.imagecarousel__items {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    position: relative;
    z-index: 0;
}

.imagecarousel__item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    z-index: 0;
}

    .imagecarousel__item.is--active,
    .imagecarousel__item.is--fadeout {
        visibility: visible;
    }

    .imagecarousel__item.is--active {
        animation: showHero 1s ease-out forwards;
        z-index: 1;
    }

    .imagecarousel__item.is--fadeout {
        opacity: 1;
    }

.imagecarousel__image,
.imagecarousel__video {
    position: relative;
    z-index: 0;
    overflow: hidden;
}

    .imagecarousel__image img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: 50% 50%;
        transform: scale(1);
    }

@media(min-width: 1024px) {
    .imagecarousel__item.is--active .imagecarousel__image[data-zoom-desktop="true"] img {
        animation: showHeroZoom 3s ease-out forwards;
    }

    .imagecarousel__item.is--fadeout .imagecarousel__image[data-zoom-desktop="true"] img {
        transform: scale(1.1);
    }
}

@media(max-width: 1023px) {
    .imagecarousel__item.is--active .imagecarousel__image[data-zoom-mobile="true"] img {
        animation: showHeroZoom 3s ease-out forwards;
    }

    .imagecarousel__item.is--fadeout .imagecarousel__image[data-zoom-mobile="true"] img {
        transform: scale(1.1);
    }
}

.imagecarousel__item.is--active .imagecarousel__image:has(+.imagecarousel__video) {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    /*animation: hideHeroVideoPlaceholder 1.5s ease-out forwards;*/
    opacity: 0;
}

.imagecarousel__video iframe.is--loading {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.imagecarousel__video iframe {
    opacity: 1;
    pointer-events: auto;
}

.imagecarousel__video .iframe__container {
    width: 100vw;
    height: auto;
    aspect-ratio: 16 / 9;
    background-color: var(--black);
    padding-top: 0;
    position: relative;
    z-index: 0;
}

    .imagecarousel__video .iframe__container iframe,
    .imagecarousel__video .iframe__container video {
        width: 100%;
        height: 56.25vw;
    }

    .imagecarousel__video .iframe__container video {
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

@media (pointer: fine) {
    .imagecarousel__item:has(> .imagecarousel__text > .container > .imagecarousel__button):hover .button--arrow:after {
        opacity: 1;
    }
}

@keyframes showHero {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes showHeroZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

@keyframes hideHeroVideoPlaceholder {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@media(max-width: 576px) {
    .imagecarousel__video .iframe__container iframe,
    .imagecarousel__video .iframe__container video {
        --hero-video-width: calc(1.777777777777778 * var(--hero-height));
        width: var(--hero-video-width);
        height: var(--hero-height);
        transform: translateX(calc(calc(var(--hero-video-width) - 100vw) / -2)) scale(1.1);
    }
}

@media(max-width: 576px) {
    .imagecarousel__text > .container {
        padding-bottom: 4rem;
    }

    .imagecarousel__text .button {
        margin-top: 0;
    }

    .imagecarousel > ul {
        bottom: -1rem;
    }
}

@media (prefers-reduced-motion) {
    .imagecarousel__item.is--active,
    .imagecarousel__item.is--active .imagecarousel__image[data-zoom-desktop="true"] img,
    .imagecarousel__item.is--active .imagecarousel__image:has(+.imagecarousel__video) {
        animation: none !important;
    }

    .imagecarousel__item.is--active {
        opacity: 1;
    }

        .imagecarousel__item.is--active .imagecarousel__image:has(+.imagecarousel__video) {
            opacity: 1;
        }

        .imagecarousel__item.is--active .imagecarousel__video {
            visibility: hidden;
        }
}

.imagecarousel__caption {
    font-size: var(--fontsize-body-sm);
    padding: var(--padding) 0;
}