html {
  scroll-behavior: smooth;
}

body {
background-color: black;
overflow-x: hidden;
}

*{
padding: 0;
margin: 0;
}

.img-cover {
width: 100%;
height: 100%;
object-fit: cover;
}

.elem,

.hero {
background-color: black;
padding-block: 100px;
min-height: 100vh;
place-items: center;
}

.gallery{
  margin-top: 10%;
  background-color: black;
  padding: 10px;
  max-width: 1800px;
  margin: 0 auto;
  display: grid;
  height: 400px;
  color: white;
  position: relative;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
}

/*vertikal stretchen*/
.v-stretch{
  grid-row: span 2;
}

/*horizontal stretchen*/
.h-stretch{
  grid-column: span 2;
}

/*beides stretchen*/
.big-stretch{
  grid-row: span 2;
  grid-column: span 2;
}

.gallery div img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*responsive layout*/
@media(max-width: 560px)
{
  .v-stretch{
      grid-row: span 1;

  }
  .h-stretch{
      grid-column: span 1;
     
  }
  .big-stretch{
      grid-column: span 1;
      grid-row: span 1;
    
  }
}