.panorama-container {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.panorama-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.panorama-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.panorama-slide.is-active {
    opacity: 1;
}

.panorama-slide-image {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: var(--panorama-zoom, 200%) auto;
    background-position: 0% center;
    animation-name: panorama-pan;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: var(--panorama-speed, 30s);
}

@keyframes panorama-pan {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 100% center;
    }
}

@media (max-width: 768px) {
    .panorama-container {
        min-height: 200px;
    }
}