.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
  gap: 10px;
  grid-auto-flow: dense;
  /*background-color: #2196F3;*/
  overflow-x: auto;
}

.gallery figure {
  /*border: 1px solid #ccc;*/
  position: relative;
  margin: 0;
  grid-column-end: span 5; 
  /*background-color: rgba(255, 255, 255, 0.8);*/
  padding: 20px;
  /*overflow-x: auto;*/
}

.gallery figure.landscape {
  grid-column-end: span 8;
}

.gallery figure.wide {
  grid-column-end: span 13;
}

.gallery figure.standard {
  grid-column-end: span 7;
}

.gallery figure iframe {
  display: block;
  object-fit: cover;
  max-width: 100%;
  /*overflow-x: auto;*/
}

.gallery figure img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: auto;
  /*overflow-x: auto;*/
}









/*https://www.imarketinx.de/artikel/responsive-image-gallery-with-css-grid.html*/

/* First the Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 2.5rem;
  justify-items: center;
  width: 100%;
}

/* The Picture Frame */
.gallery-frame {
  width: 100%;
  padding: .5rem;
  text-align: left;
  /*background-color: #333;*/
}

/* The Images */
.gallery-img {
  max-width: 55%;
  height: auto;
  object-fit: cover;
  transition: opacity 0.25s ease-in-out;
}

.gallery-img:hover {
  opacity: .7;
}