/******************************************************************************
* Objects 
*
* This ITCSS layer focuses on structure and layout (i.e. the grid system)
*
* ITCSS layers from most generic to most specific:
*  normalize -> base -> objects -> components -> utilities
******************************************************************************/

/* =========================================================================
   Mobile (default): 20px baseline, 16px base font
   ========================================================================= */
main:not(.main--full-width),
.one-column,
.center-color-row {
	padding: 0 5% 2.5rem 5%;
}

.one-column {
	padding-bottom: 0;
}

.colored-row {
	background: var(--sky-100);
	display: flex;
	justify-content: center;
	padding: 2.5rem 5% 1.25rem 5%;
}

.colored-row--short {
	padding: 1.25rem 5% 0 5%;
}

.colored-row--bright {
	background: var(--cheese-300);
	color: var(--cheese-700);
}

.colored-row__content {
	width: 100%;
}

.h4-center {
	margin: 2.5rem 0;
	text-align: center;
}

.img__wrapper {
	display: block;
	margin: 0 auto;
	max-width: 90%;
}

.img__wrapper img,
.img__wrapper small {
	margin-bottom: 0.25rem; 
	width: 100%;
}

.img__wrapper small {
	margin-bottom: 1.25rem;
}

.list-spaced-out li {
	margin-bottom: 0.625rem;
}

.video__wrapper {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%; /* magic ratio of YouTube video */
    padding-top: 30px;
	position: relative;
}

/* YouTube embed */
.video__wrapper iframe {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}


/* =========================================================================
   Tablet: 25px baseline, 20px font
   ========================================================================= */
@media only screen and (min-width: 885px) {

	main:not(.main--full-width),
	.one-column {
		margin: 0 auto;
		padding: 0 0 3.125rem 0;
		width: 43.75rem;
	}

	.one-column {
		padding-bottom: 0;
	}

	.colored-row {
		padding-top: 3.125rem;
		padding-bottom: 1.5625rem;
	}

	.colored-row--short {
		padding-top: 1.5625rem;
		padding-bottom: 0;
	}

	.colored-row__content {
		width: 43.75rem;
	}

	.h4-center {
		margin: 3.125rem 0;
	}

	.img__wrapper small {
		margin-bottom: 1.5625rem;
	}

	.list-spaced-out li {
		margin-bottom: 0.78125rem;
	}

	.img-left {
		float: left;
		margin: 0 1.25rem 1.5625rem 0;
	}

	.img-right {
		float: right;
		margin: 0 0 1.5625rem 1.25rem;
	}

	.img-40perc {
		width: 40%;
	}

	.img-50perc {
		width: 50%;
	}

}


/* =========================================================================
   Desktop: 30px baseline, 23px font
   ========================================================================= */
@media only screen and (min-width: 1060px) {

	main:not(.main--full-width),
	.one-column {
		margin: 0 auto;
		padding: 0 0 3.75rem 0;
		width: 46.875rem;
	}

	.one-column {
		padding-bottom: 0;
	}

	.colored-row {
		padding-top: 3.75rem;
		padding-bottom: 1.875rem;
	}

	.colored-row--short {
		padding-top: 1.875rem;
		padding-bottom: 0;
	}

	.colored-row__content {
		width: 46.875rem;
	}

	.h4-center {
		margin: 3.75rem 0;
	}

	.img__wrapper small {
		margin-bottom: 1.875rem;
	}

	.list-spaced-out li {
		margin-bottom: 0.9375rem;
	}

	.img-left,
	.img-right {
		margin-bottom: 1.875rem;
	}

}