/*===============================================*/
/* outtakes */
/*===============================================*/

body {
    background-color: var(--black);
    background-attachment: fixed;
    background-size: cover;
    color: var(--white);
}

header {
    background: none;
    border-color: transparent;
}

h1 {
    color: var(--white);
    text-shadow: -1px 1px var(--black);
}

/* Jump Links */

aside {
    padding-left: 0;
    padding-right: 0;
    border-color: var(--primary);
}

aside a {
    text-decoration: none;
}

aside p {
    color: var(--black);
    margin-left: var(--page-margin);
    border-bottom: var(--primary) 1px solid;
}

aside button {
    display: block;
    width: 100%;
    text-align: left;
    padding-left: var(--page-margin);
    white-space: nowrap;
    margin-bottom: 1px;
    clip-path: none;
}

aside button:hover {
    padding-left: calc(var(--page-margin) * 2);
}

#work main {
    padding-top: 0;
    background: var(--black)
}

.project .grid:first-child img {
    height: 100%;
    align-self: center;
}


.grid {
    margin: var(--gutter) 0;
    align-items: stretch;
}

.grid .grid {
    margin: 0;
}

.grid4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid img {
    width: unset;
    height: unset;
    max-width: 100%;
    max-height: 100%;
}

.project {
    margin-bottom: var(--gutter);
}


h3 {
    margin-top: 0;
    border-bottom: 1px solid var(--white);
}

section:first-child h2 {
    margin-top: 0;
}

h2 {
    border-left: 1rem solid var(--primary);
    border-bottom: 1px solid var(--primary);
    margin: var(--gutter) 0 var(--gutter) -3rem;
    width: calc(100% + 4rem);
    padding: var(--gutter) var(--gutter) var(--gutter) calc( var(--gutter) * 2);
    background: var(--black);
    position: relative;
    z-index: 1;
}

/*---*/

.light {
    background: var(--white);
}

.light.padding {
    padding: 12px;
}

img.space-above {
    margin-top: var(--gutter);
}


/*===============================================*/
/* Responsive */
/*===============================================*/

@media screen and (max-width: 720px) {
    
    aside button {
        text-align: left;
        clip-path: unset;
        padding-left: var(--page-margin);
    }
    aside button:hover {
        padding-left: calc(var(--page-margin) * 2);
    }
    
    .grid3, .grid4 {
        display: grid;
    }
    
}