<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.