<section class="banner">
    <a href="#" class="promo">This is a headline for a promo space</a>
    <a href="#" class="promo">This is a headline for a promo space</a>
    <a href="#" class="promo">This is a headline for a promo space </a>
    <a href="#" class="promo">This is a headline for a promo space</a>
</section>
    
.banner {
    display: grid;
    grid-template: "main second second" minmax(30vh, 1fr)
                   "main third  fourth" minmax(30vh, 1fr) / 
                    2fr  1fr    1fr;
    grid-gap: 1rem;
}

.promo:first-child {
    grid-area: main;
}

.promo:nth-child(2) {
    grid-area: second;
}









// Non-grid Styles
.promo {
    background-image: url(https://images.unsplash.com/photo-1587892873372-07cbf8ec46f3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
    background-size: cover;
    background-color: lightgreen;
    background-blend-mode: overlay;

    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    font-size: 2rem;
    padding: 1rem;

}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.