body:has(div.epaper-root[data-paging-position='first']) { .banner-wrapper-0 { opacity: 1; }}
body:has(div.epaper-root[data-paging-position='first']) { .banner-wrapper-0.before { left: 0; }}
body:has(div.epaper-root[data-paging-position='last']) { .banner-wrapper-1 { opacity: 1; }}
body:has(div.epaper-root[data-paging-position='last']) { .banner-wrapper-1.after { right: 0; }}
.banner-wrapper-0 {
	container-type: inline-size;
	container-name: banner-wrapper-0;
	left: 0;
	padding: 0 0;
	.image-wrapper {
		justify-content: center;
		align-items: center;
	}
}
@container banner-wrapper-0 (width < 200px) {
.banner-wrapper-0 .image-wrapper {display: none !important;}
}
.banner-wrapper-0 .slideButton { margin-left: 5%;}
.banner-wrapper-0 .slideButton { bottom: 13%;}
.banner-wrapper-0.mobile-visible { background: #015329; }
.banner-wrapper-1 {
	container-type: inline-size;
	container-name: banner-wrapper-1;
	right: 0;
	padding: 0 0;
	.image-wrapper {
		justify-content: center;
		align-items: center;
	}
}
.banner-wrapper-1 .slideButton { margin-left: 45%;}
.banner-wrapper-1 .slideButton { bottom: 9%;}
.banner-wrapper-1.mobile-visible { background: #015329; }

@keyframes h-flyout {
    0% {
        transform: scaleX(0.1);
        opacity: 0;
    }
    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

.epaper-root {
    &[data-func-mode="overview"],
    &[data-view="zoom"] {
        .banner-wrapper.before {
            left: -1000px !important;
        }

        .banner-wrapper.after {
            right: -1000px !important;
        }
    }

    .main-controls {
        z-index: 10;
    }
}

.banner-wrapper {
    position: absolute;
    width: var(--banner-wrapper-width);
    height: var(--banner-wrapper-height);
    top: var(--banner-wrapper-top);
    box-sizing: border-box;
    /* display: none; */
    opacity: 0;
    transition: all 1s ease-in-out;

    &.before {
        left: -1000px;
    }

    &.after {
        right: -1000px;
    }

    .image-wrapper {
        position: absolute;
        display: flex;
        width: var(--banner-wrapper-width);
        height: var(--banner-wrapper-height);
        top: 0;

        .link {
            max-height: var(--banner-wrapper-height);
            line-height: 0.1em;
            position: relative;
            filter: drop-shadow(0px 0px 30px #fff);

            img {
                max-width: var(--banner-wrapper-width);
                max-height: var(--banner-wrapper-height);
            }
        }
    }
}

.slideButton {
    position: absolute;
    z-index: 1;
    left: 0;
    margin-left: 40%;
    bottom: 15%;
    width: 50%;
    filter: drop-shadow(1px 1px 2px #000);

    .h-flyout {
        opacity: 0;
        transform: scaleX(0.1);
    }

    &:hover {
        .h-flyout {
            transform-origin: left top;
            animation: h-flyout .25s ease-in-out 1;
            opacity: 1;
            transform: scaleX(1);
        }
    }
}

.banner-wrapper .mobile-closer {
    display: none;
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    background: transparent url(mobile-closer.svg) center no-repeat;
    background-size: contain;
}

@media (max-width: 700px) {
    /* .invalid-selector { */
        .banner-wrapper {
            display: none !important;
            top: 0 !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: auto !important;
            height: auto !important;
            z-index: 99;
        }

        .banner-wrapper.mobile-visible {
            display: block !important;
        }

        .banner-wrapper .mobile-closer {
            display: block;
        }

        .banner-wrapper .image-wrapper {
            top: 0 !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: auto !important;
            height: auto !important;
        }

        .banner-wrapper .image-wrapper .link {
            max-height: var(--window-height) !important;
            max-width: var(--window-width) !important;
            filter: none;
        }

        .banner-wrapper .image-wrapper .link img {
            max-height: var(--window-height) !important;
            max-width: var(--window-width) !important;
        }
    /* } */

    .epaper-root:has(.banner-wrapper.mobile-visible) {
        .media-bar {
            /* display: none !important; */
        }
    }
}