﻿	
	/* Inpiration 1x1 */
	
	.inspiration-hero-parallax{
		background-image: url("/media(77dd7e8a-f633-4d24-a7d0-7fff520d096c)");
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	@media (max-width: 768px){
		
		.inspiration-hero-parallax{
			background-image: url("/media(fe33f723-1271-48a4-95c0-ef09a7f8703b)");
		}
	}
	
	@media (max-width: 768px) {
		_::-webkit-full-page-media, _:future, .inspiration-hero-parallax{
			/* Safari specific styles */
			background-attachment: scroll;
		}
	}

	.inspiration-hero{
		position: relative;
		min-height: 450px;
		max-height: 800px;
		max-width: 2560px;
		margin: 0 auto;
	}
	
	.inspiration-hero img{
		width: 100%;
		max-height: inherit;
		min-height: inherit;
		object-fit: cover;
		object-position: top left;
	}

	.inspiration-hero .inspiration-content{
	    position: absolute;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
		width: 100%;
		height: 100%;
		padding: 0 0 60px;
		color: #fff;
		background: linear-gradient(15deg, rgba(34, 36, 38, 1) 0%, rgba(34, 36, 38, 0) 70%);
	}
	
	.inspiration-hero .inspiration-content div{
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
		width: 100%;
		height: 100%;
	}

	.inspiration-hero .inspiration-content h2{
	    font-size: 32px;
		font-weight: 400;
		line-height: 40px;
		margin: 0;
	}

	.inspiration-hero .inspiration-content p{
		font-size: 20px;
		line-height: 28px;
		margin: 8px 0 0;
	}

	.inspiration-hero .inspiration-content section{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 16px;
		flex-wrap: wrap;
		margin: 24px 0 0;
	}

	.inspiration-hero .inspiration-content section a{
		padding: 16px 20px;
		background-color: #FFF;
		border-radius: 8px;
		font-size: 16px;
		color: #222426;
		width: fit-content;
		text-decoration: none;
		cursor: pointer;
	}

	.inspiration-hero .inspiration-content section a:hover{
		background-color: #FFFFFFE6;
	}

	.inspiration-hero .inspiration-content section a:active{
		background-color: #FFFFFFE6;
	}
	
	@media (max-width: 1920px){
		
		.inspiration-hero{
			max-height: 650px;
		}
	}

	@media (max-width: 1864px){
		.inspiration-hero .inspiration-content div{
			max-width: fit-content;
		}
	}

	@media (max-width: 1200px){
		
		.inspiration-hero .inspiration-content{
			padding: 0 0 40px;
		}
	}

	@media (max-width: 992px){
		.inspiration-hero .inspiration-content h2{
			font-size: 26px;
			line-height: 32px;
		}

		.inspiration-hero .inspiration-content p{
			font-size: 16px;
			line-height: 24px;
		}
	}

	@media (max-width: 768px){
		
		.inspiration-hero .inspiration-content{
			padding: 0 0 20px;
		}
		
		.inspiration-hero .inspiration-content h2{
			font-size: 22px;
			line-height: 28px;
		}
	}
	
	/* 2x1 */

	.inspiration-container .swiper-grid.swiper-inspiration-2x1{
		grid-template-columns: repeat(2, 6fr);
	}
	
	@media (max-width: 768px){
		.inspiration-container .swiper-grid.swiper-inspiration-2x1{
			grid-template-columns: repeat(2, 280px);
		}
	}
	
	/* 3x1 + 4x1 + 5p */
	
	.inspiration-container .swiper-grid.swiper-inspiration-3x1{
		grid-template-columns: repeat(3, 4fr);
	}
	
	.inspiration-container .swiper-grid.swiper-inspiration-4x1{
		grid-template-columns: repeat(4, 3fr);
	}
	
	.inspiration-container .swiper-grid.swiper-inspiration-5p{
		grid-template-columns: repeat(20, 400px);
	}

	@media (max-width: 992px){
		
		.inspiration-container .swiper-grid.swiper-inspiration-3x1{
			grid-template-columns: repeat(3, 280px);
		}
		
		.inspiration-container .swiper-grid.swiper-inspiration-4x1{
			grid-template-columns: repeat(4, 280px);
		}
		
		.inspiration-container .swiper-grid.swiper-inspiration-5p{
			grid-template-columns: repeat(20, 280px);
		}
	}
	
	
	/* Inspiration grid */

	.inspiration-container h4{
		font-size: 18px;
		font-weight: 400;
		line-height: 24px;
		margin: 0 0 20px;
	}
	
	.inspiration-container .swiper-grid{
		display: grid;
		grid-template-columns: repeat(20, 400px);
		gap: 24px;
	}
	
	@media (max-width: 992px){
		.inspiration-container .swiper-grid{
			grid-template-columns: repeat(20, 280px);
			gap: 16px;
		}
	}

	.inspiration-container .single-inspiration{
		border-radius: 12px;
		position: relative;
		overflow: hidden;
		height: 100%;
	}
	
	.inspiration-container .single-inspiration:hover img{
		transform: scale(1.03);
	}
	
	.inspiration-container .single-inspiration img{
		transition: all 0.6s;
		height: 100%;
		object-fit: cover;
	}
	
	.inspiration-container .single-inspiration div{
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 20px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
		width: 100%;
		height: 100%;
		background: linear-gradient(0deg, rgba(25, 36, 38, 0.5) 0%, rgba(34, 36, 38, 0) 40%);
	}
	
	.inspiration-container .single-inspiration div h3{
		font-size: 22px;
		font-weight: 400;
		line-height: 28px;
		margin: 0;
		color: #fff;
	}

	.inspiration-container .single-inspiration div p{
		color: #fff;
	}

	@media (max-width: 700px){
		.inspiration-container .single-inspiration div p{
			display: none;
		}
	}
	
	.inspiration-container .single-inspiration div section{
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		background: transparent;
		border: solid 1px #ffffff4D;
		width: min-content;
		margin: 16px 0 0;
		padding: 11px 16px;
		border-radius: 50px;
	}
	
	.inspiration-container .single-inspiration div section:hover{
		background: #ffffff1A;
		border: solid 1px #fff;
	}

	.inspiration-container .single-inspiration div section:after{
		content: url("data:image/svg+xml; utf8,%3Csvg width='6.24' height='10.58' viewBox='0 0 4 6.783' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='Tracé_57' data-name='Tracé 57' d='M9.175,6.595a.6.6,0,0,0,0,.856l2.357,2.357L9.175,12.165a.606.606,0,0,0,.856.856l2.788-2.788a.6.6,0,0,0,0-.856L10.032,6.589A.611.611,0,0,0,9.175,6.595Z' transform='translate(-8.997 -6.416)' fill='%23FFF' /%3E%3C/svg%3E");
		height: 16px;
	}

	@media (max-width: 992px){
		.inspiration-container .single-inspiration div h3{
			font-size: 20px;
			line-height: 24px;
		}
	}