//----------------------------------------------------------------------------------------------------------------------
// CONTAINER
//----------------------------------------------------------------------------------------------------------------------

/// Visually groups elements by applying vertical margin.
/// @group layout
.container {
	&:not(:first-child) {
		margin-top: rhythm(3);
	}

	&:not(:last-child) {
		margin-bottom: rhythm(3);
	}

	// Medium viewport and up
	@include media(">=", $breakpoint-m) {
		&:not(:first-child) {
			margin-top: rhythm(4);
		}

		&:not(:last-child) {
			margin-bottom: rhythm(4);
		}
	}
}