/* WARNING: will not work without executing the following Javascript:

document.body.style.setProperty('--device-pixel-ratio', devicePixelRatio);
document.body.style.setProperty('--device-pixel-round', Math.round(devicePixelRatio));
window.addEventListener('resize',e=>{
	document.body.style.setProperty('--device-pixel-ratio', devicePixelRatio);
	document.body.style.setProperty('--device-pixel-round', Math.round(devicePixelRatio));
});

*/


/*For photo galleries. Use with <ul>*/
.gallery-gb {
	list-style: none;
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: repeat(auto-fit, minmax(calc((384px / var(--device-pixel-ratio) * var(--device-pixel-round)) + 0.5em), 1fr));
	align-items: start;
	grid-gap: 0.5em;
	gap: 0.5em;
	margin: auto 1em;
	padding-left: 0;
}

.gallery-gb li {
	padding: 0.25em;
	text-align: left;
}

.gallery-gb figcaption, .gallery-gb img {
	margin-left: calc(50% - (192px / var(--device-pixel-ratio) * var(--device-pixel-round))); /*remember, it's 50% of the parent element, which is the <li>*/
	width: calc(384px / var(--device-pixel-ratio) * var(--device-pixel-round)); /*changes image size if non-integer dpr*/
}

.gallery-gb img {
	image-rendering: -webkit-optimize-contrast;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

.gallery-gb a:hover img {
	outline: 0.5em solid #991144;
}

/*For phone viewports and NTSC width, remove side margins*/
@media(max-width: 450px), (max-width: 39em) {
	.gallery-gb { /*There's got to be a better way to do this...*/
		grid-template-columns: repeat(auto-fit, minmax(calc((384px / var(--device-pixel-ratio)) + 0.5em), 1fr));
	}

	.gallery-gb figcaption, .gallery-gb img {
		margin-left: calc(50% - (192px / var(--device-pixel-ratio))); /*remove rounded-off scale factor*/
		width: calc(384px / var(--device-pixel-ratio));
	}
}