@media (min-width: 1240px) {

    html {
        scroll-padding-top: 0;
    }

    body {
        grid-template-areas:
            "nav . body"
            "footer footer footer";
        grid-template-columns: 20rem 1rem 1fr;

        & > header {
            grid-area: nav;
            font-size: 1rem;
            padding-top: 0;
            top: 0;

            & figure {
                position: sticky;
                top: 2rem;
            }

            & h1 {
                position: sticky;
                top: 11rem;
            }

            & p {
                position: sticky;
                top: 13.5rem;
            }
        }
    }

    nav {
        background-color: transparent;
        top: 0;
        z-index: 1;
        font-size: 1.4rem;

        & ul {
            display: block;
            margin-top: 18rem;
            position: sticky;
            top: 18rem;

            & li {
                padding: 0;
                text-align: left;

                & a {
                    padding: 1rem 1rem;
                }
            }
        }
    }

    img {
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;

        &:hover {
            -webkit-filter: grayscale(0);
            filter: grayscale(0);
        }
    }
    
    ul.tags {
        gap: 0.5rem;

        & li {
            font-size: .9rem;
            padding: .3rem .6rem;
        }
    }

}