.video-gallery {
    display: grid; 
    grid-gap: 40px; 
    grid-template-columns: repeat(2,1fr);
}
.video-gallery .video-item {
    cursor: pointer; position: relative
}
.video-gallery .video-item .video {
    height: 0; 
    padding-bottom: 56%; 
    background-color: #ebebeb; 
    background-size: cover; 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    border-radius: 3px;
    position: relative; 
    transition: 250ms;
}

.video-gallery .video-item .video.vertical {padding-bottom: 177%}
.video-gallery .video-item video {width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; object-position: 50% 50%}

.video-gallery .video-item .name {
    font-size: 14px; 
    line-height: 1.2; 
    display: block; 
    margin-top: 10px;
}
.video-item .play-button {
    position: absolute; 
    left: 0; 
    top: 0; 
    bottom: 0;
    right: 0; 
    z-index: 1;
    margin: auto; 
    width: 50px; 
    height: 50px; 
    border-radius: 50%;
}
.video-item .play-button:after {
    content: ''; 
    left: 50%; 
    margin-left: -6px; 
    top: 50%; 
    margin-top: -10px; 
    position: absolute; 
    border-left: 15px solid #fff; 
    border-bottom: 10px solid transparent; 
    border-top: 10px solid transparent;
}
.video-item .play-button:before {
    content: ''; 
    box-sizing: border-box; 
    position: absolute; 
    left: 0; 
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: 250ms;
}
.video-item:hover .play-button:before {
    transform: scale(1.2);
}
.video-item:hover .video {
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
@media screen and (max-width: 1023px) {
    .video-gallery {
        grid-template-columns: repeat(2,1fr);
    }
}
@media screen and (max-width: 767px) {
    .video-gallery {
        grid-template-columns: 100%;
    }
}