#kpis {}
@media (min-width: 900px) { #kpis { margin: 100px 0; } }
@media (max-width: 899.99px) { #kpis { margin: 75px 0; } }

/*------------------------------------------------------------------------*/

#kpis > .content-wrapper {
	display: flex;
	flex-direction: column;
}
@media (min-width: 900px)	 { #kpis > .content-wrapper { row-gap: 65px; } }
@media (max-width: 899.99px) { #kpis > .content-wrapper { row-gap: 35px; } }

/*------------------------------------------------------------------------*/

#kpis > .content-wrapper > header {
	text-align: center;
}
#kpis > .content-wrapper > header > * {
	max-width: 650px;
	margin: 0 auto;
	
	font-weight: 500;
}
#kpis > .content-wrapper > header > :not(:last-child) { margin-bottom: 25px; }
#kpis > .content-wrapper > header > .hook {}
#kpis > .content-wrapper > header > .title {
	max-width: 550px;
	line-height: 100%;
}
#kpis > .content-wrapper > header > .description {}
@media (min-width: 900px) {
	#kpis > .content-wrapper > header {}
	#kpis > .content-wrapper > header > .hook {
		line-height: 25px;
		font-size: 20px;
	}
	#kpis > .content-wrapper > header > .title {
		font-size: 50px;
	}
	#kpis > .content-wrapper > header > .description {
		line-height: 25px;
		font-size: 22px;
	}
}
@media (max-width: 899.99px) {
	#kpis > .content-wrapper > header {}
	#kpis > .content-wrapper > header > .hook {
		line-height: 25px;
		font-size: 20px;
	}
	#kpis > .content-wrapper > header > .title {
		font-size: 36px;
	}
	#kpis > .content-wrapper > header > .description {
		line-height: 130%;
		font-size: 18px;
	}
}

/*------------------------------------------------------------------------*/

@media (min-width: 900px) {
	#kpis > .content-wrapper > .grid {
		display: grid;
		grid-template-areas: 
			"media-1	kpis-1	media-2	kpis-2"
			"media-1	kpis-3	kpis-3	kpis-2"
			"kpis-4		kpis-5	media-3	media-3";
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(3, 250px);
		gap: 10px;
	}
	#kpis > .content-wrapper > .grid > .swiper {
		height: 100%; width: 100%;
		
		border-radius: 15px;
	}
	
	#kpis > .content-wrapper > .grid > .media-slider-1 { grid-area: media-1; }
	#kpis > .content-wrapper > .grid > .media-slider-2 { grid-area: media-2; }
	#kpis > .content-wrapper > .grid > .media-slider-3 { grid-area: media-3; }
	
	#kpis > .content-wrapper > .grid > .kpi-slider .swiper-slide {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 30px;
		
		text-align: center;
		font-weight: 500;
	}
	#kpis > .content-wrapper > .grid > .kpi-slider .swiper-slide > .number { line-height: 40px; }
	#kpis > .content-wrapper > .grid > .kpi-slider .swiper-slide > .number > .prefix { font-size: 30px; }
	#kpis > .content-wrapper > .grid > .kpi-slider .swiper-slide > .number > .value { font-size: 60px; }
	#kpis > .content-wrapper > .grid > .kpi-slider .swiper-slide > .number > .unit { font-size: 30px; }
	#kpis > .content-wrapper > .grid > .kpi-slider .swiper-slide > .description {
		max-width: 250px;
		margin: 5px auto 0;
		
		line-height: 130%;
		font-size: 20px;
	}
	
	#kpis > .content-wrapper > .grid > .kpi-slider-1 {
		grid-area: kpis-1;
		background-color: #D5ED99;
		color: #000;
	}
	#kpis > .content-wrapper > .grid > .kpi-slider-2 {
		grid-area: kpis-2;
		background-color: #E9C8D2;
		color: #000;
	}
	#kpis > .content-wrapper > .grid > .kpi-slider-3 {
		grid-area: kpis-3;
		background-color: #BCD5E4;
		color: #000;
	}
	#kpis > .content-wrapper > .grid > .kpi-slider-4 {
		grid-area: kpis-4;
		background-color: #000;
		color: #FFF;
	}
	#kpis > .content-wrapper > .grid > .kpi-slider-5 {
		grid-area: kpis-5;
		background-color: #364A67;
		color: #FFF;
	}
}
@media (max-width: 899.99px) {
	#kpis > .content-wrapper > .swiper {
		height: 300px;
		margin: 0 -25px;
		padding: 0 0 32px;
	}
	#kpis > .content-wrapper > .swiper > .swiper-scrollbar {
		--swiper-scrollbar-bottom: 0;
		--swiper-scrollbar-sides-offset: 30px;
		--swiper-scrollbar-size: 6px;
		
		--swiper-scrollbar-bg-color: rgba(255,255,255,.1);
		--swiper-scrollbar-drag-bg-color: #D5ED99;
		--swiper-scrollbar-border-radius: 3px;
	}
	
	#kpis > .content-wrapper > .swiper .swiper-slide {
		width: 320px; overflow: hidden;
		border-radius: 30px;
	}
	#kpis > .content-wrapper > .swiper .slide-1 { background-color: #D5ED99; color: #000; }
	#kpis > .content-wrapper > .swiper .slide-2 { background-color: #E9C8D2; color: #000; }
	#kpis > .content-wrapper > .swiper .slide-3 { background-color: #BCD5E4; color: #000; }
	#kpis > .content-wrapper > .swiper .slide-4 { background-color: #000000; color: #FFF; }
	#kpis > .content-wrapper > .swiper .slide-5 { background-color: #364A67; color: #FFF; }
	
	#kpis > .content-wrapper > .swiper .kpi {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 30px;
		
		text-align: center;
		font-weight: 500;
	}
	#kpis > .content-wrapper > .swiper .kpi > .number { line-height: 40px; }
	#kpis > .content-wrapper > .swiper .kpi > .number > .prefix { font-size: 25px; }
	#kpis > .content-wrapper > .swiper .kpi > .number > .value { font-size: 50px; }
	#kpis > .content-wrapper > .swiper .kpi > .number > .unit { font-size: 25px; }
	#kpis > .content-wrapper > .swiper .kpi > .description {
		max-width: 250px;
		margin: 5px auto 0;
		
		line-height: 130%;
		font-size: 20px;
	}
}