* {
   box-sizing: border-box;
}
 body {
   background: #f5f5f5;
   margin: 0;
   padding: 3em 1em;
}
 ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
 figure {
   margin: 0;
}
 figcaption {
   text-align: center;
   font-style: italic;
   font-size: 0.8em;
   color: grey;
   line-height: 1.4;
}
 .grid {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: 90%;
   grid-gap: 1em;
   overflow-x: scroll;
   -webkit-overflow-scrolling: touch;
   padding: 2em 1em;
   background: white;
}
h1 {
   width: 100%;
   text-align: center;
}
 @media all and (min-width: 600px) {
   .grid {
     grid-auto-flow: initial;
     grid-template-columns: repeat(auto-fit, minmax(auto, 20em));
     justify-content: center;
  }
}
 .grid__figure {
   display: grid;
   grid-template-rows: 15em 1fr;
   grid-gap: 1em;
}
 .grid__figure img {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   max-width: 90%;
   max-height: 100%;
   display: block;
   margin: 0 auto;
}