.list-item-image {
    width: 100%; 
    height: calc(100% - 42px);
    background-size: cover;
    transition: all 0.5s ease-out
}

.list-item-image:hover {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}

.project-list-row {
    display: grid;
    grid-gap:  var(--padding);
    grid-auto-flow: column;
    grid-auto-columns: minmax(calc(100vw - var(--padding)), 2fr); 
    grid-auto-rows: minmax(250px, 1fr); 
    overflow-x: auto;
    white-space: nowrap;        
    margin-bottom: calc(2*var(--padding));
    scroll-behavior: smooth;
}

.project-list-row li {
        height: 100%;
        width: 100%;
}

@media screen and (min-width: 60rem) {
    .project-list-row {
        grid-auto-columns: minmax(calc(100vw/3 - var(--padding)), 3fr); 
        grid-auto-rows: minmax(350px, 1fr); 
    }

    .list-item-image {
        height: calc(100% - 64px);
    }

}