* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  background-color: black;
}

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 2vw, 2rem);
}
.container .gallery-grid {
  display: grid;
  grid-template-columns: 1fr repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: clamp(0.5rem, 1vw, 1rem);
  width: 100%;
  height: 100%;
  margin: 0;
}
.container .gallery-grid .grid-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 3px solid white;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
  cursor: pointer;
}
.container .gallery-grid .grid-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.grid-item:hover {
  transform: scale(1.03);
  z-index: 10;
}

.grid-item.grid-tall {
  grid-column: 1/2;
  grid-row: 1/span 2;
}

.grid-item.grid-landscape {
  grid-column: 2/span 3;
  grid-row: 1/2;
}

@media (max-width: 768px) {
  .container {
    height: auto;
  }
  .container .gallery-grid {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .grid-item.grid-tall {
    grid-row: auto;
    grid-column: auto;
  }
  .grid-item.grid-landscape {
    grid-column: auto;
  }
}/*# sourceMappingURL=styles.css.map */