yeuchaybo-v6/assets/styles/_layout.scss

/* ## Site Containers
--------------------------------------------- */

.site-container {

	.boxed-page & {
		max-width: map-get($breakpoints, lg);
		margin: 0 auto;
		background-color: $white;
		box-shadow: 0 0 0 1px $border, 0 0 10rem rgba($gray, 0.1);
	}
}

.content-sidebar-wrap,
.wrap {
	margin: 0 auto;
	padding-right: 6vw;
	padding-left: 6vw;

	@include breakpoint(sm) {
		width: 88%;
		max-width: map-get($breakpoints, lg);
		padding-right: 0;
		padding-left: 0;
	}

	.wrap {
		width: auto;
		max-width: 100%;
		padding: 0;
	}
}

.site-inner {
	clear: both;
	.home & {
		margin-top: 61px;
		@include breakpoint(md) {
			margin-top: 101px;
	}
	}

	.blog &,
	.archive &,
	.search-results & {
		background-color: $light;
	}

	.page-builder & {
		border-top: $site-border;
		border-bottom: $site-border;
	}

	.contact-page & {
		padding-top: 6rem;

		@include breakpoint(sm) {
			padding-top: 10rem;
		}
	}

	.contact-page.has-before-header & {

		@include breakpoint(sm) {
			padding-top: 14rem;
		}
	}
}

.content-sidebar-wrap {
	position: relative;
	z-index: 1;
	max-width: map-get($breakpoints, lg);

	@include breakpoint(md) {
		display: flex;
		padding: 0;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;

		@include flexfix;

		.sidebar-content & {
			flex-direction: row-reverse;
		}
	}
}

/* ## Content Widths and Positions
--------------------------------------------- */

.content {
	display: flex;
	width: 100%;
	min-height: 40rem;
	padding: 4rem 0;
	flex-wrap: wrap;

	@include breakpoint(sm) {
		padding: 6rem;
	}

	.home.page & {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;

		@include breakpoint(sm) {
			margin: 0;
		}
	}

	.blog &,
	.archive &,
	.search-results & {
		margin-top: 0;
		padding: 4rem 0;
		background-color: transparent;

		@include breakpoint(sm) {
			padding: 6rem 0;
		}

		&:before {
			display: none;
		}
	}

	.home.page & {
		background-color: transparent;
	}

	.page &,
	.single &,
	.error404 & {
		position: relative;
		border-radius: 1px;
		background-color: $white;

		@include breakpoint(sm) {
			margin: -6rem auto 0;

			&:before {
				display: block;
			}
		}

		&:before {
			display: none;
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			height: 40rem;
			box-shadow: 0 -5rem 10rem rgba(42, 49, 57, 0.05);
			content: "";
			pointer-events: none;
		}
	}

	.single &,
	.contact-page & {

		@include breakpoint(md) {
			width: map-get($breakpoints, sm);
		}
	}

	.single-product & {

		@include breakpoint(md) {
			width: map-get($breakpoints, md);
		}
	}

	.landing-page & {

		@include breakpoint(sm) {
			margin-top: 0;

			&:before {
				display: none;
			}
		}
	}
}

.sidebar-primary {
	padding-bottom: 5rem;
}

@include breakpoint(md) {

	.content {
		width: 100%;
	}

	.sidebar-primary {
		width: 25%;
		padding-top: 3rem;
	}

	.blog .sidebar-primary,
	.archive .sidebar-primary {
		padding-top: 6rem;
	}

	.sidebar-content,
	.content-sidebar {

		.content {
			width: calc(75% - 5rem);
			margin-right: 0;
			margin-left: 0;
		}
	}
}

/* ## Column Classes (including fifths)
--------------------------------------------- */

.full-width {
	display: block;
	width: 100%;

	@include clearfix;
}

@include breakpoint(sm) {

	.one-half,
	.one-third,
	.one-fourth,
	.one-fifth,
	.one-sixth,
	.two-thirds,
	.two-fourths,
	.two-fifths,
	.two-sixths,
	.three-fourths,
	.three-fifths,
	.three-sixths,
	.four-fifths,
	.four-sixths,
	.five-sixths {
		float: left;
		clear: none;
		margin-left: $margin;
	}

	.one-half,
	.three-sixths,
	.two-fourths {
		width: $one-half;
	}

	.one-third,
	.two-sixths {
		width: $one-third;
	}

	.four-sixths,
	.two-thirds {
		width: $two-thirds;
	}

	.one-fourth {
		width: $one-fourth;
	}

	.three-fourths {
		width: $three-fourths;
	}

	.one-fifth {
		width: $one-fifth;
	}

	.two-fifths {
		width: $two-fifths;
	}

	.three-fifths {
		width: $three-fifths;
	}

	.four-fifths {
		width: $four-fifths;
	}

	.one-sixth {
		width: $one-sixth;
	}

	.five-sixths {
		width: $five-sixths;
	}

	.first {
		clear: both;
		margin-left: 0;
	}
}

