.carousel-image img {
    width: 100%;
    grid-area: stack;
    height: 100%;
    object-fit: cover;
}

.carousel-image {
    grid-area: stack;
    display: grid;
    grid-template-areas: "stack";
}

.carousel-image + .carousel-image {
    width: 100%;
    opacity: 100;
    animation: 1s 1 normal fadein;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 100;
    }
}

.carousel-container {
    display: grid;
    grid-template-areas: "stack";
    overflow: clip;
}

.carousel-header {
    grid-area: stack;
    background: #FFFFFF99;
    height: 70px;
    text-align: center;
    color: black;
    font-family: "League Spartan Variable";
    font-variation-settings: "wght" 450;
    /*font-size: min(30pt, 5vw);*/
    line-height: 70px;
    vertical-align: middle;
    /*margin-top: 30px;*/
    margin-inline: 0;
    border-top-left-radius: var(--standard-radius);
    border-top-right-radius: var(--standard-radius);
}

.carousel-buttons {
    grid-area: stack;
    display: flex;
    width: 100%;
}

.carousel-buttons > button:focus,
.carousel-buttons > button:hover {
    transition: all var(--hover-transition-time);
    opacity: 100%;
    color: white;
}

.carousel-buttons > button::before {
    background-image: linear-gradient(90deg, #006b1b00 0%, #006b1bbb 100%);
    content: '';
    inset: 0;
    position: absolute;
    opacity: 0;
    transition: opacity var(--hover-transition-time);
    border-radius: var(--standard-radius);
}

.carousel-buttons > :first-child::before {
    background-image: linear-gradient(90deg, #006b1bbb 0%, #006b1b00 100%);
}

@media (pointer: fine) {
    .carousel-buttons > button:hover::before,
    .carousel-buttons > button:focus::before {
        opacity: 1;
        transition: opacity var(--hover-transition-time);
    }
}

.carousel-buttons > button:hover::before,
.carousel-buttons > button:focus::before {
    opacity: 1;
    transition: opacity var(--hover-transition-time);
}

.carousel-buttons > button {
    width: 40%;
    background: linear-gradient(90deg, #006b1b00 0%, #006b1b00 100%);
    border: none;
    border-radius: var(--standard-radius);
    transition: all 0.5s;
    color: white;
    opacity: 50%;
    display: flex;
    position: relative;
}

.carousel-buttons > button > svg {
    margin: auto auto auto 1rem;
}

.carousel-buttons > button:last-child > svg {
    margin: auto 1rem auto auto;
}

.carousel-buttons > button:last-child {
    margin-left: auto;
    margin-right: 0;
}

@media (hover: none) {
    .carousel-buttons > button {
        opacity: 1;
    }
}

@media screen and (max-width: 25rem) {
    .carousel-header {
        height: 40px;
        line-height: 40px;
        font-size: 23px;
    }
}

/*Work around mobile safari being garbage. If this ever breaks, check https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html */
/*for another property labeled "Safari on iOS only", and stick that in in place of "webkit-touch-callout".*/
@supports (-webkit-touch-callout: none) {
    @media screen and (max-width: 63rem) {
        .carousel-container {
            max-height: 52dvw;
            border-radius: var(--standard-radius);
        }

        .carousel-buttons {
            max-height: 52dvw;
        }
    }
}