.gallery {
  display:block;
  text-align:center;
  padding:15px 0 0 0;
}

.gallery.columns {
  gap:1.5vh;
  columns:5;
}

.gallery .imgDiv {
  display:block;
  border-radius:1vh;
  margin:0 auto .8vh auto;
  max-width:min(40vh, 100%);
}

.gallery img {
  display:block;
  max-width:100%;
  border-radius:.6vh;
}

figure {
  margin:0;
  padding-bottom:1vh;
  break-inside:avoid;
}

figcaption {
  padding:5px 0;
}

.cyberpunk {
  border:3px solid #bf54e2;
  background-color:#bf54e2;
}

#cyberpunk {
  color:#bf54e2;
}

.steampunk {
  border:3px solid #bb6726;
  background-color:#bb6726;
}

#steampunk {
  color:#bb6726;
}

.wither {
  border:3px solid #a86b8b;
  background-color:#a86b8b;
}

#wither {
  color:#a86b8b;
}

.bloom {
  border:3px solid #98a54e;
  background-color:#98a54e;
}

#bloom {
  color:#98a54e;
}

.vampire {
  border:3px solid #e6466c;
  background-color:#e6466c;
}

#vampire {
  color:#e6466c;
}

.werewolves {
  border:3px solid #6291ad;
  background-color:#6291ad;
}

#werewolves {
  color:#6291ad;
}

#stardust {
  color:#877feb;
}

.seafoam {
  border:3px solid #51b083;
  background-color:#51b083;
}

#seafoam {
  color:#51b083;
}

.fossils {
  border:3px solid #ba8c25;
  background-color:#ba8c25;
}

#fossils {
  color:#ba8c25;
}

.crystals {
  border:3px solid #d35e88;
  background-color:#d35e88;
}

#crystals {
  color:#d35e88;
}

.tragedy {
  border:3px solid #3e8e8b;
  background-color:#3e8e8b;
}

#tragedy {
  color:#3e8e8b;
}

.comedy {
  border:3px solid #ff8040;
  background-color:#ff8040;
}

#comedy {
  color:#ff8040;
}

.mystery {
  border:3px solid #e0434a;
  background-color:#e0434a;
}

#mystery {
  color:#e0434a;
}

@media only screen and (max-width:1400px) {
  .gallery.columns {
    columns:4;
  }
  
  .gallery .imgDiv {
    max-width:min(50vh, 100%);
  }
}

@media only screen and (max-width:1000px) {
  .gallery.columns {
    columns:3;
  }
  
  .gallery .imgDiv {
    max-width:min(60vh, 100%);
  }
}

@media only screen and (max-width:600px) {
  .gallery.columns {
    columns:2;
  }
  
  .gallery .imgDiv {
    max-width:min(70vh, 100%);
  }
}

@media only screen and (max-width:400px) {
  .gallery.columns {
    gap:0vh;
    columns:1;
  }
  
  .gallery .imgDiv {
    max-width:min(80vh, 100%);
  }
}