/* ==========================================================================
   CASA PIETRA — FAIXA DE DESTAQUES
   Figma node 6691:398 (desktop) e 6691:408 (mobile).
   ========================================================================== */

.highlights {
  background-color: var(--color-primary-tint-1);
  color: var(--color-primary-shade-1);
  padding-block: 32px;
}

.highlights__list {
  display: grid;
  gap: 32px;
  text-align: center;
}

.highlights__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* [DESVIO] O artboard mobile deixa o label em MAIÚSCULAS com ls 0.1em
   (Label SM), enquanto o desktop usa caixa normal com ls 0 (P SM).
   Decisão do cliente: o desktop vale nos dois. */
.highlights__label {
  margin: 0;
}

.highlights__value {
  margin: 0;
  text-transform: uppercase;
  /* Figma: whitespace-nowrap. "A 2 MIN. DO IGUATEMI" ocupa 257px em 24px e
     cabe nos 328px úteis de um viewport de 360. */
  white-space: nowrap;
}

/* ==========================================================================
   LG — 1366px: as três colunas
   Abaixo disso empilha. O item mais largo precisa de ~880px de viewport para
   caber em 3 colunas, e o Figma só entrega artboards em 360 e 1366 — mesmo
   ponto de troca usado no header.
   ========================================================================== */
@media (min-width: 1366px) {
  .highlights__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}