#subpages {z-index: 450;}
#subpages[data-status="hide"] {
    opacity: 0;
    visibility: hidden;
}

#subpage-links {
    top: calc(33.3333vw + .5rem);
    left: calc(66.6666vw - 2rem);
    right: var(--size);
    z-index: 200;
}

#subpage-links > div {row-gap: var(--size-xs);}

.subpages_s-subpage.--active {z-index: 20;}
.subpages_s-subpage.--preview {z-index: 40;}




/* 
BACKGROUND
*/
.subpages_s-subpage .--background {opacity: .5;}




/* 
TOP
*/
.subpage-top {
    min-height: 66.6666dvh;
    max-height: 66.6666dvh;
    row-gap: var(--size);
    z-index: 5;
}

.subpage-top .--subtitles {row-gap: var(--size);}
.subpage-top .--subtitles img {
    width: auto;
    height: 2rem;
}




/* 
BOTTOM
*/
.subpage-bottom {
    row-gap: var(--size);
    height: fit-content;
    max-height: 33.3333dvh;
    z-index: 5;
}

.subpages_s-subpage.--active .subpage-bottom {overflow-y: auto;}

.subpage-location {row-gap: var(--size-xs);}

.subpage-location .--date {column-gap: var(--size);}
.subpage-location .--date-info {width: 100%;}

.subpage-location .--ticket {transition: opacity 500ms;}



@media only screen and (min-width: 768px) {
    #subpage-links {
        top: 8vw;
        right: 1rem;
        left: calc(100vw - 8vw - 1rem);
    }

    .subpage-top {
        min-height: 70dvh;
        max-height: 70dvh;
    }

    .subpage-bottom {
        max-height: 30dvh;
    }

    .subpage-location {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: var(--size-m);
    }

    .subpage-location > p {
        grid-column: 1/2;
    }

    .subpage-dates-container {
        grid-column: 2/-1;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--size-m);
    }

    .subpage-location .--date-info {height: fit-content;}
}

@media (hover: hover) {
    #subpage-links button {transition: opacity 500ms;}

    #subpage-links button:hover,
    .subpage-location .--ticket:hover {opacity: var(--alpha);}
}