.gallery {
  columns:3;
  gap:20px;
  margin-top:20px
}
.small .gallery, .small.gallery {
  columns:2;
  gap:15px;
  margin:20px}
.gallery.comic {
  columns:1;
  text-align:center;
}
.gallery.comic .item {
  display:inline-block;
  margin:1.5%;
  max-width:500px
}
.gallery.comic.wide .item {
  max-width:100%
}
.gallery.comic.columns .item {
  width:45%;
  min-width:250px
}
.gallery .item {
  display:block;
  break-inside:avoid;
  margin-bottom:15px;
  text-align:center;
  font-size:.85em;
  line-height:1.3em;
  color:var(--dark)
}
.gallery .item a {
  text-underline-offset:1px;
  text-decoration-skip-ink: none;
  text-decoration-color:var(--light);
}
.gallery .item img {
  width:100%;
  margin-bottom:5px
}

@media screen and (max-width:1200px) {
.gallery {
  columns:3
}
.small .gallery, .small.gallery {
  columns:2 }
}

@media screen and (max-width:1000px) {
.gallery {
  columns:2
}
}

@media screen and (max-width:860px) {
.gallery {
  columns:3
}
.small .gallery, .small.gallery {
  columns:2 }
}

@media screen and (max-width:700px) {
.gallery {
  columns:2
}
}

@media screen and (max-width:500px) {
.gallery {
  columns:1
}
}


body.no-scroll {
  overflow:hidden
}
body.no-extras .stickers, body.no-extras .blinkies, body.no-extras a {
  z-index:-1
}
    #lightbox {
			position:fixed; /* keeps the lightbox window in the current viewport */
			top:0;
			left:0;
			width:100vw;
			height:100vh;
			background:rgba(0, 0, 0, .7);
			text-align:center;
		}
		#lightbox p {
			text-align:right;
			color:#fff;
			margin-right:50px;
			font-size:30px;
		}
		#lightbox img {
			/* box-shadow:0 0 25px #111; */
			max-width:80vw;
      max-height:80vh;
      width:100%;
      height:100%;
      object-fit:contain;
		}

.gallery img:hover {
  border-radius:5px;
  outline:var(--dark) 1px;
}