* {
  box-sizing: border-box;
}

iframe {
 display: flex;  
 border: none; 
 overflow-y: auto; 
 overflow-x: hidden;
    height: auto;        /* Viewport-relative units */
    width: auto;
}

.kaarten-gallerij {
  display: grid;
  grid-template-columns:repeat(5, 1fr);
  padding: 0.3em;
  grid-gap: 0.5em;
  align-items: flex-start;
}

figure {
  margin: 0;
  width: 100%;
  object-fit: cover;
  background-color: white;
  border: solid black 0.18em;
  border-radius: 0.5em;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
  padding: 0.3em;
  overflow: hidden;
  transition: all .25s ease-in-out;
 &:hover img {
        transform: scale(1.1) translate(0, -3%); transition: transform 0.4s ease;
    }
    &:hover {
      border-color: coral;
  }
}

figcaption {
  text-align: center; 
  font-style: italic; 
  margin: 0.4em;
}

img {
  width: 100%; 
  height: auto;
  transform: scale(1.0) translate(0, 0%);
  transition: transform 0.4s ease;
  border-radius: 0.3em;
}

a {
  color: black;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: brown;
}

/* [1] The container */
.img-hover-zoom {
  height: auto; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
  border-radius: 0.5em;
}

/* instellingen voor verschillende apparaten en schermen */

@media only screen and (width >= 1024px) { iframe height: 700em;
}
  
@media only screen and (768px < width < 1024px)  { iframe height: 500em;
}

@media only screen and (540px < width < 768px)  { iframe height: 300em;
}