:root {
	--color-bg: #E7E8EC;	
	--font-size-base: clamp(1.5rem, 1.55vw, 1.8rem);
	--font-size-large: 2.4em;
	--gutter: 24px;
}

body {
	background: var(--color-bg);
}

@media(min-width: 56.25em) {

}

.guide__hero {
	background: #aaa;
/*	color: white;*/
/*	padding: 25vh 7vw;*/
	/*margin-left: var(--gutter);
  margin-right: var(--gutter);*/	
  margin-bottom: var(--gutter);
  display: grid;
  align-items: center;
  grid-template-columns: repeat(12, 1fr);
}

.guide__hero__text, .guide__hero picture {
	grid-row: 1;
	grid-column: 1 / -1;
}

.guide__hero__text {
	grid-column: 6 / -1;
	padding: 0 3rem 0 1.5rem;
}

.guide__hero__text h1 {
	font-family: var(--font-serif);
	font-size: clamp(5rem, 7vw, 9rem);
	letter-spacing: -2.5px;
	line-height: 0.825;
	color: #333333b0;
	margin-top: 2rem;
	margin-bottom: 4rem;
	margin-left: -0.2rem;
	max-width: 12ch;
}

.guide__hero__text h1 span {
	color: #333;
}
.guide__hero__text p {
	font-size: clamp(1.5rem, 1.55vw, 2rem);
	letter-spacing: -0.1px;
	line-height: 1.6;
	max-width: 33ch;
}

[data-type="casual"] .guide__hero__text h1 {
	font-family: var(--font-sans);
/*	font-weight: 300;*/
	font-size: clamp(5rem, 7vw, 9rem);
	letter-spacing: -3.5px;
	max-width: 14ch;
}
[data-type="casual"] .guide__hero__text p {
	max-width: 38ch;
}

.guide__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.guide__look, .guide__content {
	align-items: end;
  display: grid;
  grid-column-gap: 16px;
  grid-template-columns: 16px repeat(12, 1fr) 16px;
  position: relative;
  margin-left: var(--gutter);
  margin-right: var(--gutter);
  margin-bottom: 3vw;
  padding-bottom: 3vw;
}
.guide__look:nth-child(even)::before {
	content: '';
	position: absolute;
	left: calc(var(--gutter) * -1);
	right: calc(var(--gutter) * -1);
	top: calc(var(--gutter) * -1);
	bottom: 0;
	background: #CBCBD5;
	/*background: linear-gradient(to bottom, #CBCBD5, #cbcbd500);*/
	background: linear-gradient(to bottom, #CBCBD5, #cbcbd557);
	z-index: -1;
}

.guide__content {
	align-items: center;
}

.guide__look img {
	border-radius: 8px;
}

.guide__look__img {
	width: 100%;
	grid-column: 1 / -1;
	grid-row: 1;
}
.guide__look__img img {
	width: 100%;
}
.guide__look__text {
	grid-column: 1 / -1;
	grid-row: 2;
	position: relative;
}
.guide__look__secondary {
	grid-column: 1 / -1;
	grid-row: 3;
	padding: 2rem 0 0;
}
.guide__look__text h2, .guide__look p {
	color: rgba(0, 0, 0, 0.85);
	font-size: var(--font-size-base);
}
.guide__content p {
	font-size: var(--font-size-base);	
	line-height: 1.55;
}
.guide__look__text p {
	color: rgba(0,0,0,.85);
	line-height: 1.55;
}
.guide__look__secondary p {
	color: rgba(0,0,0,.7);
	line-height: 1.55;
}
.look__number {
	font-size: var(--font-size-base);
	display: block;
	color: rgba(0,0,0,.5);
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}
.guide__look__text h2, .guide__content h2 {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 500;
	font-family: var(--font-sans);
	font-size: var(--font-size-large);
	line-height: 1.1;
	max-width: 16ch;
}
.guide__content h2 {
	margin-bottom: 3rem;
}
.guide__look__text h2 + p {
	margin-top: 3rem;
}
.guide__look__text .btn {
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
	font-size: 12px;
	margin: 1.5rem 0 1.5rem;
	transition: .1s ease;
}
.guide__look__text .btn:hover {
	background: rgba(0,0,0,.8);
}
.guide__look__text figure img { 
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,.2);
	box-shadow: 0 16px 90px rgba(0,0,0,.2);
	transition: .2s ease;
}
.guide__look__text figure a:hover img {
	border: 1px solid rgba(255,255,255,.3);
	box-shadow: 0 16px 90px rgba(0,0,0,.25);	
}
.guide__look__text figure figcaption {
	font-size: 15px;
	margin-top: 2rem;
}
.guide__look__text figure figcaption a { 
	display: flex;
	align-items: baseline;
	gap: 1.5rem;
	color: rgba(0,0,0,.6);
}
.guide__look__text figure figcaption p {
	color: rgba(0,0,0,.6);
}
.guide__look__text figure figcaption a > span:first-child { 
	text-decoration: underline;
	color: rgba(0,0,0,1);
	margin-right: 1rem;
}
.guide__look__text figure figcaption a:hover {
	text-decoration: none;
}
.guide__look__text figure figcaption p span {
	display: block;
	font-size: 13px;
	text-decoration: none;
	margin-top: 0.5rem;
}
.guide__content__text p a {
	color: inherit;
	text-decoration: underline;
}

