/* Desktop > 1024px */

@media (min-width: 1024px) {

/* Layout */

    section, header, footer{
        padding: 24px;
    }

    header{
        height: 100vh;
    }

    .headline{
        width: 50%;
    }

    .grid-4, .grid-6{
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .grid{
        display: grid;
        gap: 24px;
        align-items: start;
    }

    .grid-4{
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-6{
        grid-template-columns: repeat(6, 1fr);
    }

    li{
        flex-direction: column;
    }

    a:hover {
        color: inherit;
        text-decoration: none;
    }

    .menu-links > li:hover{
        filter: brightness(50%);
    }

    button::after {
        content: "";
        position: absolute;
        top: -1px; left: -1px; right: -1px; bottom: -1px;
        background: rgba(0, 0, 0, 0.2);
        opacity: 0;
        border-radius: 999px;
        transition: opacity 200ms ease-in-out;
    }

    button:hover::after {
        opacity: 1;
    }

    .button-bar{
        gap: 16px;
    }

/* Typography */

    h1, .menu-links > li {
        font-size: 48px;
    }

    h2{
        font-size: 36px;
    }

    .next > h2 > a, .previous > h2 > a{
        font-size: 48px;
    }
   
    h3{
        font-size: 28px;
        letter-spacing: 0.2px;
    }

    h3 > span{
        height: calc(28px * 3 * 1.25);
    }

    body{
        font-size: 20px;
    }

    footer{
        font-size: 16px;
    }

    p{
        margin: 0;
    }

    .underline{
        text-decoration-thickness: 3px;
        text-underline-offset: 4px;
    }    

/* Menu */

    .menu-open, .menu-close{
        top: 24px;
        right: 24px;
        transition: transform 200ms ease-in-out, height 200ms ease-in-out, width 200ms ease-in-out, margin 200ms ease-in-out;
    }

    .menu-open:hover, .menu-close:hover {
        height: 32px !important;
        width: 32px !important;
        margin: 2px !important;
    }

    .menu-background, .outro-background{
        top: 24px;
        right: 24px;
    }

    @keyframes menuTransitionIn {
        0% {
            width: 0;
            height: 0;
            top: 42px;
            right: 42px;
        }
        100% {
            width: 300vw; 
            height: 300vw;  
            top: -150vw;
            right: -150vw;
        }
    }

/* Teaser */

    .teaser-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 84px;
        row-gap: 120px;
        padding: 84px !important;
    }

    .teaser-visual img,
    .teaser-visual video{
        filter: brightness(0.8);     
        transition: filter .3s ease;
        will-change: filter;
    }

    .teaser:hover .teaser-visual img,
    .teaser:hover .teaser-visual video {
        filter: none;
    }

    .teaser > h3 {
        width: 62%;
        text-align: center;
    }

    .teaser {
        align-self: center;
        display: flex;
        align-items: center;
        gap: 36px;
    }

    .teaser-visual-mobile video,
    .teaser-visual-mobile img {
        display: block !important;
        height: calc(50vw - 144px) !important;  
        max-height: 70vh !important;       
        width: auto !important;            
        border-radius: 42px !important;
    }

/* Contact */

    .contact{
        min-height: 100vh;
    }

    .contact-img{
        grid-column: 5 / span 2;
    }

    .contact-img img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .contact-footer{
        background-color:#E8E8E8; 
        padding: 0 !important;
    }

    .contact-text{
        grid-column: 1 / span 3;
    }

    .contact-text > span > a {
        text-decoration: underline; 
        text-decoration-thickness: 2px; 
        text-underline-offset: 4px;
    }



/* Project */

    .ui-toggle{
        padding-top: 24px;
        padding-right: calc(36px + 24px);
        gap: 16px;
        justify-content: end;
    }

    .gallery{
        gap: 64px;
    }

    figure{
        /* height: 100vh; */
        width: 100%;
        margin-inline: 0 !important;
        margin-block: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; 
        padding: 24px 0;
        gap: 48px; 
    }

    .visual {
        height: 100%; 
        width: 100% !important;
        gap: 48px;
    }

    .switchable.desktop {
        max-width: min(calc(100% - 120px), 1280px);
        max-height: calc(100% - 240px) !important; 
        border-radius: 24px;
    }

    .switchable.mobile{
        width: 320px; 
        border-radius: 42px;
    }

    .project-text{
        width: 50%;
        gap: 48px;
        padding: 0 0 96px 0;
    }

    .project-text > p {
        padding-bottom: 48px;
    }

    .project-credits{
        padding-bottom: 48px;
    }

    .other-projects {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 72px 0 !important;
    }

    .other-projects > * {
        align-self: center;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 25%;
    }

    /* Lightbox */

    .lightbox {
        gap: 48px;
        padding: 24px;
    }

    .lightbox .lb-close {
        top: 24px; 
        right: 24px;
    }

}