/*stylesheet for lossy-loss-gallery.html*/
body {
	background-color: var(--primary-light);
}

article {
	max-width: 100%;
	min-width: 100%; /*ensure page is never narrower than max width mobile layout + subtract scrollbar width automagically*/
	margin: auto; /*either i was a huge doofus to not do this in the first place or it didn't cooperate with the three-column layout*/
}

section {
	border: none;
}

img {
	display: none;
}

canvas {
	width: calc((720px / var(--dpr)));
	position: absolute;
}

canvas:hover {
	outline: 0.5em solid var(--secondary-med);
}

/*modified photo gallery css - use with <ul>*/
.gallery {
	grid-gap: 0.25em;
	gap: 0.5em;
	grid-template-columns: repeat(auto-fit, minmax(calc((720px / var(--dpr)) + 0.5em), 1fr));
	& div {
		max-width: calc((720px / var(--dpr)));
		aspect-ratio: 3 / 2;
		margin: 0;
		padding: 0 0 0.25em 0;
		& canvas {
			max-width: calc((720px / var(--dpr)));
			position: absolute;
		}
	}
	& figcaption {
		width: calc((720px - 2em) / var(--dpr));
	}
	& li {
		padding: 0.25em;
		text-align: left;
	}
}

@media only screen and (max-width: 50em), (max-width: calc(720px + 2em)) { /*additional px trigger to ensure it'll trip before the page becomes narrower than the images - equal with 15px font*/
	.gallery {
		grid-template-columns: repeat(auto-fit,  100%);
		& div {
			width: 100%;
			& canvas {
				width: calc(100% - 2em);
			}
		}
		& li {
			padding: 0;
		}
	}

	.container-fullwidth {
		& h2 {
			text-align: left;
		}
	}
}