@media(min-width: calc(960px + 300px * 2)) {

    .vertical-toc {
        display: none;
    }

    .outline {
        width: 300px;
        margin-top: 120px;
        margin-left: -300px;
        float: left;
        height: 100%;
    }

    .outline nav {
        position: sticky;
        top: 120px;
    }

    .outline nav a.active {
        transform: translateX(-1em) ;
        font-weight: 600;
    }
    
}

.mobile-only {
    display: none;
}

.container {
    width: fit-content;
    margin: auto;
    display: flex;
    gap: 1em;
    padding-left: 100px;
    padding-right: 100px;
}


.project-content {
    width: 960px;
}

@media (max-width: 960px) {
    .project-content {
        width: calc(100vw - 200px); 
    }
}

@media (max-width: 1280px) {
    .container {
        flex-direction: column;
    }
}

@media (min-width: calc(1280px + 500px)) {
    .project-content { 
        width: 1280px;
    }
}



figure {
    margin-top: 2em;
    margin-bottom: 2em;
    margin-left: auto;
    margin-right: auto;
    
    width: 50%;
}