<div
class="card-post__gallery"
>
<div class="card-post__gallery-left">
<div class="image"></div>
<div class="image"></div>
</div>
<div
class="card-post__gallery-right"
>
<div class="image"></div>
<div class="image"></div>
</div>
</div>
.card-post__gallery {
display: flex;
gap: 12px;
height: 300px;
width: 100%;
cursor: pointer;
&-left {
display: flex;
flex-direction: row;
gap: 12px;
width: 60%;
height: 100%;
}
&-right {
display: flex;
flex-direction: column;
gap: 12px;
width: 40%;
height: 100%;
}
.image {
background-color: #0d47a1;
width: 100%;
height: 100%;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.