main.projects-wrapper{
    display: grid;
    grid-column: 3 / span 6; /* position */
    grid-row: 1;
    grid-template-columns: repeat(3, 1fr); /* layout */
    gap: var(--spacer-sm);
    margin-bottom: var(--spacer-xlg); /* margin underneath the content */
}

.project-card img{
    aspect-ratio: 4/5;
}

.project-card img.placeholder{
    background-color: var(--placeholder-bg-color);
}

/* ------------------------ */
/* -------Responsive------- */
/* ------------------------ */

/*  Wide Desktop */

@media (min-width:1600px) {
    main.projects-wrapper{
        grid-template-columns: repeat(4, 1fr); 
    }
}

/* Tablet */
@media (max-width:1100px) or (max-height:400px) or  (orientation: portrait) {
    main.projects-wrapper {
        grid-row: 1;
        grid-column: 5 / span 4;
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Phone */
@media (max-width:568px) {
   main.projects-wrapper {
        grid-row: 2;
        grid-column: 1 / span 8;
        grid-template-columns: repeat(1, 1fr);
        padding: 0px var(--spacer-sm) var(--spacer-sm);
    }
}