@media only screen and (min-width: 0)
{
    .projects-title
    {
        font-weight: 600;
        font-size: min(9vw,3em);
        line-height: 1.20833333;
        color: var(--bodyText);
        position: relative;
        margin-bottom: .75em;
        text-align: center;
    }
    #projects
    {
        padding-top: 3.125em;
        padding-bottom: 1.25em;
        margin: auto;
    }
    #projects .project-container
    {
        width: 96%;
        max-width: 82.5em;
        margin: auto;
    }
    #projects .project
    {
        padding: 1.875em 1.125em 1.875em 1.125em;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
        width: 100%;
        max-width: 25.625em;
        margin: auto;
        margin-bottom: 1.875em;
        border-radius: .3125em;
        position: relative;
        background: #fff;
        display: block;
        flex-direction: column;
    }
    #projects .project:hover
    {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);
    }
    #projects .project:last-of-type
    {
        margin-bottom: 0;
    }
    #projects .project .thumbnail
    {
        object-fit: cover;
        object-position: center;
        height: 300px;
        width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.875em;
        border-radius: .3125em;
    }
    #projects .project p
    {
        line-height: 1.33333333;
        margin-bottom: 1.55555556em;
        text-align: left;
    }
    #projects .project .details
    {
        border-top: 1px solid #e7e7e7;
        padding-top: 1em;
        display: block;
        align-items: center;
        margin-top: auto;
    }
    #projects .project .details .name
    {
        color: var(--bodyText);
        line-height: 1.33333333em;
        text-align: center;
        font-weight: bold;
        display: block;
        font-size: 20px;
        margin-bottom: .83333333em;
    }
    #projects .project .details .detail-button
    {
        display: block;
        text-align: center;
        margin: 0;
    }
}
@media only screen and (min-width: 48em)
{
    #projects
    {
        padding-top: 3.125em;
        padding-bottom: 3.125em;
    }
    #projects .project-container
    {
        font-size: min(1.4vw,1em);
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 0;
        column-gap: 1.875em;
    }
    #projects .project
    {
        margin: 0;
        margin-bottom: 1.875em;
    }
    #projects .project:last-of-type
    {
        margin-bottom: 1.875em;
    }
    #projects .project .thumbnail
    {
        height: 280px;
        width: 100%;
    }
}
@media only screen and (min-width: 0)
{
    body.dark-mode .projects-title
    {
        color: #fff;
    }
    body.dark-mode #projects .project
    {
        box-shadow: 0 0 10px 3px var(--primary);
        background: var(--medium);
    }
    body.dark-mode #projects .project .details .name
    {
        color: #fff;
    }
}