:root
{
    --grid-item-aspect-ratio: 5 / 4;
    --grid-gap: 5px;
}
.projects-grid {
	display: grid;
    grid-template-columns: 1fr;
	gap: var(--grid-gap);
	width: 100%;
	height: 100%;
    margin-bottom: var(--grid-gap);
}
    .projects-grid > a
    {
        position: relative;
        grid-area: auto;
        aspect-ratio: var(--grid-item-aspect-ratio);
        color: #fff;
        display: flex;
        justify-content: start;
        align-items: end;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        text-decoration: none;
        overflow: hidden;  
    }
        .projects-grid > a p
        {
            width: 100%;
            padding: 10px 20px;
            background-color: rgba(0, 95, 97, 0.5);
            line-height: 1.3;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.03rem;
        }
        .projects-grid > a p span { text-transform: uppercase; }
        .projects-grid > a img
        {
            position: absolute;
            top: 10px;
            right: 0;
            filter: drop-shadow(-1px 1px 5px rgba(0,0,0,0.25));
        }
	@media (min-width: 768px)
    {
        .projects-grid { grid-template-columns: repeat(2, 1fr); }
            .projects-grid > a:nth-child(1)
            {
                grid-row: span 2 !important;
                grid-column: span 2 !important;
                aspect-ratio: var(--grid-item-aspect-ratio);
            }
            .grid-center > a:nth-child(2) { order: -2; }
            .grid-center > a:nth-child(3) { order: -1; }
    }
    @media (min-width: 981px)
    {
        .projects-grid { grid-template-columns: repeat(4, 1fr); }
            .projects-grid > a:not(:nth-child(1)) { aspect-ratio: unset; }
            .grid-center > a:nth-child(1) { order: -1; }
            .grid-center > a:nth-child(2) { order: -2; }
            .grid-right > a:nth-child(2) { order: -2; }
            .grid-right > a:nth-child(3) { order: -1; }
    }