/* LAYOUTS */

	/* COVER */

	.row.cover {}

		/* 1 */

		.row.cover_1 {}

			.row.cover_1 {
				background-color: var(--color_main);
				background-image: linear-gradient(90deg, var(--color_main), var(--color_main_brighter_2));
			}

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

			.row.cover_1 div.button a {
				background-color: var(--color_main);
			}

			.row.cover_1 div.button a:hover {
				background-color: var(--color_main_brighter_1);
			}

			.row.cover_1 {
				background-size: cover;
				min-height: 100vh;
				margin-bottom: 4rem;
				font-size: 1.5em;
				line-height: 2em;
			}

			.row.cover_1 h2{
				/* line-height: 6rem; */
				/* text-transform: uppercase; */
				/* font-weight: 900; */
			}

			.row.cover_1 h3{
				/* line-height: 4rem; */
				/* text-transform: uppercase; */
			}

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

			.row.cover_1 .column.span-12 {
				position: static;
			}

			.row.cover_1 .column.span-12 img ,
			.row.cover_1 .column.span-12 video {
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
			  width: 100%;
				object-fit: cover;
				mix-blend-mode: overlay;
				display: block;
			}

			.row.cover_1 .column.span-12 .gallery img ,
			.row.cover_1 .column.span-12 .gallery video {
				opacity: 0;
			}

		.row.cover_2 {}

			.row.cover_2 {
				background-color: var(--color_main);
			}

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

			.row.cover_2 div.button a {
				background-color: var(--color_main);
			}

			.row.cover_2 div.button a:hover {
				background-color: var(--color_main_brighter_1);
			}

			.row.cover_2 {
				background-size: cover;
				min-height: 100vh;
				margin-bottom: 4rem;
				/* font-size: 2em; */
				/* line-height: 2em; */
			}

			.row.cover_2 h2{
				/* line-height: 6rem; */
				/* text-transform: uppercase; */
				/* font-weight: 900; */
			}

			.row.cover_2 h3{
				/* line-height: 4rem; */
				/* text-transform: uppercase; */
			}

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

			.row.cover_2 .column.span-12 {
				position: static;
			}

			.row.cover_2 .column.span-12 img ,
			.row.cover_2 .column.span-12 video {
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
			  width: 100%;
				object-fit: cover;
				mix-blend-mode: overlay;
				opacity: 0;
				display: block;
			}

		/* 4 */

		.row.cover_4 {}

			.row.cover_4 .row_1 {
				background: var(--color_grey_2);
				color: var(--color_white);
				width: 50%;
				min-width: 20em;
				margin: auto;
				padding: 5% 10%;
				box-sizing: border-box;
				text-align: center;
				z-index: 2;
			}

			.row.cover_4 .row_1 > *{
				color: var(--color_white);
			}

			.row.cover_4 .row_2 {
				padding: 10%;
				box-sizing: border-box;
				text-align: center;
				top: -20vh;
				margin-bottom: -20vh;
				z-index: 1;
				min-height: 60vh;
				display: inline-flex;
		    flex-direction: column;
		    align-content: center;
		    justify-content: center;
				background: var(--color_grey_1);
			}

			.row.cover_4 .row_2 > *{
				position: relative;
				z-index: 1;
				color: var(--color_white);
			}

			.row.cover_4 .row_2 img {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
				opacity: .6;
			}

			.row.cover_4 .row_2 p {
				font-style: italic;
				font-size: 1.2em;
			}


	/* ARTICLE */

	.row.article {}

		/* 6 */

		.row.article_6 {}

			.row.article_6 {
				background-attachment: fixed;
			}

			.row.article_6:before {
			  content: "";
			  position: absolute;
			  left: 0;
			  top: 0;
			  width: 100%;
			  height: 100%;
			  background: var(--color_main);
			  mix-blend-mode: multiply;
			}

			.row.article_6 .column.column_1 {
				display: inline-flex;
				flex-direction: column;
				align-self: center;
			}

			.row.article_6 .column.column_1 > *{
			  color: white;
				max-width: 20em;
			}

			.row.article_6 .column.column_2 {
			  background-color: var(--color_background_page);
				display: inline-grid;
				grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
			}

			.row.article_6 .column.column_2 div.text{
			  /* background-color: var(--color2); */
				outline: var(--style_outline);
				padding: 2em;
				font-size: .85em;
				margin: 2em;
			}

			.row.article_6 .column.column_2 div.text > *{
			  margin-top: 0;
				margin-bottom: .5rem;
			}

		/* 8 */

		.row.article_8 {}

			.row.article_8 {
				border-bottom: solid .25rem var(--color_main);
			}

			.row.article_8 .column.row_1 {
				overflow: hidden;
				background: var(--color_main);
				padding: 3rem;
				position: relative;
				margin-bottom: 4rem;
				min-height: 30vh;
				display: inline-flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.row.article_8 .column.row_1 > *{
				z-index: 1;
				position: relative;
				color: var(--color_white);
				text-align: center;
				max-width: 30em;
			}

			.row.article_8 .column.row_1 img {
				position: absolute;
				left: 0;
				top: 0;
				mix-blend-mode: multiply;
				opacity: 1;
				width: 100%;
				height: 100%;
				object-fit: cover;
				z-index: 0;
				max-width: none;
			}


		.row.article_10 {}

			.row.article_10 {
				background: var(--color_grey_2);
				overflow: visible;
			}

			.row.article_10 .column.row_1 {
				padding-top: 5em;
				padding-bottom: 5em;
			}

			@media all and (min-width: 30rem) {
				.row.article_10 .column.row_1 {
					padding-top: 10em;
					padding-bottom: 10em;
					display: grid;
					grid-template-columns: 1fr;
					grid-column-gap: 2rem;
				}

				.row.article_10 {
					border: solid 2em white;
				}
			}

			@media all and (min-width: 50rem) {
				.row.article_10 .column.row_1 {
					grid-template-columns: 1fr 1fr;
				}
			}

			@media all and (min-width: 80rem) {
				.row.article_10 {
					border: solid 4em white;
				}
			}

			.row.article_10 .column.row_1 > *{
				z-index: 1;
				position: relative;
				margin-top: 0;
			}

			.row.article_10 .column > * {
				color: var(--color_white);
			}

			.row.article_10 .column.row_1 img {
				position: absolute;
				left: -8rem;
				top: 0;
				width: calc(100% + 16rem);
				height: 100%;
				object-fit: cover;
				z-index: 0;
				max-width: none;
				filter: brightness(.55);
			}


	/* PRESENTATION */

	.row.presentation {}

		/* 5 */

		.row.presentation_5 {}

			div.content .row.presentation_5 {
				padding-top: 10rem;
				padding-bottom: 10rem;
				grid-row-gap: 0;
			}

			.row.presentation_5 .textbox {
				background: var(--color_main_creamy_2);
				display: inline-flex;
				flex-direction: column;
				align-items: center;
				padding: 15%;
				justify-content: center;
			}

			.row.presentation_5 * {
				/* line-height: 1.2em; */
			}

			.row.presentation_5 .image {
				position: relative;
				z-index: 2;
				background: var(--color_main_creamy_2);
			}

			@media all and (max-width: 50rem) {
				.row.presentation_5 .image {
					padding: 0;
				}
			}

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

				.row.presentation_5 .image img {
					background: none;
					height: 150%;
					width: calc(100% + 4rem);
					position: absolute;
					left: -2rem;
					top: -15%;
					object-fit: cover;
				}

			}

			.row.presentation_5 p {
				/* line-height: 1.7em; */
				/* font-weight: 400; */
			}

			.row.presentation_5 .column.column_1 {
				font-size: 1.2em;
			}

		/* 6 */

		.row.presentation_6 {}

			.section .row.presentation_6 {
				padding-top: 6rem;
				padding-bottom: 6rem;
			}

			.section .row.presentation_6 .column{
				padding-left: 0;
				padding-right: 0;
			}

			@media all and (max-width: 50rem) {
				.section .row.presentation_6 {
					padding-top: 1rem;
					padding-bottom: 1rem;
					padding-left: 0;
					padding-right: 0;
				}


			}

			.row.presentation_6 .column.textbox {
				outline-offset: 3em;
				padding: 0 4rem;
				color: var(--color_main);
			}


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

				.row.presentation_6 .column.textbox {
					outline: solid 2px var(--color_main);
				}

			}

			@media all and (min-width: 50rem) {
				.row.presentation_6 .column.textbox {
					padding: 4rem;
					max-height: fit-content;
				}

				.row.presentation_6 .column_1 {
					display: inline-flex;
			    flex-direction: column;
			    justify-content: center;
					gap: 2rem;
				}

				.row.presentation_6 .column_1 img{
					/* position: relative; */
					/* top: -3em; */
				}

				.row.presentation_6 .column_3 {
					display: inline-flex;
			    flex-direction: column;
			    justify-content: center;
					gap: 2rem;
				}

				.row.presentation_6 .column_3 img{
					/* position: relative; */
					/* bottom: -3em; */
				}
			}

		/* 7 */

		.row.presentation_7 {}

			.row.presentation_7 {
		    grid-column-gap: 0;
			}

			.row.presentation_7 .column_1 {
		    padding: 0;
			}

			.row.presentation_7 .column_1 .text {
				background: var(--color_main_creamy_2);
		    padding: 2em;
		    margin: 2em;
		    margin-top: -4em;
		    position: relative;
			}

			.row.presentation_7 .column_1 .text:empty {
				display: none;
			}

			.row.presentation_7 .column_1 .text > *{
				color: var(--color_main);
			}

			.row.presentation_7 .column_2 {
		    padding-left: 5vw;
		    padding-top: 5vw;
		    padding-right: 3vw;
				background: var(--color_white);
				/* position: static; */
				z-index: 1;
			}

			.row.presentation_7:before {
		    content: "";
				background: var(--color_main_creamy_2);
				width: 100%;
				height: 60%;
				left: 0;
				top: -4em;
				position: absolute;
			}

		/* 8 */

		.row.presentation_8 {}

			.row.presentation_8 .column_2 {
				background: var(--color_grey_2);
				padding: 2em;
			}

			.row.presentation_8 .column_2 > *{
				color: var(--color_white);
			}

			.row.presentation_8 .column_1 {
				padding: 0;
			}

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

				.row.presentation_8 .column_2 {
					padding: 10% 10% 10% 15%;
				}

				.row.presentation_8 .column_1 img:first-child {
					position: absolute;
			    left: 0;
			    top: 2em;
			    height: calc(100% - 8em);
			    width: 110%;
			    z-index: 1;
					object-fit: cover;
				}

				.row.presentation_8 .column_1 .text {
			    margin: 0 2em;
			    position: absolute;
					bottom: 2em;
					min-height: 4em;
					box-sizing: border-box;
					z-index: 2;
				}
			}

			.row.presentation_8 .column_1 .text {
				background: var(--color_main_creamy_2);
		    padding: 2em;
			}

			.row.presentation_8 .column_2 .icon {
				height: 3em;
				width: 3em;
				/* position: absolute; */
			}

			.row.presentation_8 .column_2 .icon + * {
				margin: -3em 0 4em 4em;
			}

			.row.presentation_8 .column_2 .icon + *:last-child {
				margin-bottom: 0;
			}

	/* SHOWROOM */

	.row.showroom {}

		/* 01 */

		.row.showroom_01 {}

			div.content .row.showroom_01 {
				background: var(--color_main_creamy_2);
				margin-top: 9rem;
				overflow: visible;
			}

			.row.showroom_01 .row_2.left,
			.row.showroom_01 .row_2.right {
				display: flex;
		    align-items: self-end;
			}

			.row.showroom_01 .row_2.center :is(h1,h2,h3){
				margin:0;
			}

			.row.showroom_01 .row_2.center :is(h1,h2,h3){
				margin: -1rem 0 1rem;
			}

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

				.row.showroom_01 .row_1 img {
					aspect-ratio: 5/2;
					object-fit: cover;
					/* position: relative; */
					margin-top: -9rem;
				}
			}



		/* 02 */

		.row.showroom_02 {}

			.row.showroom_02 .column.left {
				outline-offset: 3em;
				padding: 0 4rem;
				color: var(--color_main);
			}


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

				.row.showroom_02 .column.left {
					outline: solid 2px var(--color_main);
				}

				.row.showroom_02 .column.right {
					display: grid;
					grid-template-columns: 1fr 1fr;
					grid-gap: calc(var(--spacing) * .125rem);
					grid-gap: 1rem;
					align-items: end;
					align-self: center;
				}

				.row.showroom_02 .column.right div.text,
				.row.showroom_02 .column.right img:nth-child(3){
					grid-column-end: span 2;
				}

				.row.showroom_02 .column.right div.text{
					background: var(--color_main_creamy_2);
					color: var(--color_text);
					padding: calc(var(--spacing) * .25rem);
				}

			}