/**
 * Container and section rhythm.
 *
 * @package Geras_Custom
 */

.container {
	width: 100%;
	max-width: var( --container );
	margin: 0 auto;
	padding: 0 var( --container-px );
}

.section {
	padding: var( --section-y ) 0;
}

.section--tight {
	padding: var( --space-70 ) 0;
}

.section--sand {
	background: var( --surface-sand );
}

.section--paper {
	background: var( --surface-page );
}

/* Section rhythm drops one step on mobile (responsive.md derivation rule). */
@media ( max-width: 767px ) {

	.section {
		padding: var( --space-56 ) 0;
	}

	.section--tight {
		padding: var( --space-44 ) 0;
	}
}