/* Fix for layout shift on iPhone when lazy-loading images */
img[loading="lazy"] {
	aspect-ratio: auto;
	height: auto;
	max-width: 100%;
	display: block;
}

#thumbnails article .thumbnail img {
	aspect-ratio: auto;
	height: auto;
}

/* Prevent Cumulative Layout Shift (CLS) on mobile */
@supports (aspect-ratio: auto) {
	img[loading="lazy"] {
		aspect-ratio: auto;
	}
}

/* Container queries for responsive images */
#thumbnails article {
	overflow: hidden;
}

#thumbnails article .thumbnail {
	overflow: hidden;
	display: block;
}

/* Fix for iphone specifically - prevent image jank */
@media (max-width: 600px) {
	img[loading="lazy"] {
		contain: layout style paint;
	}
	
	#thumbnails article .thumbnail img {
		contain: layout style paint;
	}
}
