/* ============================================================================
 * columns
 * ============================================================================
 * Sketch Club Theme
 *
 *
 * - columns-1-2-3						<-- child pages:					Sketch Assistant > includes-site-public/sap_list_child_pages.php
 * - columns-1-3-3						<-- membership types
 * - columns_sm	/ columns-1-2-4-4		<-- sketch pad article listing:		patterns/page-member-landing-content.php
 * - columns_sp							<-- sketch pad article listing:		templates/page-news-landing.html
 * - columns-1-2-3-4					<-- sketching sessions:				Sketch Assistant > includes-post-types/sag_list_sketches.php
 *
 * pending deletion:
 *
 * columns-1-2-2
 * columns-1-2-2-4				<-- formerly sketch pad article listing
 */

@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%);
		}

	.columns_sp {

		/* sketch pad landing page */
		columns: 2;
		column-gap: 5.25%;
		}
	
		.columns_sp li  {
	
			/* where the minus is 2x column-gap divided by 2 columns ( (5.25/2) = 2.625 ) */
			width: calc(100% * (1/2) - 2.625%);
			}

	}


@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 */
		column-gap: 3%;
		}

	.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%);
		}		
	
	.columns_sp {

		/* sketch pad landing page */
		columns: 3;
		column-gap: 5.25%;
		}
	
		.columns_sp li  {
	
			/* where the minus is 2x column-gap divided by 3 columns ( (2x6)/3 = 6 ) */
			width: calc(100% * (1/3) - 3.5%);
			}

	}


@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%);
		}
	
	}