@layer components{.card{--_base:1.5rem;--_hfb:1rem;--_k:1;--_kh:1;--_pad:calc(var(--_base) * var(--_k));--_hf:calc(var(--_hfb) * var(--_kh));background-color:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;container-type:inline-size}.card-header{padding:var(--_pad,1.5rem);flex-direction:column;gap:.25rem;padding-bottom:0;display:flex}.card-title{font-size:var(--_title,1.25rem);letter-spacing:-.01em;margin:0;font-weight:600;line-height:1.25}.card-description{font-size:var(--_desc,.875rem);color:var(--muted-foreground);margin:0;line-height:1.6}.card-content{padding:var(--_pad,1.5rem)}.card-footer{padding:var(--_pad,1.5rem);align-items:center;gap:.5rem;padding-top:0;display:flex}.card-header+.card-footer{padding-top:var(--_hf,1rem)}.card-header:last-child{padding-bottom:var(--_pad,1.5rem)}.card-body{flex-direction:column;min-width:0;display:flex;&>.card-footer{margin-top:auto}}.card-media{aspect-ratio:16/9;margin:0;display:block;overflow:hidden;&>:is(img,video,picture,svg){object-fit:cover;width:100%;height:100%;display:block}&[data-inset]{margin:var(--_pad) var(--_pad) 0;border-radius:var(--radius-lg)}&[data-inset]:last-child{margin:0 var(--_pad) var(--_pad)}}.card:where([data-density=compact]){--_k:calc(2 / 3);--_kh:.75}.card:where([data-density=comfortable]){--_k:1;--_kh:1}.card:where([data-density=spacious]){--_k:calc(4 / 3);--_kh:1.5}.card{&[data-size=xs]{--_base:.75rem;--_hfb:.5rem;--_title:.875rem;--_desc:.75rem}&[data-size=sm]{--_base:1rem;--_hfb:.75rem;--_title:1rem;--_desc:.8125rem}&[data-size=md]{--_base:1.5rem;--_hfb:1rem;--_title:1.25rem;--_desc:.875rem}&[data-size=lg]{--_base:2rem;--_hfb:1.25rem;--_title:1.5rem;--_desc:1rem}&[data-size=xl]{--_base:2.5rem;--_hfb:1.5rem;--_title:1.875rem;--_desc:1.0625rem}&[data-variant=outline]{background-color:#0000}&[data-variant=dashed]{border-style:dashed;border-width:2px}&[data-variant=ghost]{background-color:#0000;border-color:#0000}&[data-variant=muted]{background-color:var(--muted);border-color:#0000}&[data-variant=elevated]{box-shadow:var(--shadow-lg);border-color:#0000}&[data-variant=primary]{background-color:var(--primary);color:var(--primary-foreground);border-color:#0000;& .card-description{color:color-mix(in oklch, var(--primary-foreground) 78%, transparent)}}&[data-variant=neutral]{background-color:color-mix(in oklch, var(--foreground) 78%, var(--background));color:var(--background);border-color:#0000;& .card-description{color:color-mix(in oklch, var(--background) 72%, transparent)}}&:is([data-variant=primary],[data-variant=neutral],[data-layout=overlay]) .btn:is([data-variant=ghost],[data-variant=link]){color:inherit;&:hover{background-color:color-mix(in oklch, currentColor 16%, transparent);color:inherit}}&[data-variant=glass]{background-color:color-mix(in oklch, var(--card) 55%, transparent);border-color:color-mix(in oklch, var(--foreground) 14%, transparent);backdrop-filter:blur(16px)saturate(1.4);box-shadow:0 8px 32px -8px color-mix(in oklch, var(--foreground) 22%, transparent)}&[data-align=center]{text-align:center;& .card-header{align-items:center}& .card-footer{justify-content:center}}&[data-layout=side]{grid-template-columns:minmax(0,2fr) minmax(0,3fr);display:grid;&>.card-media{aspect-ratio:auto;min-height:100%}}&[data-layout=side]:has(>.card-body:first-child){grid-template-columns:minmax(0,3fr) minmax(0,2fr)}&[data-layout=auto]{flex-wrap:wrap;display:flex;&>.card-media{aspect-ratio:auto;flex:12rem;min-height:10rem}&>.card-body{flex:999 18rem}}&[data-layout=overlay]{color:#fff;border-color:#0000;display:grid;&>*{grid-area:1/1}&>.card-media{aspect-ratio:auto;min-height:14rem}&>.card-body{z-index:1;background:linear-gradient(#0000,oklch(0% 0 0/.35) 35%,oklch(0% 0 0/.78));align-self:end;padding-top:3rem}& .card-description{color:oklch(100% 0 0/.82)}}&:is(a,[data-interactive]){text-decoration:none;transition:translate .15s,box-shadow .15s,border-color .15s;display:block;&:hover{box-shadow:var(--shadow-md);border-color:color-mix(in oklch, var(--foreground) 22%, var(--border));translate:0 -2px}&:focus-visible{outline:2px solid var(--ring);outline-offset:2px}}&:is(a,[data-interactive])[data-layout=auto]{display:flex}&:is(a,[data-interactive]):is([data-layout=side],[data-layout=overlay]){display:grid}&:is(label){cursor:pointer;transition:border-color .15s,box-shadow .15s;display:block;&:has(:is(input[type=checkbox],input[type=radio]):checked){border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}&:has(input:focus-visible){outline:2px solid var(--ring);outline-offset:2px}&:has(input:disabled){cursor:not-allowed;opacity:.55}}}@container (width<=280px){.card:not([data-size]) :is(.card-header,.card-content,.card-footer){--_pad:1rem}.card:not([data-size]) .card-title{font-size:1rem}}@media (prefers-reduced-motion:reduce){.card:is(a,[data-interactive]){transition:none}.card:is(a,[data-interactive]):hover{translate:none}}@media (forced-colors:active){.card:is(label):has(:is(input[type=checkbox],input[type=radio]):checked){border:2px solid highlight}}}