main {
    display: grid;
}

.w5  { width: 5%; }
.w10 { width: 10%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w33 { width: 33%; }
.w34 { width: 34%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w66 { width: 66%; }
.w75 { width: 75%; }
.w80 { width: 80%; }
.w100 { width: 100%; }

.h20 { height: 20%; }
.h25 { height: 25%; }
.h33 { height: 33%; }
.h34 { height: 34%; }
.h40 { height: 40%; }
.h50 { height: 50%; }
.h60 { height: 60%; }
.h66 { height: 66%; }
.h75 { height: 75%; }
.h80 { height: 80%; }

.bb0 { border-bottom: 0; }
.bt0 { border-top: 0; }

@media (max-width: 800px) {
    /* Small screen, not a nested Kali, and not a 'pages' layout */
    #connection[value=""] ~ header:has([value="pages"]:not(:checked)) ~ main {
        display: flex;
        width: 100%;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        
        section {
            flex: 0 0 100vw;
            height: 100%;
            margin: 0;
            border: 0;
            scroll-snap-align: start;
            scroll-snap-stop: always;

            .detach, input[name="fullscreen"] {
                display: none;
            }

            --section-index: var(--index);

            iframe {
                margin-bottom: 1.8rem;
            }

            .carousel {
                display: inline;
            }
        }
    }
}

/* copy-paste from previous block */
header:has([value="pages"]:checked) ~ main {
    display: flex;
    width: 100%;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    
    section {
        flex: 0 0 100vw;
        height: 100%;
        margin: 0;
        border: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;

        .detach, input[name="fullscreen"] {
            display: none;
        }

        --section-index: var(--index);

        iframe {
            margin-bottom: 3rem;
        }

        .carousel {
            display: inline;
        }
    }
}

header:has([value="tabs"]:checked) ~ main {
    display: flex;
    position: relative;

    &:has(input[name="fullscreen"]:checked) {
        section[id] {
            display: block;
        }
        h2:has(input[name="fullscreen"]:not(:checked)) {
            opacity: 0.5;
            ~ iframe {
                display: none;
            }
        }
    }
    
    &:not(:has(input[name="fullscreen"]:checked)):not(:has(section:hover)):not(:has(h2:hover)):not(:has(iframe:hover)) {
        section:nth-child(1 of section[id]) {
            min-width: max-content;
            h2 {
                opacity: revert;
            }
            iframe {
                opacity: revert;
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
            }
        }
    }

    section {
        height: 1.5rem;
        margin-top: 0;
        &:nth-child(1 of section[id]) {
            margin-left: 4.3rem;
        }
        width: min-content;
        border-radius: 0 0 0.5rem 0;

        h2 {
            width: max-content;
            opacity: 0.5;
        }

        &:hover,
        &:has(h2 input[name="fullscreen"]:checked) {
            min-width: max-content;
            h2 {
                opacity: revert;
            }
        }
        
        iframe {
            opacity: 0;
        }
        h2:hover ~ iframe,
        h2:has(input[name="fullscreen"]:checked) ~ iframe,
        iframe:hover {
            opacity: revert;
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        }
    }
}

header:has([value="grid-1-cols"]:checked) ~ main {
    grid-auto-flow: row;
}
header:has([value="grid-1-rows"]:checked) ~ main {
    grid-auto-flow: column;
}
header:has([value="grid-2-cols"]:checked) ~ main {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
}
header:has([value="grid-2-rows"]:checked) ~ main {
    grid-auto-flow: column;
    grid-template-rows: 1fr 1fr;
}
header:has([value="grid-3-cols"]:checked) ~ main {
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-flow: row;
}
header:has([value="grid-3-rows"]:checked) ~ main {
    grid-auto-flow: column;
    grid-template-rows: 1fr 1fr 1fr;
}
header:has([value="grid-cols-2-1"]:checked) ~ main {
    grid-template-columns: 2fr 1fr;
    grid-auto-flow: row;
}
header:has([value="grid-cols-3-1"]:checked) ~ main {
    grid-template-columns: 3fr 1fr;
    grid-auto-flow: row;
}
header:has([value="grid-cols-4-1"]:checked) ~ main {
    grid-template-columns: 4fr 1fr;
    grid-auto-flow: row;
}
header:has([value="grid-cols-1-2"]:checked) ~ main {
    grid-template-columns: 1fr 2fr;
    grid-auto-flow: row;
}
header:has([value="grid-cols-1-3"]:checked) ~ main {
    grid-template-columns: 1fr 3fr;
    grid-auto-flow: row;
}
header:has([value="grid-cols-1-4"]:checked) ~ main {
    grid-template-columns: 1fr 4fr;
    grid-auto-flow: row;
}
header:has([value="grid-cols-2-3"]:checked) ~ main {
    grid-template-columns: 2fr 3fr;
    grid-auto-flow: row;
}
header:has([value="grid-cols-3-2"]:checked) ~ main {
    grid-template-columns: 3fr 2fr;
    grid-auto-flow: row;
}
header:has([value="grid-rows-2-1"]:checked) ~ main {
    grid-template-rows: 2fr 1fr;
    grid-auto-flow: column;
}
header:has([value="grid-rows-3-1"]:checked) ~ main {
    grid-template-rows: 3fr 1fr;
    grid-auto-flow: column;
}
header:has([value="grid-rows-4-1"]:checked) ~ main {
    grid-template-rows: 4fr 1fr;
    grid-auto-flow: column;
}
header:has([value="grid-rows-1-2"]:checked) ~ main {
    grid-template-rows: 1fr 2fr;
    grid-auto-flow: column;
}
header:has([value="grid-rows-1-3"]:checked) ~ main {
    grid-template-rows: 1fr 3fr;
    grid-auto-flow: column;
}
header:has([value="grid-rows-1-4"]:checked) ~ main {
    grid-template-rows: 1fr 4fr;
    grid-auto-flow: column;
}
header:has([value="grid-rows-2-3"]:checked) ~ main {
    grid-template-rows: 2fr 3fr;
    grid-auto-flow: column;
}
header:has([value="grid-rows-3-2"]:checked) ~ main {
    grid-template-rows: 3fr 2fr;
    grid-auto-flow: column;
}
header:has([value="grid-1-2"]:checked) ~ main {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-auto-flow: row;
    section:nth-child(5) {
        grid-row-start: span 9;
    }
}
header:has([value="grid-1-2-1-2"]:checked) ~ main {
    grid-template-columns: 1fr 2fr;
    grid-template-rows: repeat(1, minmax(max-content, 1fr)) repeat(1, minmax(max-content, 2fr)) repeat(1, minmax(max-content, 1fr));
    grid-auto-flow: row;
    section:nth-child(7) {
        grid-row-start: span 9;
    }
}
header:has([value="grid-2-1-2-1"]:checked) ~ main {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(1, minmax(max-content, 2fr)) repeat(1, minmax(max-content, 1fr)) repeat(1, minmax(max-content, 1fr));
    grid-auto-flow: column;
}