One Card, Two Parents

The identical card markup stacks in the narrow rail and goes horizontal when its container is at least 28rem wide.

Mossy forest path

Trail notes

Goes side-by-side when this container is wide enough — even if the viewport breakpoint has not changed.

Read more

Important CSS

@container slot (width >= 28rem) {
  .cq-card {
    grid-template-columns: 10rem 1fr;
    align-items: center;
  }
}