El componente se adapta al hueco que ocupa, no al tamaño total de pantalla.

• Responsive por componente, no por página.
• Menos acoplamiento entre layout global y estilos internos.
• Más reutilización en design systems.

Primero defines el contenedor; después escribes reglas condicionales.

• inline-size: evalúa ancho (caso más habitual).
• size: evalúa ancho y alto (más estricto y menos usado).
• container-name: útil para evitar ambigüedad en layouts complejos.

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

.card {
  display: grid;
  gap: 0.75rem;
}

@container card (width >= 520px) {
  .card {
    grid-template-columns: 140px 1fr;
    align-items: center;
  }
}

Escalado fluido relativo al contenedor.

.widget {
  container-type: inline-size;
}

.widget__title {
  font-size: clamp(1rem, 3cqi, 1.8rem);
}