.block-whats-new { background-image: url("../../../../../themes/custom/extruflex/css/img/bg-whats-new-2.png"); }
.homepage-titlenew h2 { padding: 40px 0 20px; }
.block-whats-new {
	.swiper-slide { height: auto; padding-bottom: 20px; display: flex; flex-direction: column; gap: 20px; background: #fff; border-radius: 20px; overflow:hidden; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);}
	img { height: 240px; object-fit: cover; object-position: center; }
	.card-whats-new-title, .card-whats-new-summary { padding: 0 20px; }
	.card-whats-new-title a { font-size: var(--fs-h5); }
	.card-whats-new-summary {	display: flex; flex-direction: column; gap: 10px; height: 100%; color: var(--clr-gray-500); }
	.card-whats-new-summary p:last-child { margin-top: auto; font-weight: 600; color: var(--clr-blue-700) }
}

.homepage-video {
	position: relative;
	margin-top: 0 !important;
	
	.visually-hidden + div, video { height: 45vh; width: 100%; }
	
	video { object-fit: cover; object-position: center; }
	
	p { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); padding: 20px; border-radius: 20px; color: #fff; font-weight: 500; background-color: rgba(0, 0, 0, 0.3); }
	@media (min-width: 640px) { p {padding: 25px; border-radius: 30px; font-size: var(--fs-h6); } }
	
	@media (min-width: 768px) { p {padding: 25px; font-size: var(--fs-h5); } }
	
	@media (min-width: 1024px) { .visually-hidden + div, video { height: 575px } p {padding: 30px; border-radius: 40px; font-size: var(--fs-h4);}  }
}
    
.homepage-statement {
	container: statement / inline-size;
	
	.layout-section.internal-container.gap-8 { gap: 0!important }
	
	.region-1 { position: relative; padding: 40px; background: #fdf8f2; border-radius: 40px; }
	.region-1 p { font-size: var(--fs-h6) }
	.region-1 p:first-child { margin-bottom: var(--fs-h6) }
	
	.region-1 > div { width: 120px; position: absolute; bottom: -15px; right: -15px; z-index: 10;}
	
	.region-2 div { height: 100%; }
	.region-2 > div > div > div > div:last-child > div:last-child { display: grid; }
	video { width: 50%; place-self: center; clip-path: inset(4px 4px 4px 4px); background: #fff; }

	@media (min-width: 1024px) {
		.region-1 > div { width: 150px; position: absolute; bottom: -20px; right: -40px; z-index: 10;}
		video { width: 60%; }
	}
	
	@media (min-width: 1280px) {
		.region-1 > div { width: 180px; position: absolute; bottom: -60px; right: -40px; z-index: 10;}
	}
	
}

.homepage-howdoyouuse {
	h2 { color: var(--clr-blue-800); text-align: center; }
	
	.row-howdoyouuse { display: flex; flex-direction: column; margin: 0 auto; }
	
	.item-howdoyouuse {
	  height: 280px;
	  width: 280px;
	  border-radius: 40px;
	  border: 10px solid #e1eef8;
	  overflow: hidden;
	  background-size: cover;
	  background-position: 50%;
	  background-repeat: no-repeat;
	  transition: all 0.3s ease-in-out;
	}
	
	
	
	@media (min-width: 768px) {
		.row-howdoyouuse { flex-direction: row; }
		.item-howdoyouuse { height: 240px; width: 240px; }
	}
	
	@media (min-width: 1024px) {
		.item-howdoyouuse:hover { width: 80%; }
		.item-howdoyouuse { height: 300px; width: 300px; }
	}
	
	
	@media (min-width: 1280px) {
		.item-howdoyouuse { height: 340px; width: 340px; }
	}
	
	
	.item-howdoyouuse a {
	  display: flex;
	  width: 100%;
	  height: 100%;
	}
	
	.title-howdoyouuse {
	  align-self: flex-end;
	  width: 100%;
	  height: fit-content;
	  padding: 10px 10px 10px 20px;
	  color: #fff;
	  font-size: var(--fs-h6);
	  font-weight: 500;
	  background-color: rgba(255, 255, 255, 0.3);
	}
	
	.bg-use-1 { background-image: url("../../../../../themes/custom/extruflex/css/howdoyouuse/use-1.jpg"); }
	.bg-use-2 { background-image: url("../../../../../themes/custom/extruflex/css/howdoyouuse/use-2.jpg"); }
	.bg-use-3 { background-image: url("../../../../../themes/custom/extruflex/css/howdoyouuse/use-3.jpg"); }
	.bg-use-4 { background-image: url("../../../../../themes/custom/extruflex/css/howdoyouuse/use-4.jpg"); }
	.bg-use-5 { background-image: url("../../../../../themes/custom/extruflex/css/howdoyouuse/use-5.jpg"); }
	.bg-use-6 { background-image: url("../../../../../themes/custom/extruflex/css/howdoyouuse/use-6.jpg"); }
	.bg-use-7 { background-image: url("../../../../../themes/custom/extruflex/css/howdoyouuse/use-7.jpg"); }
	.bg-use-8 { background-image: url("../../../../../themes/custom/extruflex/css/howdoyouuse/use-8.jpg"); }
	.bg-use-9 { background-image: url("../../../../../themes/custom/extruflex/css/howdoyouuse/use-9-2.png"); 
	  container: card-9 / inline-size; }
	  
	.bg-use-9 {
		pointer-events: none;
		display: grid;
		place-items: center;
		
		h3 {
		  color: var(--clr-blue-900);
		  text-wrap: balance;
		  text-align: center;
		  font-weight: 900;
		  cursor: default;
		}
		
		@container card-9 (min-width: 0) {
		  h3 {
		  	padding: 5px;
		    /*font-size: var(--fs-h5);*/
		    font-size: max(1em, 10cqw);
		  }
		}
	}
}
.homepage-commitments {
	background-image: var(--blue-gradient);
	
	padding: 40px 0;
	
	h2, p { color: #fff; text-align: center; }
	h2 + div { display: grid; grid-template-columns: repeat(5, 1fr); }
	h2 { font-size: var(--fs-h3); margin-bottom: 30px; font-weight: 700; }
	img { height: 40px; width: auto; margin: 20px auto 10px; }
	
	@media (min-width: 1024px) { padding: 40px 100px; img { height: 70px; } p { font-size: var(--fs-h6); } }
	@media (min-width: 1280px) { padding: 40px 200px 60px; img { height: 80px; } p { font-size: var(--fs-h5); } }
	
	
}