/* aspex_brands.css */

.container-brands a:hover {
	background: unset;
	color: unset;
}


/*.view-header-brands {
	display: none;
	position: relative;
}
*/
.view-header-brands.view-header-image,
/* ... and the one below the image: */
.view-header-image ~ .view-header-brands { display: flex; }

.view-header.view-header-brands:not(.view-header-image) .heading {
	background: transparent;
}


/*
.view-header-brands .heading {
	font-size: 3rem;
	color: var(--theme-color-3);
	background: transparent;
}
*/





/* brand 4-tet */
.view-header-brands {
	display: flex;
	flex-flow: row wrap;
	margin-bottom: 3rem;
}


.brands-header-brand-wrapper {
	display: flex;
	flex-flow: column nowrap;
	max-width: 50%;
	margin-bottom: 3rem;
}
.brands-header-brand-wrapper a {
	display: flex;
	align-items: center;
}
.brands-header-brand-wrapper > a img { width: 100%; }

.brands-header-brand-wrapper .brand-wrapper-logo-wrapper {
	display: flex;
	flex-flow: column;
	justify-content: center;
	width: 100%;
	height: 69px;
	background: #ccc;
}
.brands-header-brand-wrapper:nth-child(odd) .brand-wrapper-logo-wrapper { border-right: 1px solid #666; }

.brands-header-brand-wrapper .brand-wrapper-logo-wrapper a {
	width: 100%;
	height: 100%;
	/* DNU padding */
}

/* img.brand-logo */
.brands-header-brand-wrapper .brand-wrapper-logo-wrapper .brand-logo {
/*	max-width: 60%;*/
	max-height: 45%;
	margin: auto;
}

@media screen and (min-width: 780px) {
	.brands-header-brand-wrapper {
		width: 25%;
		margin-bottom: 0;
	}
	.brands-header-brand-wrapper:nth-child(-n+3) .brand-wrapper-logo-wrapper {  border-right: 1px solid #666; }
} /* MQ */






/* ======================================================================== */
/* ======================================================================== */

/* for the brand divs, these are ok; the subhead els w/bg images are customized below */
.section-brands {
	display: flex;
	width: 100%;
	flex-flow: row wrap;
	gap: 1.5rem;
	justify-content: space-between;
	align-items: stretch;
	margin-bottom: 4.5rem;
	/*	border: 3px dotted red;*/
}

	.section-brands .heading {
		width: 100%;
		padding: 0; /*!*/
		text-align: left;
		font-size: 1.65rem;
		background: transparent; /*!*/
		text-transform: uppercase;
		color: var(--theme-color-3);
		background: transparent;
		font-weight: 700;
	}

/*
.section-brands img {
	width: 100%;
	margin: auto;
	max-width: 600px;
}
*/
.section-brands .copy-wrapper {
	flex: 1 0 calc(300px + 0rem);
	max-width: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
}

.section-brands .copy-wrapper p {
	width: 100%;
	max-width: 75ch;
	font-size: 1.11rem;
	line-height: 1.65rem;
	text-align: justify;
}

.section-brands .copy-wrapper a { text-transform: capitalize; }




/* ======================== */
/* .section-brands-1.section-brand-philosophy */
.section-brand-philosophy {}
.section-brand-philosophy img {
	flex: 1 1 calc(360px - 3rem);
	width: 100%;
	max-width: 600px;
	margin: auto;
	padding: 1.5rem;
	background-color: transparent;
	background: url(https://jiecosystem.s3.us-east-1.amazonaws.com/aspex/images/deco/redbar-h01-552x141.gif) 0 0 / 44.4% no-repeat, url(https://jiecosystem.s3.us-east-1.amazonaws.com/aspex/images/deco/redbar-v03-141x552.gif) 100% 100% / 13.5% no-repeat;
}
.section-brand-philosophy .copy-wrapper {
	padding: .6rem 1.5rem 0;
	padding: 0 1.5rem 0;
}




.section-brands-2 {
	padding: 1.5rem;
	background-color: transparent;
	background: transparent url("https://jiecosystem.s3.us-east-1.amazonaws.com/aspex/images/deco/deco-frames-red-bg-1800x600.jpg") 0 0 / cover no-repeat;
}
.section-brands-2 .heading {
	width: 100%;
	margin: 1.5ch auto;
/*	padding: 0.9ch 3vw 0.9ch 3vw; */
	text-transform: uppercase;
	text-align: center;
	background: transparent;
	color: #fff;
	font-size: clamp(24px, 4.5vw, 3.3rem);
	font-weight: 600;
}


/* ================================================ SECTION: BRANDS LIST ================================================ */
.section-brands.section-brands-brands-list {
	flex-flow: column nowrap;
	flex-flow: row wrap;
	justify-content: space-between;
	gap: 1.5rem 3rem;
}

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

.brand-wrapper {
	display: flex;
	width: 100%;
	flex-flow: row wrap;
	margin-bottom: 3rem;
	align-content: flex-start;
/*	border: 3px dashed lime;*/
}
.brand-wrapper img { width: 100%; }

.section-brands-brands-list .brand-logo-wrapper { max-width: unset; }

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

.brand-logo-wrapper { margin-bottom: .9rem; }
.brand-logo-wrapper .brand-logo {
	width: 100%;
	max-width: 240px;
}

.brand-deco-wrapper {
	/* DNU margin: 0 auto; */
	margin-bottom: 1.5rem;
}
.brand-deco-wrapper .brand-deco {
	max-width: 450px;
	padding: .9rem 0 0 .9rem;
	background-color: transparent;
	background: url(https://jiecosystem.s3.us-east-1.amazonaws.com/aspex/images/deco/redbar-h01-552x141.gif) 0 0 / 44.4% no-repeat;
}

.section-brands-brands-list .copy-wrapper {
/*	padding: 0 1.5rem 0;*/
	padding: .9rem 1.5rem 0;
}



.copy-wrapper p {
	display: flex;
	flex-flow: row nowrap;
}
.copy-wrapper p:first-of-type { margin-bottom: auto; }
.copy-wrapper p:nth-of-type(2) {
	display: block;
	margin-top: .9rem;
	text-align:left;
}

.copy-wrapper p span {
	margin-right: .6rem;
	text-transform: uppercase;
	font-weight: 500;
}

.collection-link a {}





/*@media screen and (min-width: 105ch) {*/ /* 840px */
@media screen and (min-width: 60ch) { /* 480px */
	.brand-deco-wrapper .brand-deco { max-width: 360px; }

} /* MQ */


@media screen and (min-width: 105ch) { /* 840px */
	.brand-wrapper { justify-content: flex-start; }
	.brand-wrapper .brand-logo-wrapper,
	.brand-wrapper .brand-deco-wrapper { justify-content: inherit; }

	.brand-wrapper .brand-deco-wrapper { flex: 0 1 360px; margin-bottom: 0; }
/*	.brand-deco-wrapper .brand-deco { padding: 0; }*/

	.brand-wrapper .copy-wrapper { flex: 1 0 calc(360px + 3rem); }
} /* 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) {
	.brand-wrapper {
		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%;
	}
}