.yt-video-popup-div {
    flex: 0 0 70%;
    aspect-ratio: 16 / 9;
}

.video-popup-side-div {
    flex: 1;
    overflow-y: scroll;
}
.yt-video-popup-div iframe {
    width: 100%;
    height: 100%;
}

.project-grid-item {
    grid-column: span 4;
}

.play-cont {
    position: relative;
    display: inline-block;
}

.play-icon {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill: #ffffff;
    height: 40%;
    transition: fill 0.3s ease;
}

.project-grid-item:hover svg {
    fill: #3709ff;
}

@media screen and (max-width: 1500px) {
    .yt-video-popup-div {
        flex: 0 0 70%;
    }
    .project-grid-item {
        grid-column: span 4;
    }
}
@media screen and (max-width: 1499px) {
    .yt-video-popup-div {
        flex: 0 0 50%;
    }
    .project-grid-item {
        grid-column: span 6;
    }

}
@media screen and (max-width: 1000px) {
    .yt-video-popup-div,
    .video-popup-side-div {
        flex: 1 1 100%;
    }
    .vid-con {
        flex-direction: column;
    }
    .project-grid-item {
        grid-column: span 12;
    }
}