:root {
  --gap: 1rem;
  --columns: 4;
}

body {
  font-family: Arial, sans-serif;
  background: #121212;
  color: #e0e0e0;
  margin: auto;
  padding: 2rem;
}

.container {
  column-count: var(--columns);
  column-gap: var(--gap);
  max-width: 90%;
  margin: auto;
  padding: 1rem;
}

.img_box {
  display: inline-block;
  /* width: 90%; */
  /* margin: auto; */
  padding: var(--gap);
  /* margin-bottom: var(--gap); */
  /* transition: transform 0.2s ease, box-shadow 0.2s ease; */
}

/* Pop-up effect */
.img_box img:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.8);
}

.img_box img {
  width: 100%;
  display: block;
  border-radius: 8px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (max-width: 768px) {
  :root {
    --columns: 2;
  }
}

@media (max-width: 480px) {
  :root {
    --columns: 1;
  }
}