/*
	About.cshtml (parent of _partial_About.cshtml):

	<div class="container container-company container-about"> ...
		<div class="view-header view-header-company view-header-about eco"> ...
		<partial name="_partial_About" />
			=> <section section-about-us>, etc.
*/
.container-about {}
.view-header.view-header-information.view-header-about {}

/* ============ SECTIONS ============ */
.section-about-us {}

.container-about .section {
	max-width: 78ch;
	margin: 3rem auto 3rem;
}

.about-us-copy p {
	margin-bottom: 3ch;
	line-height: 1.5;
	text-align: justify;
	.tenant-name {
		text-transform: uppercase;
		font-weight: bold;
	}
	&:last-of-type {
		margin-bottom: 9ch;
	}
}


/* ======================== 'ABOUT OUR BRANDS' => TOP OF PAGE 4-TET ======================== */
/*
	Brands.cshtml:
*/
.container-brands .section-pseudo-showcase-wrapper {
	width: 100%;
	margin-bottom: 6rem;

	.static-pseudo-showcase {
		margin-bottom: 0; /* !!! override */
		gap: 1.5rem; /* !!! override */
		.heading {}
		.showcase-elements-wrapper {
			a {
				flex: 1 1 auto;
				max-width: 135px; /* images are 900px wide for headroom; max-width value is a design choice */
				img { width: 100%; }
			}
		}
	}
} /* .container-brands .section-pseudo-showcase-wrapper */
@media screen and (min-width: calc(405px + 6rem)) { /* 501px (unlike home/account ix .containers, this has 3rem horiz padding) */
	.container-brands .section-pseudo-showcase-wrapper {
		.static-pseudo-showcase {
			.showcase-elements-wrapper {
				justify-content: space-evenly;
				a {
					flex: 1 1 auto;
					max-width: 210px;
				}
			}
		}
	}
} /* MQ */
@media screen and (min-width: calc(540px + 6rem)) { /* unlike home/account ix .containers, this has 3rem horiz padding */
	.container-brands .section-pseudo-showcase-wrapper {
		.static-pseudo-showcase {
			.showcase-elements-wrapper {
				flex-wrap: nowrap;
				justify-content: space-between;
				a {
					flex: 1 1 auto;
					max-width: 180px;
				}
			}
		}
	}
} /* MQ */





/* ================================================ SECTION: BRANDS LIST ================================================ */
.section-brands-brands-list {
	display: flex;
	width: 100%;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 1.5rem 3rem;
	/* border: 2px solid red; */
}

/*
.brand-wrapper {

	.brand-logo-wrapper {}
		a {
			img.brand-logo {}
		}
	.brand-deco-wrapper {
		a {
			img.brand-deco {}
		}
	}
	.copy-wrapper {
		p {}
	}
} /* .brand-wrapper ...
*/

.brand-wrapper {
	display: flex;
	width: 100%;
	/* flex-flow: row wrap; */
	flex-flow: column nowrap;
	justify-content: flex-start;
	margin-bottom: 3rem;
	align-items: center;

	img { width: 100%; }

	.brand-logo-wrapper,
	.brand-deco-wrapper {
		display: flex;
		width: 100%;
		max-width: unset;
		justify-content: center;
	}

	.brand-logo-wrapper {
		max-width: unset;
		/* margin-bottom: .9rem; */
		a {
			.brand-logo {
				width: 100%;
				/* max-width: 240px; */
				max-width: 390px;
				max-height: 120px;
			}
		}
	} /* .brand-logo-wrapper  */

	.brand-deco-wrapper {
		/* DNU margin: 0 auto; */
		margin-bottom: 1.5rem;
		a {
			.brand-deco {
				/* max-width: 450px; */
				max-width: 390px;
				/* padding: .9rem 0 0 .9rem; */
				background: transparent;
			}
		}
	} /* .brand-deco-wrapper  */


	.copy-wrapper {
	/*	padding: 0 1.5rem 0;*/
		/* padding: 0 1.5rem 0; */
		p {
			display: flex;
			flex-flow: row nowrap;
			margin: 0 auto;
			text-align: justify;
			max-width: 60ch;
			&:not(:last-of-type) { margin-bottom:  1.8ch; }
			/*
			span {
				margin-right: .6rem;
				text-transform: uppercase;
				font-weight: 500;
				border: 3px dashed blue;
			}
			*/
			&.collection-link a {}
		} /* .copy-wrapper p*/
	} /* .copy-wrapper  */
} /* .brand-wrapper  */



/* interim; just let 'em stretch a bit more */
@media screen and (min-width: calc(780px + 3rem)) { /* 828px */
	.brand-wrapper {

		.brand-logo-wrapper {
			a {
				.brand-logo { max-width: 450px; }
			}
		} /* .brand-logo-wrapper  */

		.brand-deco-wrapper {
			a {
				.brand-deco { max-width: 450px; }
			}
		} /* .brand-deco-wrapper  */

	} /* .brand-wrapper */
} /* MQ */


/* now, re-shrink to enable horizontal pairs */
@media screen and (min-width: calc(900px + 6rem)) { /* + 3rem = 948px ... + 6rem = 996px */
	.section-brands-brands-list {
		flex-flow: row wrap;
		align-content: flex-start;
		align-items: flex-start;
		justify-content: space-between;

		.brand-wrapper {
			max-width: 45%;
			.brand-logo-wrapper {
			a {
				.brand-logo { max-width: 390px; }
			}
		} /* .brand-logo-wrapper  */

		.brand-deco-wrapper {
			a {
				.brand-deco { max-width: 390px; }
			}
		} /* .brand-deco-wrapper  */

		} /* .brand-wrapper */

	} /* .section-brands-brands-list */
} /* MQ */






/*
@media screen and (min-width: 150ch) { => 1200px 
@media screen and (min-width: 168ch) { => 1350px 
@media screen and (min-width: 180ch) { => 1440px 
*/
@media screen and (min-width: 180ch) {
	.section-brands-brands-list {
		flex-flow: row wrap;
		justify-content: space-between;
		gap: 1.5rem 3rem;
	}


	.brand-wrapper {
		/* border-top: 6px solid blue;
		flex: 1 1 60ch;
		justify-content: flex-start; */
	}
	/* .brand-wrapper .brand-deco-wrapper { flex: 0 1 255px; } */
	/* .brand-wrapper .copy-wrapper { flex: 1 0 calc(51% - 1.5rem); } */
} /* MQ */

.brand-wrapper:last-child {
	/* max-width: 50%; */
}
@media only screen and (max-width: 1440px) {
	.brand-wrapper:last-child {
		/* max-width: 100%; */
	}
}
















.view-header-brands { border: 2px dashed red; }

.section-brands-brands-list .brand-deco-wrapper {
	display: flex;
}