/* Global variables - a visible grid of 6x5 or 7x5 or 6x6 works well (8 columns will crop the thumbnails at some aspect ratios)
   NB additional images (to the basic 30 or 35 or 36) can be hidden in the grid with classes .landscape-only and .portrait-only */

:root {
	--gridwidth: 100vw; /* default width of the grid */
	--cols: 7; /* default number of thumbnail columns for viewports 1536px upwards */
	--rows: 5; /* default number of thumbnail rows */
	--aspect: 1.5; /* height:width thumbnail aspect ratio */
}


/* Constrain the width of #main on larger viewports so that the thumbnails fill the viewport vertically without a scrollbar
   To prevent thumbnail cropping, manually set min-aspect-ratio ~0.9*(cols/rows)*aspect (because variables can't yet be used in @media queries) */

@media screen and (min-width: 1280px) and (min-height: 640px) and (min-aspect-ratio: 1.89) {

	#main, nav {
		--rowheight: calc( ( 100vh - 4em - 3px ) / var(--rows) ); /* 4em from header, 3px from gridlines */
		--colwidth: calc( var(--rowheight) * var(--aspect) );
		--gridwidth: calc( var(--colwidth) * var(--cols) );
	}

	#main {
		width: var(--gridwidth);
	}

	nav {
		--pad: calc( ( 100vw - var(--gridwidth) ) / 2 );
		padding: 0 var(--pad);
	}
}


/* Set the number of columns at various viewport widths */

@media screen and (max-width: 1535px) {
	#main .thumb {
		--cols: 7; /* 1280-1535px */
		}
}

@media screen and (max-width: 1279px) {
	#main .thumb {
		--cols: 5; /* 981-1279px */
	}
}

@media screen and (max-width: 980px) {
	#main .thumb {
		--cols: 5; /* 481-980px */
	}
}

@media screen and (min-width: 481px) and (max-width: 980px) and (orientation:portrait) {
	#main .thumb {
		--cols: 4; /* 481-980px portrait only */
	}
}
@media screen and (max-width: 480px) {
	#main .thumb {
		--cols: 1; /* up to 480px */
	}
}