* {
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body {
  margin: 0; 
  background-color: black; 
  color: white; 
}
.flex-container {
  display: flex; 
  flex-wrap: wrap; 
  gap: 5px; 
  margin: 10px 10px;
}

img {
  max-width: 100%;
  object-fit: contain; 
}

img:hover {
  cursor: pointer;
}

.flex-container > img {
  height: 200px;
}

.flex-container > img:hover {
  transform: scale(1.1); 
  transition: 0.5s;
}

.popup-item > img{
  position: fixed; 
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100vh;
}

.blur-me {
  filter: blur(4px); 
  opacity: .25;
  transition: .5s; 
}

@media (max-width: 400px) {
  .flex-container > img {
    height: unset; 
    max-height: 200px;
  }
}