/* ==========================================================================
   /tintas/cores — famílias de cor
   ========================================================================== */

.ipe-cores__aviso {
  border-color: var(--cor-borda-forte);
}

.ipe-cores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--gutter);
  margin-block-start: var(--e-16);
}

.ipe-cor-familia {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  overflow: hidden;
  transition: border-color var(--dur-rapida) var(--easing);
}

.ipe-cor-familia:hover,
.ipe-cor-familia:focus-within {
  border-color: var(--cor-borda-forte);
}

/* Cinco faixas sólidas, sem degradê entre elas: são tons distintos, e um
   degradê sugeriria uma continuidade que a tinta não tem. */
.ipe-cor-familia__tons {
  display: flex;
  height: var(--e-16);
}

.ipe-cor-familia__tom {
  flex: 1;
}

.ipe-cor-familia__corpo {
  padding: var(--e-4);
}

.ipe-cor-familia__nome {
  font-family: var(--fonte-corpo);
  font-stretch: var(--largura-corpo);
  letter-spacing: 0;
  font-size: var(--step-1);
  font-weight: var(--peso-forte);
  line-height: 1.3;
}

.ipe-cor-familia__texto {
  margin-block-start: var(--e-2);
  font-size: 0.875rem;
  color: var(--cor-texto-2);
}

.ipe-cor-familia__acao {
  margin-block-start: var(--e-2);
}