/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

section.trendbook {
	--tb-color-1: #e0cad7;
	--tb-color-2: #e1f079;
	--tb-color-3: #424f3c;
	--tb-color-4: #14241c;

	isolation: isolate; 
}

section.trendbook::after {
	content: "";
	position: absolute;
	top: 0;
	right: auto;
	bottom: auto;
	left: 50%;
	display: block;
	width: 100vw;
	height: 100%;
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	    transform: translate(-50%, 0);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, var(--tb-color-3)), to(var(--tb-color-4)));	
	background: -o-linear-gradient(top, var(--tb-color-3) 30%, var(--tb-color-4) 100%);	
	background: linear-gradient(180deg, var(--tb-color-3) 30%, var(--tb-color-4) 100%);	
	z-index: -1; 
}

body.has-skin section.trendbook::after {
	width: 100%; 
}

.trendbook-inner {
	position: relative;
	width: 100%;
	display: -ms-grid;
	display: grid;
	grid-auto-columns: -webkit-min-content 1fr;
	grid-auto-columns: min-content 1fr;
	grid-auto-rows: -webkit-max-content;
	grid-auto-rows: max-content;
	padding: 3rem;
	gap: 5vw; 
}

.trendbook-inner .cards-container {
	-ms-grid-column: 1;
	grid-column: 1/1;
	-ms-grid-row: 1;
	grid-row: 1/1; 
}

.trendbook-inner .trendbook-content {
	-ms-grid-column: 2;
	grid-column: 2/2;
	-ms-grid-row: 1;
	grid-row: 1/1; 
}

.cards-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center; 
}

.cards-container .cards-slider {
	position: relative;
	width: 300px;
	aspect-ratio: 9/14;
	-webkit-perspective: 100px;
	        perspective: 100px; 
}

.cards-container .card {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 1rem;
	background-color: var(--tb-color-2);
	-webkit-box-shadow: 0 0 3rem rgba(0, 0, 0, 0.2);
	        box-shadow: 0 0 3rem rgba(0, 0, 0, 0.2); 
}

.cards-container .card img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	border-radius: 1rem; 
}

.trendbook-content {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start; 
}

.trendbook-content .trendbook-logo {
	width: 270px; 
}

.trendbook-content .trendbook-logo svg {
	width: 100%;
	height: auto;
	fill: var(--tb-color-1); 
}

.trendbook-content h2 {
	color: var(--tb-color-1);
	text-transform: uppercase;
	font-size: clamp(2.2rem, 4.6vw, 3.7rem);
	letter-spacing: -0.01em;
	line-height: 1;
	font-weight: 700;
	margin-bottom: .3rem; 
}

.trendbook-content h2 a {
	color: inherit; 
}

.trendbook-content p {
	max-width: 60ch;
	color: var(--tb-color-1);
	font-size: 1.1rem; 
}
.trendbook-content .button.button-primary {
	background-color: var(--tb-color-1);
	padding-inline: 3rem;
	color: var(--tb-color-4);
	text-transform: uppercase;
	border-color: var(--tb-color-1);
	margin-top: 1.5rem;
	margin-bottom: 0; 
}

@media only screen and (min-width: 1171px) {

	.trendbook-content .button.button-primary:hover {
		background-color: white;
		border-color: white; 
	} 
}

@media only screen and (max-width: 1000px) {

	.trendbook-inner {
		padding: 2em;
		gap: 10vw; 
	}
	
	.cards-container .cards-slider {
		width: 250px; 
	} 
}

@media only screen and (max-width: 850px) {

	.trendbook-inner {
		padding-right: 0;
		gap: 7vw; 
	} 

	.trendbook-content .trendbook-logo {
		width: 210px; 
		margin-bottom: 0.2rem;
	}
}

@media only screen and (max-width: 750px) {

	.trendbook-inner {
		grid-auto-columns: 1fr;
		grid-auto-flow: row;
		padding: 2rem 0;
		gap: 3rem; 
	}

	.trendbook-inner .trendbook-content {
		-ms-grid-column: 1;
		grid-column: 1/1;
		-ms-grid-row: 2;
		grid-row: 2/2; 
	}

	.trendbook-content {
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		text-align: center; 
	}

	.trendbook-content p {
		max-width: 45ch; 
	}

	.trendbook-content .button.button-primary {
		min-width: 50%;
		margin-top: 1rem; 
	} 
}

@media only screen and (max-width: 385px) {

	.trendbook-inner {
		padding-block: 1.5rem; 
	}

	.cards-container .cards-slider {
		width: 200px; 
	}

	.trendbook-content h2 {
		font-size: 2rem; 
	}

	.trendbook-content p {
		font-size: .95rem;
		max-width: 35ch; 
	}

	.trendbook-content .button.button-primary {
		margin-top: .5rem;
		font-size: .9rem; 
	} 
}