body {
  margin: 0;
  font-family: sans-serif;
  background-color: #f0f0f0; /* Light background for contrast */
  padding: 15px; /* Overall page padding */
  box-sizing: border-box;
}

.gallery-container {
  position: relative; /* Crucial for absolute positioning of items */
  width: 100%;
  box-sizing: border-box;
  opacity: 0; /* Start hidden for fade-in */
  transition: opacity 0.5s ease-in-out;
  
}

.gallery-container.loaded {
  opacity: 1; /* Fade-in class */
}

.gallery-item {
  position: absolute; /* Positioned by JavaScript */
  box-sizing: border-box;
  margin: 5px; /* This creates 5px margin on all sides.
                   Two adjacent items will have 5px + 5px = 10px spacing. */
  border-radius: 6px;
  overflow: hidden; /* Ensures image is clipped to the border-radius */
  background-color: #e0e0e0; /* Placeholder color if image is slow/fails to load */
  opacity: 0; /* Start hidden for staggered item fade-in */
  transition: opacity 0.4s ease-in-out;
  /* Width will be set by JavaScript */
}

.gallery-item img {
  display: block; /* Removes extra space below image */
  width: 100%; /* Image fills the gallery-item */
  height: auto; /* Maintains aspect ratio */
  border-radius: 6px; /* Ensures image itself also has rounded corners if somehow visible past parent */
}