.guide__look__shop {
	display: flex;
	gap: 16px;
	margin-top: 3rem;
	position: relative;
}
.guide__look__shop::before {
	content: 'More';
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 13px;
	font-weight: 500;
	color: rgba(0,0,0,.4);
	position: absolute;
	left: 0;
	top: 0;
	text-align: right;
	transform: rotate(-90deg) translateY(-36px);
	transform-origin: 50% 100%;
}
.guide__look__shop > div {
	/* 1.5 columns wide */
	width: calc(calc(5 / 12) * 100%);
}
.guide__look__shop figure {
	padding: 2.5rem 1rem 3.5rem;
	background: white;
	border-radius: 6px;
	margin-bottom: 1rem;
	border: 1px solid rgba(0,0,0,.15);
}
.guide__look__shop figure img {
	width: 100%;
	height: auto;
}
.guide__look__shop > div p {
	font-size: 12.5px;
	line-height: 1.4;
	padding-right: 0.5rem;
	margin-bottom: 0;
	opacity: 0;
	text-decoration: underline;
	visibility: hidden;
	transition: .4s ease;
}
.guide__look__shop a, .guide__look__shop a p {
	text-decoration: none;
}
.guide__look__shop a:hover, .guide__look__shop a:hover p {
	text-decoration: none;
}
.guide__look__shop > div:hover p {
	opacity: 1;
	visibility: visible;
	transition: .1s ease;
}
.guide__look__shop > div:hover figure {
	border-color: rgba(0,0,0,.25);
}

.guide__content {
	grid-template-columns: 1fr;
	padding: var(--gutter) 0;
}
.fabric-grid {
	grid-column: 2 / -2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 12px;
	margin-bottom: 3rem;
}
.fabric-grid figure {
	position: relative;
}
.fabric-grid figure span {
	position: absolute;
	bottom: 1rem;
	left: 1.5rem;
	font-size: 15px;
}
[data-type="casual"] .fabric-grid figure span {
	display: none;
}
.looks-grid, .looks__text {
	grid-column: 1 / -1;
	gap: 8px;
}
.looks-grid {
	display: flex;
}

.content--fabric {
	padding: 1.5rem 1.5rem 8rem;
	border-radius: 12px;
	background: white;
}
.fabric-grid img, .looks-grid img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}
.looks-grid img {
	margin-bottom: 8px;
}
.looks__text {
	padding: 0;
	margin: 3rem 0;
	list-style: none;
}
.looks__text li {
	margin-bottom: 3rem;
}
.looks__text li p {
	font-size: (--font-size-base);
	padding-right: 2rem;
}
.looks__text li p a {
	color: #333;
	text-decoration: underline;
}
.looks__text li p:first-child {
	color: #333;
	font-weight: 500;
}
.content--style > div {
	grid-column: 2 / -2;
	padding-bottom: 6rem;
	border-bottom: 1px solid #aaa;
	margin-top: 4rem;
}
.content--style > div div {
	margin-bottom: 3rem;
}
.content--style > div ul {
	list-style: none;
	padding: 0 1rem 0 0;
	margin: 3rem 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
/*	display: none;*/
}
.content--style > div ul li {
	border-radius: 8px;
	padding: 1.5rem 3rem;
	position: relative;
/*	border: 1px solid rgba(0,0,0,.1);*/
}
.content--style > div ul img {
	width: 100%;
	padding: 0 0.5rem;
	height: auto;
}
.content--style > div li svg {
	position: absolute;
	top: 50%;
	left: 50%;
	bottom: 0;
	right: 0;
	height: 66%;
	width: 60%;
	transform: translate(-50%, -73%);
}
.content--style > div li p {
	margin-top: 1rem;
	font-size: 11.5px;
	text-align: center;
	margin: 1.5rem auto 3rem auto;
  /*transform: rotate(90deg);
  margin: -90px 110px 70px -140px;*/
  opacity: 0.5;
  transition: .15s;
}
.content--style > div li:hover p {
  opacity: 1;
}

.content--style {
	position: relative;
	align-items: start;
	padding-top: 0!important;
}

.content--style h3 {
	border: 1px solid black;
	padding: 1rem 3rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 500;
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	border-radius: 10rem;
	background: #E7E8EC;
	position: absolute;
	top: -4rem;
	left: 5%;
}

.content--look h4 {
	grid-column: 1 / -1;
	justify-content: center;
	text-align: center;
	margin-bottom: 6rem;
}

.guide__cta {
	padding: 2rem var(--gutter) 15vh;
	text-align: center;
}

