.liczby {

}

.liczby .container {
	width: 100%;
	max-width: 100%;
}

.liczby .flex-container {
	
}

.liczby .flex-container div.liczba {
	width: calc(100% / 5);
	padding: 100px 0;
}

.liczby .flex-container div.liczba span.liczba {
	display: block;
	color: #FFF;

	text-align: center;
	leading-trim: both;

	text-edge: cap;
	font-family: Inter;
	font-size: 96px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%; /* 105.6px */
	letter-spacing: -5.76px;
	margin: 0 auto;
}

.liczby .flex-container div.liczba span.liczba span {
	display: inline-block;
	color: #FFF;

	text-align: center;
	leading-trim: both;

	text-edge: cap;
	font-family: Inter;
	font-size: 96px;
	font-style: normal;
	font-weight: 400;
	line-height: 110%; /* 105.6px */
	letter-spacing: -5.76px;
}

.liczby .flex-container div.liczba span.desc {
	display: block;
	color: #FFF;
	margin: 32px auto 0 auto;
	text-align: center;
	font-family: Inter;
	font-size: 20px;
	font-style: normal;
	font-weight: 300;
	line-height: 135%; /* 27px */
	letter-spacing: -0.4px;
}

.liczby .flex-container div.liczba:not(:last-of-type) {
	border-right: 1px solid #FFF;
}

/* =========================
   MOBILE FIRST OVERRIDES
   ========================= */
@media (max-width: 768px) {
  /* layout -> siatka 2 kolumny */
  .liczby .container { max-width: 100%; padding: 0 16px; }
  .liczby .flex-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
  }
d 

  /* Bordery w siatce 2xN: prawa krawędź tylko dla lewej kolumny */
  .liczby .flex-container .liczba:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.6);
  }
  /* Dolna krawędź dla wszystkich poza ostatnim rzędem (ostatnie 2 elementy) */
  .liczby .flex-container .liczba {
    border-bottom: 1px solid rgba(255,255,255,0.6);
  }
  .liczby .flex-container .liczba:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .liczby .flex-container div.liczba {
  	padding: 50px 0;
  }
}

/* Telefony „ciasne” – ok. 480px */
@media (max-width: 480px) {
  .liczby .container { padding: 0; }

  .liczby .flex-container div.liczba:not(:last-of-type) {
  	border-bottom: 1px solid #fff !important;
  }

  .liczby .flex-container div.liczba {
    border: none !important;
  }

  .liczby .flex-container { margin: 0 -6px; }

  .liczby .flex-container .liczba {
    width: 100% !important;       /* 1 kolumna */
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.6);
  }
  .liczby .flex-container .liczba:last-child {
    border-bottom: none;
  }

  .liczby .flex-container div.liczba span.desc {
    font-size: 20px;
    margin-top: 32px;
  }
}

/* =========================
   DROBNE DOPRACOWANIA
   ========================= */

/* Gdy elementów jest dużo/mało, siatka i tak zadziała,
   bo szerokości narzucamy w media queries. Desktopowe
   width: calc(100%/5) jest nadpisywane przez !important. */

/* Wygaszamy „miganie” na dotyku */
@media (hover:hover) and (pointer:fine) {
  .liczby .flex-container .liczba:hover { filter: brightness(1.02); }
}

/* Szanuj preferencje „mniej ruchu” – możesz też dodać guard w JS */
@media (prefers-reduced-motion: reduce) {
  .liczby * { transition: none !important; }
}