<h1>Gallery Example</h1>
<div class="image-container">
  <figure class="image-collections">
    <img src="https://picsum.photos/200/300" alt="An Image Caption">
    <figcaption>An image Caption</figcaption>
  </figure>

  <figure class="image-collections">
    <img src="https://us.123rf.com/450wm/subbotina/subbotina1510/subbotina151000001/46048732-beautiful-spa-model-girl-with-perfect-fresh-clean-skin.jpg?ver=6" alt="a beautiful model">
    <figcaption>A beautiful face model</figcaption>
  </figure>

  <figure class="image-collections">
    <img src="https://picsum.photos/300/500" alt="Image caption">
    <figcaption>Image Caption<br>... and more text</figcaption>
  </figure>

  <figure class="image-collections">
    <img src="https://us.123rf.com/450wm/subbotina/subbotina1510/subbotina151000001/46048732-beautiful-spa-model-girl-with-perfect-fresh-clean-skin.jpg?ver=6" alt="a beautiful model">
    <figcaption>A beautiful face model</figcaption>
  </figure>

  <figure class="image-collections">
    <img src="https://picsum.photos/600/300" alt="A random image">
    <figcaption>Another Random image</figcaption>
  </figure>

  <figure class="image-collections">
    <img src="https://picsum.photos/400/400" alt="a random image">
    <figcaption>A Random Image</figcaption>
  </figure>
</div>

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
h1 {
  text-align: center;
  color: #fff;
  margin: 1rem 0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  -webkit-text-size-adjust: 100%; /* stop ios zooming text  on orientation change */
  text-size-adjust: 100%;
  line-height: 1.5;
}
body {
  margin: 0;
  background: #23424a;
}
.image-container {
  width: 80%;
  background: aquamarine;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(220px, 450px) );
  justify-content:space-around;
  grid-gap:1rem;
  text-align: center;
}
.image-collections {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding:1rem;
}
.image-collections img {
  flex: 1 0 0%;
  width: 100%;
  margin: 1rem 0;
  height: auto;
  object-fit: contain;/* change to value 'cover' if you want image all the same size but note they will be cropped in some way. */
  margin:auto;
}
.image-collections figcaption {
  font-size: 1.5rem;
  margin:1rem 0 2rem;
  background: rgba(0, 128, 128, 0.5);
  padding: 0.5rem;
  color: #fff;
  text-transform: capitalize;
  box-shadow:20px 20px 20px rgba(0,0,0,0.3);
}