.StoreBody {
   background-color: var(--colorLight2);
    /* height: calc(100vh - 170px);  */
    display: flex;
    /* overflow: hidden;  */
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

.clothingImg {
    width: 320px;
    height: 370px;
    background-color: rgba(0, 255, 255, 0);
    margin: 10px 0px 0px 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

#img1 {
    background-image: url("images/Anti\ bad\ vibes\ shield.png");
}
#img2 {
    background-image: url("images/rival-basketball-track-short-black-.png");
}
#img3 {
    background-image: url("images/in\ the\ lost\ sound\ shirt.png");
}
#img4 {
    background-image: url("images/adidas\ red.png");
}
#img5 {
    background-image: url("images/brand\ shirt.png");
}
#img6 {
    background-image: url("images/mazda\ strap.png");
}
#img7 {
    background-image: url("images/psyco_bunny-nbg.png");
}
#img8 {
    background-image: url("images/Tui\ somy.png");
}


/* light box */
#lightbox.hidden {
  display: none;
}

#lightbox {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.4s ease-in-out forwards;
}

.lightbox-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  transform: translateY(30px);
  opacity: 0;
  animation: slideUp 0.4s ease-in-out 0.2s forwards;
}

.lightbox-content img {
  width: 300px;
  max-width: 90vw;
  border-radius: 10px;
  animation: slideLeft 0.5s ease-out forwards;
}

.lightbox-text {
  color: white;
  max-width: 400px;
  animation: fadeInText 0.5s ease-out 0.4s forwards;
  opacity: 0;
   display: flex;
  flex-direction: column;
  gap: 1rem;
   font: var(--h1);
}

/* .lightbox-text h1 {
    line-height: 10px;
} */

@keyframes fadeIn {
  from { background-color: rgba(0,0,0,0); }
  to { background-color: rgba(0,0,0,0.8); }
}

@keyframes slideUp {
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes slideLeft {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0px); opacity: 1; }
}

@keyframes fadeInText {
  to { opacity: 1; }
}

/* Responsive layout */
@media (max-width: 600px) {
  .lightbox-content {
    flex-direction: column;
    text-align: center;
  }
}