: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; }
}