/*
.image-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 1.4rem;
  grid-template-areas; ;
}

.image-gallery a {
  width: 100%;
  height: 24rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
*/


.gallery-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 200px;
  /* grid-template-rows: auto; */
  grid-gap: 1rem;
  /* grid-auto-flow: dense; */
}

.gallery-item {
  width: 100%;
  height: 100%;
  position: relative;
}

.gallery-item .gallery-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gallery-item .gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  cursor: pointer;
  transition: 1.2s ease-in-out;
}

.gallery-item:hover .gallery-image img{
  transform: scale(1.3);
}

.gallery-item .theme{
  font-family: 'Catamaran-Thin', sans-serif;
  font-size: 1.2rem;
  opacity: 0;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%,-50%);
  color:#fff;
  pointer-events: none;
  z-index: 4;
  transition: .3s ease-in-out;
  -webkit-backdrop-filter: blur(5px) saturate(1.8);
  backdrop-filter: blur(5px) saturate(1.8);
}

.gallery-item:hover .theme{
  opacity: 1;
  animation: move-down 0.4s linear;
  padding: 1em;
  width: 100%;
}

@keyframes move-down{
  0% {top: 10%;}
  50% {top: 35%;}
  100% {top: 60%;}
}

.w-1 {grid-column: span 1;}
.w-2 {grid-column: span 2;}
.w-3 {grid-column: span 3;}
.w-4 {grid-column: span 4;}

.h-1 {grid-row: span 1;}
.h-2 {grid-row: span 2;}
.h-3 {grid-row: span 3;}
.h-4 {grid-row: span 4;}

/* ================================================== */

@media screen and (max-width:900px){
  .gallery-box{
      grid-template-columns: repeat(2,1fr);
  }
  .w-1,.w-2,.w-3,.w-4{
      grid-column: span 1;
  }
}
@media screen and (max-width:700px){
  .gallery-box{
      grid-template-columns: repeat(1,1fr);
  }
  .w-1,.w-2,.w-3,.w-4{
      grid-column: span 1;
  }
}

.gallery-landschaft {
  display: none;
}