Define @container breakpoints that respond to a component's own width.
.card { container-type: inline-size; }
@container (min-width: 240px) { /* sm */ }
@container (min-width: 384px) { /* md */ }
@container (min-width: 576px) { /* lg */ }
@container (min-width: 768px) { /* xl */ }