/**
 * 
 */

:root
	{
	--img-width: 200px;
	--img-height: 200px;
	}
	
.photo_gallery
	{
	display: grid;
	grid-template-columns: repeat(auto-fill, 200px);
	gap: 1rem;
	}

img.photo_filter
	{
	width: var(--img-width, 200px);
	height: var(--img-height, 200px);
	opacity: 0.5;
	filter: blur(1px) grayscale(50%);
	transition: all ease-in-out 500ms;
	}

/* Entirely optional, for dev, not production: */
img.photo_filter:hover
	{
	transform: scale(1.1);
	opacity: 1;
	filter: grayscale(0%) blur(0);
	transition: all ease-in-out 250ms;
	}


.photo_gallery:has(img)
	{
	outline: solid red 1px;
	}