/*stylesheet for galleries of game boy camera photos used on game-boy-camera-writeup.html and game-boy-camera-gallery.html*/

/*add to <ul> with .gallery class*/
.gallery-gb {
	grid-template-columns: repeat(auto-fit, minmax(calc((384px / var(--dpr) * var(--dpr-round)) + 0.5em), 1fr));
	margin: auto 1em;
	& img {
		width: calc(384px / var(--dpr) * var(--dpr-round)); /*changes image size if non-integer dpr*/
		image-rendering: -webkit-optimize-contrast;
		image-rendering: pixelated;
		image-rendering: crisp-edges;
	}
	& figcaption {
		width: calc(384px / var(--dpr) * var(--dpr-round) - 1.5em); /*changes image size if non-integer dpr*/
	}
	& li {
		padding: 0;
		margin-bottom: 3em;
	}
}

/*for standalone images*/
.img-gb { /*add to figure*/
	& img {
		width: calc(384px / var(--dpr) * var(--dpr-round));
	}
}



/*for narrower viewports, remove side margins*/
@media only screen and (max-width: 50em) {
	.gallery-gb { /*horizontal scrollbar appears at ~450px with dpr = 1, but that seems unreasonably narrow for a desktop display? phones, tablets, etc will have dpr >= 2*/
		grid-template-columns: repeat(auto-fit, minmax(calc((384px / var(--dpr)) + 0.5em), 1fr));
		& img {
			width: calc(384px / var(--dpr));
		}
		& figcaption {
			width: calc((384px / var(--dpr)) - 1.5em);
		}
	}

	.img-gb, .img-gb:nth-child(even) {
		max-width: calc(384px / var(--dpr));
		& img {
			max-height: calc(336px / var(--dpr));
			width: calc(384px / var(--dpr));
		}
	}
}