.conts .video-conts {
    display:flex;
    justify-content:center; 
    flex-wrap:wrap; 
}
.video-conts .vid {
    height: 10rem !important;
    width: 15rem !important;
    margin: 2rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.5);
    overflow:hidden;
    border-radius:.5rem;
}
    .video-conts .vid video, .video-conts .vid img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        outline: none;
        border: none;
        cursor: pointer;
    }

        .video-conts .vid video:hover, .video-conts .vid img:hover {
            transition: .2s linear;
            transform: scale(2,2);
        }

    .video-conts .vid .active {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        height:75%;
        width:75%;
        box-shadow: 0,0,0,100vh rgba(0,0,0,.7);
        z-index:100000;
    }
        .video-conts .vid .active:hover {
            transition: none;
            transform: translate(-50%,-50%)  scale(1);
        }