<h1>Gallery Example</h1>
<div class="image-container">
  <figure class="image-collections">
    <img src="http://www.pmob.co.uk/mobile/images/a1.jpg" alt="A Beautiful Car">
    <figcaption>A beautiful model</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="http://www.pmob.co.uk/temp2/images/gallery3.jpg" alt="Beautiful Faces">
    <figcaption>Beautiful Faces</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="http://www.pmob.co.uk/mobile/images/a1.jpg" alt="A Beautiful Car">
    <figcaption>A beautiful model</figcaption>
  </figure>

  <figure class="image-collections">
    <img src="http://www.pmob.co.uk/temp/images/zimg1.jpg" alt="a beautiful view">
    <figcaption>A beautiful View</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: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
  text-align: center;
}
.image-collections {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1rem;
  max-width: 33%;
  min-width: 220px;
}
.image-collections img {
  flex: 1 0 0%;
  width: 100%;
  margin: 1rem 0;
  height: auto;
  object-fit: contain;
  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);
}