main{
    width: 90vw;
    margin: 0 auto;
    
}

.projectsplitter{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: min-content auto auto min-content;
    
    p{
        margin-top: 0px;
    }
    
}

.imagescroll{
    display: grid;
    height: 200px;
    overflow-x: auto;
    overflow-y: clip;
    
    grid-template-columns: auto auto auto auto auto auto auto auto;
    margin-bottom: 10px;
    
    border: 2px solid var(--border-color);
    border-radius: 4px;
    padding: 5px;
    grid-gap: 10px;
    
    a{
        height: inherit;
        width: fit-content;
        
        img{
            image-rendering: auto;
            height: inherit;
        }
    }
}

.projectrows{
    display: grid;
    grid-template-columns: auto auto;
    grid-auto-rows: min-content;
    row-gap: 10px;
    grid-column-gap: 10px;
}

.projectimages{
    display: grid;
    grid-template-columns: auto;
    column-gap: 10px;
    row-gap: 10px;
    padding: 5px;
    margin-left: 10px;
    
    border: 2px solid var(--border-color);
    border-radius: 4px;
    
    height: max-content;
}

.projectcontent{
    display: grid;
    grid-template-columns: auto auto;
    
    a{
        margin-left: auto;
        margin-right: auto;
    }
}

.projectfooter{
    display: grid;
    grid-template-columns: auto;
}


.inline-buttons{
    display: grid;
    grid-template-columns: 48% auto;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
}

.twocol-image{
    display: grid;
    grid-template-columns: 48% auto;
    column-gap: 10px;
    row-gap: 10px;
    
    img{
        width: 100%;
    }
    
    video{
        width: 100%;
    }
}

.fill-img{
    width: 100%;
    image-rendering: auto;
}