@media screen and (min-width: 1080px){

    /* 
    ========
    General
    ======== 
    */

    #wrapper {
        max-width: 1920px;
        grid-template-rows: 48px clamp(450px, 720px, 1440px) repeat(3, auto) minmax(150px, auto);
    }

    body.subpage #wrapper {
        max-width: 1920px;
        grid-template-rows: 48px auto minmax(150px, auto);
    }

    body.project #wrapper {
        max-width: 1920px;
        grid-template-rows: 48px repeat(2, auto) minmax(150px, auto);
    }

    /* 
    ========
    Desktop After
    ======== 
    */




    nav{
        display: none;
    }

    .nav2 {
        display: flex;
        flex-direction: row;
    }

    .menu2 {
        background-color: var(--darkgrey);
        color: var(--white);
        font-size: var(--font-24px);
        line-height: var(--font-32px);

        padding: 1vh 4vh;
    }

    .about-me {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        column-gap: 3rem;
        row-gap: 2rem;
        justify-content: flex-start;
    }

    .project-card {
        max-width: clamp(8rem, 22rem, 22rem);
    }

    h1 {
        font-size: var(--font-40px);
        line-height: var(--font-48px);
        max-width: clamp(300px, 70%, 900px);
        margin-top: clamp(4rem, 28vh, 16rem);
    }

    p {
        padding-top: 6px;
        max-width: clamp(300px, 95%, 900px); 
    }

    h3 {
        max-width: clamp(300px, 80%, 800px);
    }

    footer {
        gap: 1rem;
        padding-bottom: 2rem;
    }

    .contact,
    .legal {
        flex-direction: row;
        gap: 0.8rem;
    }

    .legal-subpages {
        gap: 0.8rem;
    }

    .thumb-back,
    .thumb-back-negative {
        width: 24px;
    }

    /* 
    ========
    Interaction
    ======== 
    */

    nav:is(:hover, :active) {
        background-color: var(--black);
    }

    .mode:is(:hover, :active),
    .back:is(:hover, :active){
        background-color: var(--black);
    }

    .menu2:is(:hover, :active) {
        text-decoration: none;
        background-color: var(--black);
    }

    .project-link:is(:hover, :active) {
        text-decoration: none;
        .meta {
            color: var(--white);
            background-color: var(--black-10);
            border: var(--white);
            border-width: 0.5px 0px 0px 0px;
            border-style: solid;
        }
        .thumb-back {
            display: none;
        }
    }

    a:is(:hover, :active) {
        text-decoration: underline;
        color: var(--white);
        text-underline-offset: 2px;
        text-decoration-thickness: 1px;
    }

}