@layer components{.card[data-card=adaptive]{gap:var(--bf-space-4);grid-template-columns:1fr;display:grid}.card[data-card=adaptive]>[data-card-media]{border-radius:var(--bf-radius);background:var(--bf-surface-alt);min-height:6rem}@container (width>=40rem){.card[data-card=adaptive]{grid-template-columns:40% 1fr;align-items:center}}.card[data-card=adaptive]>:where(header){font-size:var(--bf-type-cqi-lg)}:where(div,section,main,aside,article,header,footer):has(>.card[data-card=adaptive]){container-type:inline-size}}