@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,900&display=swap');

body {
  margin: 0;
  background-color: black;
  font-family: 'Montserrat', sans-serif;
  color: white;
  overflow-x: hidden;
}

/* Fullscreen landing section */
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#center-image {
  position: absolute;
  max-width: 90%;
  max-height: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 1s ease;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  font-size: 6vw;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 1s ease;
}

#center-image.fade,
.overlay-text.fade {
  opacity: 0;
  pointer-events: none;
}

/* Masonry grid */
#masonry-grid {
  column-count: 3;
  column-gap: 1em;
  padding: 1em;
  display: none;
}

#masonry-grid img {
  width: 100%;
  margin-bottom: 1em;
  opacity: 0;
  transition: opacity 0.5s ease-in;
  break-inside: avoid;
}

#masonry-grid img.loaded {
  opacity: 1;
}

/* Mobile responsiveness */
@media (max-width: 1024px) {
  .overlay-text {
    font-size: 8vw;
    left: 4%;
  }

  #masonry-grid {
    column-count: 2;
  }
}

@media (max-width: 600px) {
  .overlay-text {
    font-size: 10vw;
    left: 3%;
  }

  #masonry-grid {
    column-count: 1;
    padding: 0.5em;
  }

  #masonry-grid img {
    margin-bottom: 0.75em;
  }
}