.masonry {
  height: 95vh;
  width: 96.7vw;
  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: 43.8vh;
  /* 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: 89.8vh;
  object-fit: contain;
  display: block;
}

.video {
  width: auto;
  height: 43.8vh;
  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(1px);
}


.project {
  position: relative;
  z-index: 1;
  height: 43.8vh;
  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: 89.8vh;
}

.p-row {
  display: none;
  position: relative;
  height: 100vh;
  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 {
  height: 89.8vh;
  width: auto;
  object-fit: contain;
  transition: 0.3s ease-in-out;
  user-select: none;
  cursor: pointer;
  align-self: flex-start !important;
}

.t-column {
  position: relative;
  bottom: 0;
  left: 0;
  height: fit-content;
  width: 45vw;
  overflow: hidden;
  z-index: 0;
  opacity: 1 !important;
  padding-right: 1rem;
}

.t-column.active {
  position: relative;
  height: fit-content;
  width: 45vw;
  overflow: hidden;
  z-index: 0;
  opacity: 1!important;
  /* padding-top: 2.5rem; */
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 10vh;
}

.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.1rem;
}

.smallhead {
  font-size: 1.1rem;
  font-family: modus;
  padding-bottom: 0.4rem;
}

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

/* 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.3s ease, width 0.3s ease, height 0.3s ease, filter 0.3s ease-in-out !important;
}


@media (max-width: 800px) {
  .masonry img, .video {
    height: 46.6vh;
  }

  .p-row img {
    height: 95vh;
  }

  .masonry img.gross,
  .masonry img.quer.gross,
  .video.gross {
    height: 95vh;
  }

  .t-column {
    width: 90vw;
  }

}