/* ============================================================================
 * columns for Tommy Flowers Foundation - Theme
 * ============================================================================
 *
 *
 * columns-1-2-2
 *
 * pending deletion:
 *
 * - columns-1-2-3						<-- 
 * - columns-1-3-3						<-- 
 * - columns_sm	/ columns-1-2-4-4		<-- 
 * - columns-1-2-3-4					<-- 
 * columns-1-2-2-4				
 */


@media screen and (max-width: 600px) {

	/**
	 * 'mobile'
	 * single column
	 * single column layout for and 1-2-3
	 * double column layout for 2-3-3
	 * body { background-color: Yellow; }
	 */

	/* here the width is simply 100% */

		.cards li { flex-grow: 1; }

	}


@media screen and (min-width: 601px) and (max-width: 768px) {

	/**
	 * 'tablet'
	 * three columns for 2-3-3
	 * two columns for 1-2-3
	 * body { background-color: Red; }
	 */

	ul.cards {

		/* columns between cards specified via parent container */
		column-gap: 5%;
		}

	.columns-1-2-2 li {

		/* where the minus is 1/2 the column gap (1/2 of 2%) */
		width: calc(100% * (1/2) - 5%);
		}
	
	.columns-1-2-3 li {

		/* where the minus is 1x column-gap divided by 2 columns ( (2/2 = 1 ) */
		width: calc(100% * (1/2) - 5%);
		}

	.columns-1-3-3 li {

		/* where the minus is 2x column-gap divided by 3 columns ( (2x2)/3 = 1.333 ) */
		width: calc(100% * (1/3) - 3.333%);
		}

	.columns-1-2-3 li, .columns-1-2-4-4 li, .columns-1-2-3-4 li {

		/* where the minus is 1x column-gap divided by 2 columns ( (2/2 = 1 ) */
		width: calc(100% * (1/2) - 3.333%);
		}

	}


@media screen and (min-width: 769px) {

	/**
	 * 'large tablet' and 'desktop'
	 * three columns for all card types
	 * body { background-color: Red; }
	 */

	.cards {

		/* columns between cards specified via parent container */
		column-gap: 2%;
		}

	.columns-1-2-2 li {

		/* where the minus is 1/2 the column gap (1/2 of 2%) */
		width: calc(100% * (1/2) - 1%);
		}
	
	.columns-1-2-3, .columns-1-3-3 {

		/* columns between cards specified via parent container */
	
		}

	.columns-1-2-3 li, .columns-1-3-3 li {

		/* where the minus is 2x column-gap divided by 3 columns ( (2x2)/3 = 1.333 ) */
		width: calc(100% * (1/3) - 3%);
		}

	.columns-1-2-3 li {

		/* where the minus is 2x column-gap divided by 3 columns ( (2x2)/3 = 1.333 ) */
		width: calc(100% * (1/3) - 2%);
		}

	.columns-1-2-4-4 li {

		/* where the minus is 2x column-gap divided by 2 columns ( (2x2)/2 = 2 ) */
		width: calc(100% * (1/4) - 2%);
		}

	}


@media screen and (min-width: 769px) and (max-width: 1200px) {

	.columns-1-2-4-4 li  {

		/* where the minus is 2x column-gap divided by 2 columns ( (2x2)/2 = 2 ) */
		width: calc(100% * (1/4) - 2%);
		}

	.columns-1-2-3-4 li  {

		/* where the minus is 2x column-gap divided by 4 columns ( (2x3)/4 = 1 ) */
		width: calc(100% * (1/3) - 2%);
		}

	}


@media screen and (min-width: 1201px) {

	.columns-1-2-3-4 li, .columns-1-2-4-4 li {

		/* where the minus is 2x column-gap divided by 4 columns ( (3x3)/4 = 1 ) */
		width: calc(100% * (1/4) - 2%);
		}
	
	}