.galleryMarqueeContainer {
    position: relative;
    overflow: hidden;
}

.galleryMarqueeTrack {
    display: flex;
    width: max-content;
    max-width: none;
    animation: marquee var(--durationXL) linear infinite;
}

.galleryMarqueeContainer:hover .galleryMarqueeTrack {
    animation-play-state: paused;
}

.galleryMarqueePause {
    display: flex;
    gap: var(--gap);
}

.galleryMarqueePause picture {
    display: block !important;
    width: auto !important;
    flex-shrink: 0;
}

.galleryMarqueePause img {
    display: block !important;
    width: auto !important;
    max-width: 50dvw;
    height: auto !important;
    max-height: 50dvh;
    object-fit: cover !important;
}

.galleryMarqueeContainer::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    z-index: 91;
    background-image: linear-gradient(to right, var(--galleryMarquee_shadowColor), var(--colorTransparent) 10%, var(--colorTransparent) 90%, var(--galleryMarquee_shadowColor));
}

.galleryModalBackground {
    width: 100%;
}

.galleryModalBackgroundIsVisible {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 97;
    background-color: var(--galleryModal_backgroundColor);
}

.containerAll:has(.navigationBackground) .galleryModalBackgroundIsVisible {
    top: 50px;
    height: calc(100dvh - 50px);
}

.galleryModalBackgroundIsVisible:has(.imagePictureResponse) {
    padding: 10px;
}

.galleryModalBackgroundIsVisible .blockAuto {
    overflow-y: auto;
}

.containerAll:has(.galleryModalBackgroundIsVisible) {
    overflow: hidden;
}

.galleryModalBackgroundIsVisible > picture > img {
    animation: animationOpacity var(--durationM);
}

.galleryModalBackgroundIsVisible .blockLeft, .galleryModalBackgroundIsVisible .blockRight {
    object-position: center !important;
}

.galleryModalBackgroundUnVisible > .galleryModalCloseButton, .galleryModalBackgroundUnVisible > .galleryModalBackButton, .galleryModalBackgroundUnVisible > .galleryModalNextButton, .galleryModalContentUnVisible {
    display: none;
}

.galleryModalCloseButton, .galleryModalBackButton, .galleryModalNextButton {
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: 98;
    cursor: pointer;
    opacity: var(--opacityMiddle);
    border-radius: var(--galleryModal_borderRadius);
    background-color: var(--galleryModal_iconBackgroundColor);
    transition: opacity var(--durationS) var(--course);
}

.galleryModalCloseButton {
    top: 10px;
    right: 10px;
}

.galleryModalCloseButton > .icon {
    mask: var(--galleryModal_closeIcon);
}

.galleryModalBackButton {
    top: calc(50% - 20px);
    left: 10px;
}

.galleryModalBackButton > .icon {
    mask: var(--galleryModal_backIcon);
}

.galleryModalNextButton {
    top: calc(50% - 20px);
    right: 10px;
}

.galleryModalNextButton > .icon {
    mask: var(--galleryModal_nextIcon);
}

.galleryModalCloseButton > .icon, .galleryModalBackButton > .icon, .galleryModalNextButton > .icon {
    width: 30px;
    height: 30px;
    background-color: var(--galleryModal_iconColor);
}

.galleryModalCloseButton:hover, .galleryModalBackButton:hover, .galleryModalNextButton:hover {
    opacity: var(--opacityUp);
    transition: opacity var(--durationS) var(--course);
}

.gallerySlideContainer {
    position: relative;
    aspect-ratio: 2 / 1;
    width: 100%;
    max-height: 100dvh;
    background-color: var(--gallerySlide_backgroundColor);
}

.containerAll:has(.navigationBackground) .gallerySlideContainer {
    max-height: calc(100dvh - 50px);
}

.gallerySlideImageIsVisible {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 94;
}

.gallerySlideImageIsVisible > img {
    animation: animationOpacity var(--durationM);
}

.gallerySlideImageUnVisible {
    display: none !important;
}

.gallerySlideBackButton, .gallerySlideNextButton {
    position: absolute;
    width: 40px;
    height: 40px;
    top: calc(50% - 20px);
    cursor: pointer;
    z-index: 95;
    opacity: var(--opacityMiddle);
    background-color: var(--gallerySlide_iconBackgroundColor);
    transition: opacity var(--durationS) var(--course);
}

.gallerySlideBackButton:hover, .gallerySlideNextButton:hover {
    opacity: var(--opacityUp);
    transition: opacity var(--durationS) var(--course);
}

.gallerySlideBackButton > .icon, .gallerySlideNextButton > .icon {
    width: 30px;
    height: 30px;
    background-color: var(--gallerySlide_iconColor);
}

.gallerySlideBackButton {
    left: 0;
    border-radius: 0 var(--gallerySlide_borderRadius) var(--gallerySlide_borderRadius) 0;
}

.gallerySlideBackButton > .icon {
    mask: var(--gallerySlide_backIcon);
}

.gallerySlideNextButton {
    right: 0;
    border-radius: var(--gallerySlide_borderRadius) 0 0 var(--gallerySlide_borderRadius);
}

.gallerySlideNextButton > .icon {
    mask: var(--gallerySlide_nextIcon);
}

.galleryCarouselContainer {
    position: relative;
    width: 100%;
    height: 100dvh;
}

.containerAll:has(.navigationBackground) .galleryCarouselContainer {
    height: calc(100dvh - 50px);
}

.galleryCarouselImage, .galleryCarouselParallaxImage {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat, repeat-y;
    transition: opacity var(--durationL) var(--course);
}

.galleryCarouselImage {
    background-attachment: scroll;
}

.galleryCarouselParallaxImage {
    background-attachment: fixed;
}

.galleryCarouselIsVisible {
    opacity: var(--opacityUp);
    z-index: 1;
}

.galleryCarouselUnVisible {
    opacity: var(--opacityDown);
    z-index: -1;
}

.galleryCarouselBackground {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.galleryCarouselBackgroundColor {
    background-color: var(--galleryCarousel_backgroundColor);
}

.galleryCarouselBackgroundImage {
    background-image: var(--galleryCarousel_backgroundImage);
}

@media (prefers-color-scheme: dark) {
    .galleryMarqueeContainer::after {
        background-image: linear-gradient(to right, var(--galleryMarquee_shadowColorD), var(--colorTransparent) 10%, var(--colorTransparent) 90%, var(--galleryMarquee_shadowColorD));
    }

    .galleryModalBackgroundIsVisible {
        background-color: var(--galleryModal_backgroundColorD);
    }

    .galleryModalBackgroundIsVisible > picture > img {
        animation: animationOpacityD var(--durationM);
    }

    .galleryModalCloseButton, .galleryModalBackButton, .galleryModalNextButton {
        background-color: var(--galleryModal_iconBackgroundColorD);
    }

    .galleryModalCloseButton > .icon, .galleryModalBackButton > .icon, .galleryModalNextButton > .icon {
        background-color: var(--galleryModal_iconColorD);
    }

    .gallerySlideContainer {
        background-color: var(--gallerySlide_backgroundColorD);
    }

    .gallerySlideImageIsVisible > img {
        animation: animationOpacityD var(--durationM);
    }

    .gallerySlideBackButton, .gallerySlideNextButton {
        background-color: var(--gallerySlide_iconBackgroundColorD);
    }

    .gallerySlideBackButton > .icon, .gallerySlideNextButton > .icon {
        background-color: var(--gallerySlide_iconColorD);
    }

    .galleryCarouselBackgroundColor {
        background-color: var(--galleryCarousel_backgroundColorD);
    }
}