html, body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}


.masonry {
  height: 100dvh;
  width: calc(100vw - 2rem);
  gap: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
  overflow-x: scroll;
  overflow-y: hidden;
  padding-top: 1rem;
  padding-left: 1rem;
  scroll-behavior: auto;
  align-items: stretch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-right: 2rem;
}

.masonry::-webkit-scrollbar {
  display: none;
}


.masonry img {
  width: auto;
  height: 44.4vh;
  /* height: 86.8vh; */
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
  filter: blur(0);
  cursor: pointer;
  align-self: flex-start;
}

img:hover {
  filter: blur(0.8px);
}
video:hover {
  filter: blur(0.8px);
}

.masonry img.gross,
.masonry img.quer.gross,
.video.gross:hover {
  filter: blur(0);
}

.p-row img:hover {
  filter: blur(0);
}

.masonry img.quer {
  width: auto;
  height: 34vh
    /* height:60vh; */
}

.masonry img.gross,
.masonry img.quer.gross,
.video.gross {
  width: auto;
  height: 90.2vh;
  object-fit: contain;
  display: block;
}

.video {
  width: auto;
  height: 44.4vh;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
  cursor: pointer;
  align-self: flex-start;
  filter: blur(0);
}

.blur {
  filter: blur(2px)!important;
}


.project {
  position: relative;
  z-index: 1;
  height: 44.4vh;
  transition: height 0.35s ease-in-out, opacity 0.3s ease-out, transform 0.2s ease, filter 0.2s ease-in-out;
}

.project.gross {
  height: 90.2vh;
}

.p-row {
  display: none;
  position: relative;
  height: 100%;
  flex-direction: row;
  transition: opacity 0.3s ease-out;
  gap: 1rem;
  padding-left: 0.3rem;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.p-row::-webkit-scrollbar {
  display: none;
}
.p-row.active {
  display: flex;

}

.p-row img,
.p-row video {
  height: 90.2vh;
  width: auto;
  object-fit: contain;
  transition: 0.4s ease-in-out;
  user-select: none;
  cursor: pointer;
  align-self: flex-start !important;
}

.t-column {
  position: relative;
  bottom: 0;
  left: 0;
  height: 0;
  max-width: 0;
  overflow: hidden;
  z-index: 0;
  opacity: 0 !important;
  margin: -0.35rem;
  cursor: pointer;

  transition: max-width 0.8s ease-in-out, opacity 0.6s ease-in-out;
}

.t-column.active {
  position: relative;
  height: 90vh;
  overflow: hidden;
  z-index: 0;
  opacity: 1 !important;
  padding-left: 0.4rem;
  padding-right: 2.5rem;
  padding-bottom: 10vh;
  margin: 0;
  max-width: 75ch;
}

.text {
  display: none;
}
.text.active {
  display: flex;
}

h1 {
  font-family: modus, sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  margin: 0;
  letter-spacing: -0.02em;
  margin-bottom: -0.09rem;
  text-transform: uppercase;
  padding-right: 1rem;
}

.smallhead {
  font-size: 1.2rem;
  font-family: modus;
  padding-bottom: 0.5rem;
  text-transform: uppercase;
}

p {
  font-family: satoshi;
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 600;
  max-width: 50ch;
  hyphens: none;
}

/* filter transition */
.archive.hidden, .tattoo.hidden, .projects.hidden {
  height: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  margin-bottom: -0.7rem !important;
}

.archive, .projects, .tattoo {
 transition: opacity 0.5s ease, width 0.4s ease, height 0.4s ease, filter 0.5s ease-in-out !important
}
/* iPad Hochformat */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .masonry img, .video {
    height: 46%;
  }
   .masonry img.gross,
  .video.gross {
    height: 92.9%;
  }
  .masonry img.quer {
    height: 34%;
  }
    .masonry img.quer.gross {
    height: 46%;
  }
    .p-row img {
    height: 65.7%;
  }
        .p-row img {
    height: 92.9%;
  }
  /* .t-column.active {
    width: 50vw;
  } */
  
  img:hover {
    filter: blur(0px);
  }
  video:hover {
    filter: blur(0px);
  }
  
}
/* iPad Querformat */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
  .masonry img, .video {
    height: 44.5%;
  }
     .masonry img.gross,
  .video.gross {
    height: 90.3%;
  }
  .masonry img.quer {
    height: 31%;
  }
    .masonry img.quer.gross {
    height: 90.3%;
  }
      .p-row img {
    height: 90.3%;
  }
  /* .t-column.active {
    width: 40vw;
  } */
    img:hover {
    filter: blur(0px);
  }
  video:hover {
    filter: blur(0px);
  }
}


@media (max-width: 800px) {
  .masonry {
    height: calc(100svh - 4svh);
    padding-top: 2.1vh;
  }

  .masonry img, .video {
    height: 49%;
  }
  .masonry img.quer {
    height: 30%;
  }

  .project.gross {
    height: 65.7%;
  }

  .p-row {
    height: 100svh;

  }

  .p-row img {
    height: 100%;
  }

  .masonry img.gross,
  .video.gross {
    height: 100%;
  }

  .masonry img.quer.gross {
    height: 100%;
  }

  .t-column.active {
    height: 86svh;
    width: fit-content;
    max-width: 82vw;
    overflow-y: scroll;
    padding-right: 0.5rem;
  }
  
  .t-column.active {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 1%, black 96%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 1%, black 96%, transparent 100%);
  }
  h1 {
    font-size: 1.2rem;
  }

  .smallhead {
    font-size: 1.2rem;
  }
  
  p {
    font-size: 1.1rem;
  }

  img:hover {
    filter: blur(0px);
  }
  video:hover {
    filter: blur(0px);
  }
}