<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.