.grid {
    padding-top: var(--padding);
    width: 100%;
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(150px, 1fr); 
    grid-row-gap: 24px;
    grid-column-gap: var(--padding);
    margin-bottom: 24px;
}

.grid__item {
    grid-column-end: span 2;
}

.grid__item_image {
    height: 90%;
    width: 100%;
    background-size: cover;

}

.grid__item_image:hover {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}

@media screen and (min-width: 60rem) {
    .grid{
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: minmax(350px, 1fr); 
        grid-row-gap: 96px;
    }
}