/* ============================================================================
 * cards
 * ============================================================================
 * Surviving The Gap - Theme
 */

ul.cards li {
	border-radius: var(--wp--custom--border-radius-card);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	}

/* ----------------------------------------------------------------------------
 * colours
 * --------------------------------------------------------------------------*/

.card-cw-01 li {

	/* 01. White
	 * pair with: .on_light
	 */

	background-color: var(--wp--preset--color--white);
	}

.card-cw-20 li {

	/* 20: brand, orange
	 * pair with: .on_light
	 */

	background-color: var(--wp--preset--color--brand-orange);
	}

.card-cw-21 li {

	/* 21. orange, black off
	 * pair with: .on_light
	 */

	background-color: var(--wp--preset--color--orange-black-off);
	}

.card-cw-24 li {

	/* 24. orange, off white
	 * pair with: .on_light
	 */

	background-color: var(--wp--preset--color--orange-white-off);
	}

.card-cw-34 li {

	/* 34. purple, off white
	 * pair with: .on_light
	 */

	background-color: var(--wp--preset--color--purple-white-off);
	}



/* ----------------------------------------------------------------------------
 * clickable
 * --------------------------------------------------------------------------*/

 .clickable-this:hover a {
	color: var(--wp--preset--color--brand-purple);
	text-decoration: underline;
	}


/* ----------------------------------------------------------------------------
 * images
 * --------------------------------------------------------------------------*/

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

	.cards img {

		/* removes the unwanted space between bottom of image and closing of picture tag */
		display: block;

		height: auto;
		margin: 0 auto;
		width: 75%;
		}

	}

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

	.cards img {

		/* removes the unwanted space between bottom of image and closing of picture tag */
		display: block;

		height: auto;
		margin: 0 auto;
		width: 50%;
		}

	}


/* ----------------------------------------------------------------------------
 * text
 * --------------------------------------------------------------------------*/

.cards li *:last-child{ margin-bottom: 0; }

.cards .copy-wrapper { text-align: center;}

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

	.cards .copy-wrapper {
		margin: var(--wp--preset--spacing--30) auto 0 auto;
		width: 75%;
		}

	}

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

	.cards .copy-wrapper {
		margin: var(--wp--preset--spacing--30) auto 0 auto;
		width: 50%;
		}

	}