<div class="events">

    <div class="event main video">       
        <div class="content-wrap">
            <div class="content">
                <h1>Hello world!</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere nisi in mi condimentum, a elementum neque sagittis. Cras non convallis odio. Praesent ultricies orci ut ornare cursus. </p>
                <a href="#">Go here</a>
            </div>
        </div>
        
    </video>
    
    </div>

    <div class="event second video">
    
        <div class="content-wrap">
            <div class="content">
                <h1>Hello world!</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere nisi in mi condimentum, a elementum neque sagittis. Cras non convallis odio. Praesent ultricies orci ut ornare cursus. </p>
                <a href="#">Go here</a>
            </div>
        </div>
        
    
    </div>
    
    <div class="event third video">
    
        <div class="content-wrap">
            <div class="content">
                <h1>Hello world!</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere nisi in mi condimentum, a elementum neque sagittis. Cras non convallis odio. Praesent ultricies orci ut ornare cursus. </p>
                <a href="#">Go here</a>
            </div>
        </div>
        
    
    </div>
    
    <div class="event fourth video">
    
        <div class="content-wrap">
            <div class="content">
                <h1>Hello world!</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere nisi in mi condimentum, a elementum neque sagittis. Cras non convallis odio. Praesent ultricies orci ut ornare cursus. </p>
                <a href="#">Go here</a>
            </div>
        </div>
     
    
    </div>
</div>

.events {
    display: grid;
    height: 800px;
    grid-template-columns: 50% 25% 25%;
    grid-template-rows: 50% 50%;
    grid-row-gap: 5px;
    grid-column-gap: 5px;
    
    .event {    
        &:before {
            content: "";
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            position: absolute;
            z-index: 1;
        }
        a {
            color: white;
        }
        .content-wrap {
            color: white;
            position: absolute;
            z-index: 100;
            width: 100%;
            height: 100%;
            display: flex;
            .content {
                width: 80%;
                margin: auto;
            }
        }
        position: relative;
        height: 100%;
        width: 100%;
        background-image: url('http://placekitten.com/1000/1000');
        
        &.main {
            grid-row: 1 / span 2;
        }
        &.second {
            grid-column: 2 / span 2;
            grid-row: 2
        }
    }
    
    
}