Can anyone help me figure out how to display three photos like this? https://i.sstatic.net/wD5At.png
The photos cover the full width only if I set the css width: 100vh for all, but then the middle photo becomes disproportionate (black frames show how I would like it to look): https://i.sstatic.net/dH6J6.jpg
When I set the middle photo's width individually, everything breaks and it ends up looking like this: https://i.sstatic.net/11GKE.jpg
Here is the HTML code:
<main>
<div class="container-fluid">
<div class="row justify-content-sm-center">
<div class="col-lg-4 col-md-6 col-sm-12">
<figure class="description">
<a href="img/projects/home/1.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/test2.jpg" class="img-fluid img"></a>
</figure>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<figure class="description">
<a href="img/projects/home/2.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/test1.jpg" class="img-fluid img"></a>
</figure>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<figure class="description">
<a href="img/projects/home/3.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/test2.jpg" class="img-fluid img"></a>
</figure>
</div>
</div>
I'm struggling with achieving this layout without sacrificing responsiveness.