/*
--------------------------------------
Container
--------------------------------------
*/

.counter-container {
	display: flex;
	justify-content: center; /* centre horizontalement */
	flex-wrap: wrap; /* permet aux éléments de passer à la ligne */
	grid-gap: calc(20px + (250 - 20) * ((100vw - 320px) / (1920 - 320)));
	padding: 4em 0;
	overflow: hidden;
}

/* Version mobile */
@media (max-width: 768px) {
	.counter-container {
		flex-direction: column; /* aligne les éléments verticalement */
		align-items: center;    /* centre chaque élément horizontalement */
	}

	.counter-container > * {
		width: 100%;             /* prend toute la largeur du conteneur */
		max-width: 600px;        /* limite optionnelle pour éviter que ce soit trop large */
	}
}

/*
--------------------------------------
Elements
--------------------------------------
*/

.counter-element {
	line-height: 1;
}

/*
--------------------------------------
Content
--------------------------------------
*/

.counter-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	padding-bottom: 2em;
}

.counter-number-unit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	.counter {
		font-family: var(--e-global-typography-primary-font-family);
	}

}

/*Name*/

.counter-name {
	display: flex;
	flex-direction: column;
	font-family: var(--e-global-typography-text-font-family);
	font-size: 16.8px;
	font-weight: 400;
	color: #ffffff;
	line-height: 20px;
	letter-spacing: 0.84px;
	text-transform: uppercase;
	opacity: .8;
	margin-top: 10px;
}

/*Number*/

.counter-elem {
	font-size: calc(32px + (72 - 32) * ((100vw - 320px) / (1920 - 320)));
	font-weight: 700;
	color: #fff;
}