@media(max-width: 60em) {
	.guide__look__shop > div p, 
	.guide__look__shop::before
	{ display: none }
	.guide__look {
		padding-bottom: 6rem;
		margin-bottom: 6rem;
	}

	figure.guide__look__img {
		display: flex;
		gap: 1rem;
		overflow-x: scroll;
		scroll-snap-type: x mandatory;
		margin-left: calc(-1 * var(--gutter));
		margin-right: calc(-1 * var(--gutter));
		padding-left: var(--gutter);
		padding-right: var(--gutter);
		width: calc(100% + calc(var(--gutter) * 2));
	}
	.guide__look__img picture {
		flex: 1 0 76vw;
    scroll-snap-align: center;
	}
	.guide__look__text figure {
		display: none;
	}

/*	.guide__look__text {
		display: flex;
		flex-direction: column;
	}
	.guide__look__text > * {
		order: 2;
	}
	.guide__look__text figure {
		order: 1;
		width: 66%;
		margin-top: -4rem;
		margin-left: auto;
		margin-right: var(--gutter);
	}*/
}

@media(min-width: 60em) {
	.guide__look, .guide__content {
	  grid-column-gap: 16px;
	  grid-template-columns: 54px repeat(12, 1fr) 54px;
	  margin-left: var(--gutter);
	  margin-right: var(--gutter);
	  margin-bottom: 3vw;
	}
	.guide__hero__text {
		grid-column: 5 / -5;
		padding: 0;
	}
	[data-type="casual"] .guide__hero__text {
		grid-column: 7 / -2;
	}
	[data-type="casual"] .guide__hero__text h1 {
		font-size: clamp(5rem, 7vw, 8rem);
		max-width: 14ch;
	}
	.guide__look__text p, .guide__look__secondary p {
		padding-right: 2rem;
	}
	.guide__look__text, .guide__content__text {
		grid-column: 9 / -2;
		grid-row: 1;
	}
	.guide__look__secondary {
		grid-column: 2 / 8;
		grid-row: 2;
		padding: 6rem 0 0;
	}
	.guide__look__text {
		grid-row: 1;
	}
	.guide__look:nth-child(even) .guide__look__text {
		grid-column: 2 / 7;
	}
	.guide__look__secondary {
		grid-column: 2 / 7;
	}
	.guide__look:nth-child(even) .guide__look__secondary {
		grid-column: 9 / -2;
	}
	.fabric-grid {
		grid-column: 2 / 8;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 16px;
		margin-bottom: 0;
	}
	.content--fabric {
		align-items: start;
		padding: 8rem 0 16rem;
	}
	.content--fabric > .guide__content__text {
		grid-column: 9 / -2;
	}
	.content--style.guide__content p {
		padding-right: 2rem;
	}
	.content--style.guide__content h4 + p {
		min-height: 9ch;
	}
	.content--fabric.guide__content p {
		font-size: calc(var(--font-size-base) * .9);
		margin-bottom: 1.25rem;
	}
	.content--style > div {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin-top: 6rem;
		column-gap: 16px;
		row-gap: 3rem;
	}
	.content--style > div div {
		padding-right: 5rem;
		margin-bottom: 1rem;
	}
	.content--style > div li p {
		font-size: 12.5px;
		margin-top: 2.5rem;
		padding-right: 0!important;
	  /*transform: rotate(90deg);
	  margin: -90px 110px 70px -140px;*/
	}
	.content--style > div li svg {
		height: 70%;
		width: 65%;
		transform: translate(-50%, -67%);
	}
	.guide__look__text h2, .guide__look p {
		color: white;
	}
	.guide__look p {
		color: rgba(255,255,255,.75);
	}
	.guide__look__text p + figure {
		margin-top: 6rem;
	}
	.guide__look__text .btn {
		margin: 2rem 0 5rem;
		background: rgba(0,0,0,.65);
	}
	.look__number {
		margin-top: 0;
		margin-bottom: 1.5rem;
		color: rgba(255,255,255,.5);
	}
	.guide__look__img picture:nth-child(2) {
		display: none;
	}
	.guide__look__text p, {
		color: rgba(255,255,255,.75);
		line-height: 1.55;
	}
	.guide__look__secondary p {
		color: rgba(0,0,0,.75);
	}
	.guide__look__text figure {
		margin-bottom: -22vw;
	}
	.guide__look__text figure figcaption {
		font-size: var(--font-size-base);
		margin-top: 2.5rem;
	}
	.guide__look__shop {
		margin-top: 6rem;
	}
	.looks-grid, .looks__text {
		grid-column: 2 / -2;
		display: flex;
		gap: 16px;
	}
	.looks__text {
		margin: 4rem 0;
	}
	.looks-grid img {
		margin-bottom: 16px;
	}
	.looks__text li p {
		font-size: calc(var(--font-size-base) * .85);
		padding-right: 3rem;
	}
	.content--style h3 {
		top: -6.5rem;
		left: 5.5%;
	}
}

@media(min-width: 87.5em) {
	.content--fabric {
		align-items: center;
	}
}

@media(min-width: 100em) {
	:root {
		--gutter: 48px;
	}	
	.guide__look__text p {
		padding-right: 4em;
	}
	.looks-grid, .looks__text {
		grid-column: 3 / -3;
	}
}