/* ## Gallery
--------------------------------------------- */

.gallery,
.gallery-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.gallery {

	a,
	img {
		display: block;
	}

	.single & {
		display: inline-flex;
		position: relative;
		left: 50%;
		width: 100vw;
		max-width: map_get($breakpoints, sm);
		margin: 1.618em auto;
		transform: translate(-50%);

		@include breakpoint(md) {
			max-width: map-get($breakpoints, md);
		}
	}
}

.gallery-caption {
	display: block;
}

.gallery-item {
	display: block;
	width: 100%;
	margin: 0 0 6vw;
	text-align: center;

	@include breakpoint(xs) {
		width: $one-half;
		margin-bottom: 2.5rem;

		&:nth-of-type(odd) {
			clear: both;
			margin-left: 0;
		}
	}

	@include breakpoint(sm) {
		margin-bottom: 2.5rem;
		margin-left: $margin;

		&:nth-of-type(odd) {
			margin-left: $margin;
		}

		.gallery-columns-2 & {
			width: $one-half;

			&:nth-of-type(odd) {
				margin-left: 0;
			}
		}

		.gallery-columns-3 & {
			width: $one-third;

			&:nth-of-type(odd) {
				margin-left: $margin;
			}

			&:nth-of-type(3n + 1) {
				margin-left: 0;
			}
		}

		.gallery-columns-4 & {
			width: $one-fourth;

			&:nth-of-type(3n + 1) {
				margin-left: $margin;
			}

			&:nth-of-type(4n + 1) {
				margin-left: 0;
			}
		}

		.gallery-columns-5 & {
			width: $one-fifth;

			&:nth-of-type(4n + 1) {
				margin-left: $margin;
			}

			&:nth-of-type(5n + 1) {
				margin-left: 0;
			}
		}

		.gallery-columns-6 & {
			width: $one-sixth;

			&:nth-of-type(5n + 1) {
				margin-left: $margin;
			}

			&:nth-of-type(6n + 1) {
				margin-left: 0;
			}
		}

		.gallery-columns-7 & {
			width: $one-seventh;

			&:nth-of-type(6n + 1) {
				margin-left: $margin;
			}

			&:nth-of-type(7n + 1) {
				margin-left: 0;
			}
		}

		.gallery-columns-8 & {
			width: $one-eighth;

			&:nth-of-type(7n + 1) {
				margin-left: $margin;
			}

			&:nth-of-type(8n + 1) {
				margin-left: 0;
			}
		}

		.gallery-columns-9 & {
			width: $one-ninth;

			&:nth-of-type(8n + 1) {
				margin-left: $margin;
			}

			&:nth-of-type(9n + 1) {
				margin-left: 0;
			}
		}
	}
}

/* ## Pricing Tables
--------------------------------------------- */

.pricing-table {
	display: flex;
	margin: 0 auto;
	border: $site-border;
	border-radius: $site-radius;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	@include clearfix;

	+ .pricing-table {
		margin: 5rem auto;

		@include breakpoint(sm) {
			margin: 10rem 0;
		}
	}

	+ hr {
		margin: 5rem 0;
		padding: 0;

		@include breakpoint(sm) {
			margin: 10rem 0;
		}
	}

	div {
		padding: 3rem;
		border-radius: $site-radius;
		text-align: center;

		@media (max-width: map-get($breakpoints, sm)) {
			width: 100%;
		}

		ul {
			margin: 1em 0;

			li {
				margin: 0;
				list-style-type: none;
			}
		}
	}

	.featured {
		border: $site-border;
		background-color: $white;
		box-shadow: 0 2rem 5rem -1rem rgba($dark, 0.0618);
		transform: scale(1.05);
	}

	h4 {
		font-size: 2rem;
	}

	p {
		position: relative;
		max-width: map-get($breakpoints, sm);
		margin: 0 auto;
		padding: 0 5%;
	}

	strong {
		display: block;
		color: $accent;
		font-size: 2.8em;
		font-weight: $bold;
	}

	em {
		display: block;
		color: $body;
		font-size: small;
	}

	button,
	.button {
		margin-bottom: 0.5em;
	}

	.one-fourth {

		strong {
			font-size: 2.4em;
		}

		button,
		.button {
			padding-right: 2em;
			padding-left: 2em;
		}
	}
}