* {
}
#main-container {
  background-color: #e6e0de;
  box-sizing: border-box;
}
#navigation {
  box-sizing: content-box;
}
#header
{
	background-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.575),
        rgba(0, 0, 0, 0.548)
      ),url(../images/tiles.jpg);
	background-position: center, center -270px;
  height: 45vh;
  min-height: 470px;
}
#app{
  margin: auto;
  width: 80%;
}
.gallery {
  align-content: space-between;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: minmax(400px, 450px);
  justify-content: space-between;
  margin: auto;
  margin-top: 70px;
  place-items: center;
  width: 100%;
}
.box {
  background-color: transparent;
  border-radius: 4px;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  perspective: 1400px; 
}
#icons, #icons img {
  box-sizing: content-box;
}

.gallery-image {
  height: 100%;
  margin: 0;
  width: 100%;
}

.span-h {
  grid-column: span 2;

}
.span {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery-image img {
  width: auto;
  height: 100%;
}
.span-h img {
  width: 100%;
  height: auto;
}

.box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.3s;
  transform-style: preserve-3d;
  transition-timing-function: cubic-bezier(.575, .885, .32, 1.275);
}

.image-wrapper:hover .box-inner {
  transform: rotateY(180deg);
}

.box-front, .box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  width: fit-content;
  height: fit-content;
}

.box-front {
  color: black;
}

.box-back {
  color: white;
  transform: rotateY(180deg);
}
.image-wrapper {
  width: 90%;
  height: 90%;
  margin: 35px;
}
.box img {
  display: block;
  margin: auto;
  object-fit: cover !important;
}

.gallery .gallery-image[data-flipping] {
  opacity: 1;
  z-index: 3;
}
.gallery-image {
  transition: opacity 0.3s linear;
}

.d-none{
  display: none;
}
#app:hover .gallery .gallery-image {
  opacity: 0.8;
}
#app:hover .gallery .gallery-image[data-flipping], #app:hover .gallery .gallery-image:hover {
  opacity: 1;
  transition-duration: 0.3s;
}
.gallery-image .vertical {
  height: auto;
  width: 100%;
}
.horizontal {
  height: 100%
}
@media (max-width: 1470px) {
  .gallery {
      grid-template-columns: 1fr 1fr 1fr;
      grid-auto-rows: minmax(150px, 350px);
  }
  .span {
    grid-row: span 1;
    grid-column: span 1;
  }
  .d-none {
    display: block;
  }
}

    @media screen and (max-width: 1050px)
    {
      .headline-container {
        top: 220px;
      }
    }

    @media screen and (max-width: 900px)
    {
      .headline-container {
        top: 220px;
      }
      #app {
        width: 100%;
      }
      .gallery {
          grid-template-columns: 1fr;
          grid-template-rows: repeat(21, auto);
      }
      .gallery-image {
        min-height: 300px;
        max-height: 777px;
      }
      .span-h {
        grid-column: span 1;
      }
      .image-wrapper {
        width: 80%;
        margin: auto;
      }
      .image-wrapper img {
        height: auto;
        width: 100%;
      }
      .box-front, .box-back {
        height: fit-content;
      }
      #app:hover .gallery .gallery-image {
        opacity: 1;
      }
      .image-wrapper:hover .box-inner {
        transform: none;
      }
      .box-back {
        color: white;
        transform: rotateY(180deg) ;
      }
      .turn  {
        transform: rotateY(180deg) !important;  
      }
      .turn .box-back {
        transform: rotateY(180deg) !important; 
      }
    }
    @media screen and (max-width: 459px){
      
    }