/*
* 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
*/
/* $color-1:               #ffe25a !default
$color-2:               #f88ad1 !default
$color-3:               #2ad2d2 !default
$color-4:               #135667 !default  */

section.trendbook {
	--tb-color-1: #ffe25a;
	--tb-color-2: #fff5c8;
	--tb-color-3: #17778f;
	--tb-color-4: #2ad2d2;
	--tb-color-5: #0e3b46;

	isolation: isolate; 
}

section.trendbook::before {
	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 bottom, left top, from(#f1efeb), color-stop(50%, #e1dad1));
    background: -o-linear-gradient(bottom, #f1efeb 0%, #e1dad1 50%);
    background: linear-gradient(0deg, #f1efeb 0%, #e1dad1 50%);
	z-index: -2; 
}


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: -o-linear-gradient(top, var(--tb-color-3) 0%, var(--tb-color-4) 70%);
	background: -webkit-gradient(linear, left top, left bottom, from(var(--tb-color-3)), color-stop(70%, var(--tb-color-4)));
	background: linear-gradient(180deg, var(--tb-color-3) 0%, var(--tb-color-4) 70%);
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), color-stop(90%, transparent));
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 90%);
            mask-image: -webkit-gradient(linear, left top, left bottom, from(black), color-stop(90%, transparent));
            mask-image: linear-gradient(to bottom, black 0%, transparent 90%);
	z-index: -1; 
}

body.skin-layout section.trendbook::before,
body.has-skin section.trendbook::before {
	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-5);
	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-5);
	font-size: 1.1rem; 
}
.trendbook-content .button.button-primary {
	background-color: var(--tb-color-1);
	padding-inline: 3rem;
	color: var(--tb-color-5);
	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: var(--tb-color-2);
		border-color: var(--tb-color-2); 
	} 
}

@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; 
	} 
}