image gallery with flexbox - css

Question

I want to make a small flexbox gallery of images with inconsistent height.
Desired result using grid:
Current result with flexbox:
.
This content belongs to a course, but I want to do that part with flexbox, as a learning method
container {
width: 90%;
overflow: hidden;
margin: 0 auto;
max-width: 1200px;
padding: 80px 0;
}
.projects {
background-color: #f2f2f2;
overflow: hidden;
margin-bottom: 500px;
}
.projects__grid {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-between;
height: 550px;
background-color: aqua;
}
.projects__item {
width: 32.8%;
height: 270px;
}
.projects__item--first {
height: 550px;
}
.projects__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
<section class="projects">
<div class="container">
<h2 class="subtitle">mis proyectos</h2>
<div class="projects__grid">
<article class="projects__item projects__item--first">
<img src="assets/img1.jpg" alt="" class="projects__img">
</article>
<article class="projects__item">
<img src="assets/img2.jpg" alt="" class="projects__img">
</article>
<article class="projects__item">
<img src="assets/img3.jpg" alt="" class="projects__img">
</article>
<article class="projects__item">
<img src="assets/img4.jpg" alt="" class="projects__img">
</article>
<article class="projects__item">
<img src="assets/img5.jpg" alt="" class="projects__img">
</article>
</div>
</div>
</section>