special-pages/pages/duckplayer/app/components/DesktopApp.module.css
:root {
    /* Set video to take up 80vw width */
    --video-width: 80vw;
    --outer-radius: 16px;
    --inner-radius: 8px;
}

@media screen and (max-width: 1080px) {
    :root {
        --video-width: 85vw;
    }
}

@media screen and (max-width: 740px) {
    :root {
        --video-width: 90vw;
    }
}

:root [data-layout="desktop"] {
    --frame-height: min(
            calc(var(--video-width) * calc(9 / 16)),
            80vh
    )
}
:root [data-layout="mobile"][data-orientation="portrait"] {
    --video-width: calc(100vw - 32px)
}
:root [data-layout="mobile"][data-orientation="landscape"] {
    --video-width: calc(calc(100vw - 32px)  * 0.6) /* 60% of the container */
}
@media screen  and (max-width: 700px) {
    :root [data-layout="mobile"][data-orientation="landscape"] {
        --video-width: calc(calc(100vw - 32px)  * 0.5) /* 60% of the container */
    }
}

:root [data-layout="mobile"] {
    --frame-height: min(
            calc(var(--video-width) * calc(9 / 16)),
            calc(100vh - 32px)
    )
}

.app {
    margin: 0 auto;
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
    max-width: 3840px;
    color: rgba(255, 255, 255, 0.85);
}

.portrait {
    height: 100%;
    display: grid;
    align-self: center;
    grid-template-areas:
        'header'
        'main';
    grid-template-rows: max-content 1fr;
}

.landscape {
    height: 100%;
    display: grid;
    align-self: center;
    align-items: center;
    align-content: center;
}

.wrapper {}

.portrait .wrapper {
    grid-area: main;
    display: grid;
    grid-template-areas:
        'main'
        'controls';
    grid-template-rows: auto max-content;
}

.landscape .wrapper {
    display: grid;
    grid-template-columns: 60% 1fr;
    grid-column-gap: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--outer-radius);
    padding: 8px;
    @media screen  and (max-width: 700px) {
        grid-template-columns: 50% 1fr;
    }
}

.desktop {
    height: 100%;
    width: var(--video-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rhs {
    display: grid;
    height: 100%;
    grid-template-areas: 'header' 'controls' 'switch';
    grid-template-rows: max-content max-content auto;
    grid-template-columns: 1fr;
    grid-row-gap: 12px;
}

/* When the RHS has a checked checkbox, we can center the other content */
.rhs:has([data-state=completed] [aria-checked="true"]) {
    align-content: center;
}

.header {
    grid-area: header;
    padding-top: 48px;
    @media screen and (max-height: 500px) {
        padding-top: 32px;
    }
}

.main {
    align-self: center;
}

.controls {
    grid-area: controls
}
.switch {
    grid-area: switch
}

.landscape .header {
    padding-top: 8px;
}
.landscape .switch {
    align-self: end;
}
