@charset "UTF-8";

.image-grid
	{
		--gap: 8px;
		--num-cols: 3;
		--row-height: 275;
		
		box-sizing: border-box;
		padding: var(--gap);
		
		display: grid;
		grid-template-columns: repeat(var(--num-cols), 1fr);
		grid-auto-rows: var(--row-height);
		gap: var(--gap);
	}

.image-grid > img
	{
		width: 100%;
		height: 100%;
		object-fit: cover;	
	}

@media screen and (max-width: 1024px)
	{
		.image-grid
			{
				--num-cols: 2;
			}
	}

@media screen and (max-width: 800px)
	{
		.image-grid
			{
				--num-cols: 1;
			}
	}