/* LAYOUTS */

/* HERO */

[]{}

	/* 1 */

	[]{}

		.hero {
			background-size: cover;
			background-color: var(--color_main);
			background-image: linear-gradient(90deg, var(--color_main_brighter_1), var(--color_main_brighter_2));
		}

		.row.hero *{
			color: var(--color_white);
		}

		.hero div.button a {
			background-color: var(--color_main_brighter_1);
		}

		.hero div.button a:hover {
			background-color: var(--color_main_brighter_2);
		}

		.row.hero:before {
		  content: "";
		  position: absolute;
		  left: 0;
		  top: 0;
		  width: 100%;
		  height: 100%;
		  background: linear-gradient(90deg, var(--color_main), transparent);
		  mix-blend-mode: multiply;
		}




	/* 2 */

	[]{}

		.hero_2 {
			background-size: cover;
			background-color: var(--color_main);
			background-image: linear-gradient(90deg, var(--color_main), var(--color_main_brighter_2));
		}

		.row.hero_2 *{
			color: var(--color_white);
		}

		.hero_2 div.button a {
			background-color: var(--color_main_brighter_1);
		}

		.hero_2 div.button a:hover {
			background-color: var(--color_main_brighter_2);
		}

		.hero_2 .column:first-child > * {
			margin: 0 calc(-1 * var(--padding)) calc(-.5 * var(--padding));
		  position: relative;
		  top: calc(-1 * var(--padding));
		}

		.hero_2 .column:first-child  img {
			width: calc(100% + calc(2 * var(--padding)));
			object-fit: cover;
			/* max-height: 100vh; */
		}

		@media (orientation: portrait) and (max-width:60rem) {

			.hero_2 .column:first-child  .map {
				min-height: 50vh;
			}

		}

		@media all and (min-width:60rem) {

			.hero_2 .column:first-child {
				position: static;
			}

			.hero_2 .column:first-child > * {
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				width: 50%;
				margin: inherit;
			}

			.hero_2 .column:first-child > img {
				width: 50%;
			}

		}

	/* Background Slider */

	[]{}

		.hero_with_slider {
			grid-row-gap: 0;
		}

		.hero_with_slider .column.span-24 {
			position: static;
			padding: 0;
		}

		.hero_with_slider div.gallery {
			position: static;
		}

		.hero_with_slider .column.span-24 img {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
		  width: 100%;
			object-fit: cover;
			filter: grayscale(1);
			mix-blend-mode: overlay;
			opacity: 0;
			display: block;
			transition: opacity 1s ease;
		}

		.hero_with_slider .column.span-24 .active img {
			opacity: var(--hero_opacity);
		}

/* FEATURED */

[]{}

	/* 1 */

	[]{}

		.featured_1 img {
			width: 8rem;
		  height: 8rem;
		  object-fit: cover;
		  display: block;
			transition: transform .25s ease-in;
		}

		.featured_1 a:hover img {
			transform: scale(1.1);
		}

		.row.featured_1 img.icon {
		  object-fit: contain;
		}

		.featured_1 > .column.span-6 p{
			/* font-size: .85em; */
		}

		@media all and (min-width:60rem) {
			.featured_1 > .column.span-12 {
				padding-bottom: var(--gap);
			}

			.featured_1 img {
			  margin: auto;
			}

			.featured_1.balance {
				grid-template-columns: repeat(24, auto);
			}

			.featured_1.balance .empty{
				display: none;
			}

			.featured_1.balance .span-12{
				grid-column: span 24;
			}
		}

	/* 2 */

	[]{}

		.row.featured_2 img.icon {
		  object-fit: contain;
		}

		.row.featured_2 {
			background-color: var(--color_main_creamy_1);
		}

		.row.featured_2 img {
		    height: 40vw;
		    object-fit: cover;
		}

		@media all and (min-width:30rem) {
			.row.featured_2 .span-12.center {
				grid-column: span 12 / auto;
			}
		}

		@media all and (min-width:40rem) {

			.row.featured_2 img {
			    height: 25vw;
			}
		}

		@media all and (min-width:60rem) {

			.row.featured_2 img {
			    height: 12vw;
			}

			.featured_2 .span-12 {
				padding-bottom: var(--gap);
			}


		}

	/* 3 */

	[]{}

		.row.featured_3 {
			background-color: var(--color_main_creamy_2);
		}

		@media all and (min-width:60rem) {

			.featured_3 .column > img {
				object-fit: cover;
			  height: 100%;
				max-height: 100%;
			}
		}

	/* 4 */

	[]{}

		@media all and (min-width:40rem) and (max-width:60rem) {

			.row.featured_4 .column.span-4 {
				grid-column: span 6 / auto;
			}
		}

		@media all and (min-width:60rem) {

			.featured_4 .column > img {
				object-fit: cover;
			  height: 100%;
				max-height: 100%;
			}

			.featured_4 .span-12{
				padding-bottom: var(--gap);
			}
		}

	/* 5 */

	[]{}

		@media all and (min-width:40rem) and (max-width:60rem) {

			.row.featured_5 .column.span-12 {
				grid-column: span 6 / auto;
			}
			.row.featured_5 .column.span-12.center {
				grid-column: span 12 / auto;
			}

		}


/* DIVIDER */

[]{}

	.row.divider {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
		background-color: var(--color_main_creamy_3);
	}

	.row.divider :is(h4,h5,h6) {
		color: var(--color_text);
	}

	.row.divider :is(h1,h2,h3) {
		color: var(--color_main);
	}

	@media all and (min-width: 40rem) {
		.row.divider {
			text-align: center;
		}
	}