Four card feature section

Hey, Daniel!

You could use Grid CSS to achieve this type of layout. Assign a grid-area to each one of your modals and then specify their position in a div element that wraps them all four with a grid-template-areas property. Use dots for spaces.

Like so:

.modal-wrapper {
  grid-template-areas:
  ". b ."
  "a b d"
  "a c d"
  ". c .";
}

.modal.light-blue {
  grid-area: a;
}

.modal.red {
  grid-area: b;
}

.modal.yellow {
  grid-area: c;
}

.modal.blue {
  grid-area: d;
}

You can also check my solution's code for reference. Hope it helps.

You could use the grid-row and grid-columns properties for child elements also to specify their position in parent grid element.

Like so:

    .card_wrapper {
        display: grid;
        grid-template-columns: 1fr 300px 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: 2rem;
     }
    .card:first-child, .card:last-child {
        grid-row: 1/3;
    }
    .card:last-child {
        grid-column: 3/4;
    }
    .card:first-child {
        justify-self: flex-end;
    }

Hope it was helpful.