.grid-media-items {

    grid-column: 2 / span 12;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

}



.grid-media-items.full-width {

    grid-column: 1 / span 14;

}



.grid-media-items.cols-2 {

    grid-template-columns: repeat(2, 1fr);

}





.grid-media-items.cols-4 {

    grid-template-columns: repeat(4, 1fr);

}



.grid-media-img {

    filter: grayscale(100%);

    transition: filter 0.3s;

}



.grid-media-items-item:hover .grid-media-img {

    filter: grayscale(0);

}



.grid-media-items-item.video-wrapper {

    position: relative;

    cursor: pointer;

}



.grid-media-items-item .grid-media-video-popup {

    display: none;

}



.grid-media-items-item.video-wrapper::after {

    content: '';

    mask-image: url('../../img/play.svg');

    mask-repeat: no-repeat;

    mask-size: contain;

    background-color: var(--white);

    position: absolute;

    right: 50%;

    bottom: 50%;

    transform: translate(50%, 50%);

    aspect-ratio: 1873/2140;

    height: 4em;

    transition: transform 0.3s;

    pointer-events: none;

}



.grid-media-items-item.video-wrapper:hover::after {

    transform: translate(50%, 50%) scale(1.2);

}



@media (max-width: 991.98px) {



.grid-media-items,

.grid-media-items.cols-4 {

    grid-template-columns: repeat(2, 1fr);

}

}