/* ============== Home page slider  ============== */

.portfolio-swiper {
	height: 60vh;
	min-height: auto;
}

.hero.portfolio-swiper .hero-content {
	position: absolute;
}

.hero.portfolio-swiper::before {
	display: none;
}

.portfolio-slide {
	overflow: hidden;
	width: 100%;
	height: 100%;
	position: relative;
	background: var(--carrousel_grey);
}

.portfolio-slide::before {
	content: ' ';
	background: rgba(0, 0, 0, .5);
	transition: background .7s linear;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
}

.swiper-slide-active .portfolio-slide::before {
	background: rgba(0, 0, 0, .3);
	transition: background .7s linear;
}

.portfolio-slide .hero-image {
	height: 100%;
}

.single-portfolio h3 {
	font-weight: 300;
	margin-top: 0;
}


/* ============== Portfolio Preview  ============== */

.portfolio-list {
	margin-bottom: 4em;
}

.portfolio-preview {
	margin-bottom: 2em;
}

.portfolio-preview-thumbnail {
	height: 260px;
	overflow: hidden;
	margin-bottom: 1em;
}

.portfolio-preview-content {
	color: #fff;
	position: relative;
	z-index: 2;
}

.client-name {
	margin-bottom: .5em;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .25em;
	font-size: .7em;
	opacity: .7;
}

.portfolio-excerpt {
	font-size: 1.4em;
}

.portfolio-excerpt p {
	margin: .5em 0;
	line-height: 115%;
	font-weight: 500;
}


/* Image hover zoom */
.portfolio-preview--outer a .post-thumbnail {
	width: 100%;
	height: 100%;
	display: block;
}


/* ============== Portfolio Page  ============== */
body .hero-portfolio,
body .hero-portfolio.hero {
	min-height: 0;
}

body.page-template-page-portfolio #primary {
	background: var(--carrousel_grey);
	color: #fff;
}


body .hero-portfolio .hero-image .post-thumbnail {
	height: 100%;
}

body .hero.hero-portfolio .hero-content .hero-carousel__details {
	bottom: 4em;
	width: 100%;
	max-width: 900px;
}

body.single-portfolio h4 {
	margin-top: 0;
}

body.single-portfolio .wp-block-column {
	margin-bottom: 1.5em;
}


.portfolio-feature .portfolio-preview {
	display: block;
}


/* ===================================== Responsive  ===================================== */

/*  Tablet Portrait  */
@media screen and (min-width: 768px) {

	/* ============== Home page slider  ============== */
	.portfolio-swiper {
		height: 60vh;
	}

	.swiper-slide-active .portfolio-slide::before {
		content: ' ';
		background: rgb(0, 0, 0);
		background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0.520045518207283) 0%, rgba(0, 0, 0, 0) 75%);
		background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.520045518207283) 0%, rgba(0, 0, 0, 0) 75%);
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.520045518207283) 0%, rgba(0, 0, 0, 0) 75%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=1);
		transition: background .7s linear;
	}

	/* ============== Portfolio Preview  ============== */
	.portfolio-preview {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 2em;
		align-items: center;
	}

	.portfolio-list .portfolio-preview--outer:nth-of-type(2n) .portfolio-preview-thumbnail {
		grid-column: 2 / 2;
		grid-row: 1 / 1;
	}

	.portfolio-list .portfolio-preview--outer:nth-of-type(2n) .portfolio-preview-content {
		grid-column: 1 / 2;
		grid-row: 1 / 1;
		margin-left: 0em;
	}

}

/*  Desktop  */
@media screen and (min-width: 1024px) {

	/* ============== Home page slider  ============== */
	.portfolio-swiper {
		height: 80vh;
	}

	/* ============== Portfolio Preview  ============== */
	.portfolio-excerpt {
		font-size: 2em;
	}

	.portfolio-preview {
		grid-template-columns: 1.5fr 1fr;
		grid-gap: 3em;
	}

	.portfolio-list .portfolio-preview--outer:nth-of-type(2n) .portfolio-preview {
		display: grid;
		grid-template-columns: 1fr 1.5fr;
		align-items: center;
		margin-bottom: 2em;
	}

	.portfolio-preview-thumbnail {
		height: 450px;
		overflow: hidden;
	}

}