/* ============================================================================
 * columns
 * ============================================================================
 * Be More P.U.N.K. - Theme
 *
 * - columns-1-2-2
 * - columns-1-2-3
 * - columns-1-3-3
 */

.column-container div a.link-as-button { align-self: flex-start; }


ul.cards, .column-container {

	/**
	 * confers upon a container the attributes required to display a 
	 * grid of cards
	 */

	display: flex;

	/* children */
	flex-flow: row wrap;

	/* prevent column gap after right hamd most item */
	justify-content: space-between;
	padding-left: 0
	}

	.cards li, .column-container div {

		box-sizing: border-box;

		/** <ul class="cards"> --> <li> */

		display: flex;

		/* display content as rows within a column */
		flex-flow: column nowrap;
		/* stretch children to fill the whole height of card */
		align-items: stretch;
		}

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

	/**
	 * 'mobile'
	 * single column
	 * body { background-color: Yellow; }
	 */

	ul.cards, div.column-container { row-gap: var(--wp--preset--spacing--40); }

		.cards li, .column-container div {
			
			/* here the width is simply 100% */
			flex-grow: 1
			}

	}

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

	/**
	 * 'tablet'
	 * body { background-color: Red; }
	 */

	ul.cards {

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

	div.column-container {

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

	}


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

	ul.cards, .column-container  {

		/* columns between cards specified via parent container */
		column-gap: 2%;
		row-gap: var(--wp--preset--spacing--60);
		}

	}


/** ---------------------------------------------------------------------------
 * columns-1-2-2
 * --------------------------------------------------------------------------*/


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

	/**
	 * 'tablet'
	 * body { background-color: Red; }
	 */

	.columns-1-2-2 li, .column-container div {

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

	}

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

	/**
	 * 'large tablet' and 'desktop'
	 * body { background-color: Red; }
	 */

	
	ul.columns-1-2-2 {

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

	div.columns-1-2-2 {

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

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

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

	}

/** ---------------------------------------------------------------------------
 * columns-1-2-3
 * --------------------------------------------------------------------------*/

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

	/**
	 * 'tablet'
	 * body { background-color: Red; }
	 */
	
	.columns-1-2-3 li {

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

	.columns-1-2-3 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'
	 * body { background-color: Red; }
	 */

	
	.columns-1-2-3 {

		/* columns between cards specified via parent container */
		column-gap: 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) - 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-3-3
 * --------------------------------------------------------------------------*/

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

	/**
	 * 'tablet'
	 * body { background-color: Red; }
	 */

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

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

	}

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

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

	.columns-1-3-3 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		/* full width */
		width: 100%;
		}

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

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

}