.cq-resizable{container-type:inline-size;container-name:card;resize:horizontal;overflow:auto;min-width:16rem;max-width:100%;border:1px dashed #9ca3af}.cq-card,.cq-resizable{padding:1rem;border-radius:.5rem}.cq-card{display:grid;gap:1rem;background:#f3f4f6;color:#171717}.cq-card__media{aspect-ratio:16/9;border-radius:.375rem;background:linear-gradient(135deg,#93c5fd,#c4b5fd)}.cq-card__title{font-size:1.125rem;font-weight:700}.cq-card__layout:after{content:"stacked (container < 28rem)";font-family:var(--font-geist-mono),monospace;font-size:.75rem;color:#6b7280}@container card (min-width: 28rem){.cq-card{grid-template-columns:14rem 1fr;align-items:center}.cq-card__layout:after{content:"side by side (container >= 28rem)"}}.cq-fluid{container-type:inline-size;resize:horizontal;overflow:auto;min-width:12rem;max-width:100%;padding:1rem;border:1px dashed #9ca3af;border-radius:.5rem}.cq-fluid__headline{font-size:clamp(1rem,8cqi,3rem);font-weight:700;line-height:1.1}.cq-tone{--tone:info}.cq-tone[data-tone=warn]{--tone:warn}.cq-badge{display:inline-block;border-radius:999px;padding:.25rem .75rem;font-size:.875rem;font-weight:600;background:#dbeafe;color:#1e40af}@container style(--tone: warn){.cq-badge{background:#fef3c7;color:#92400e}}.cq-attr{--attr-terracotta:oklch(52% 0.16 35);--attr-sage:oklch(48% 0.11 150);--attr-indigo:oklch(48% 0.16 265);inline-size:100%;margin-block-end:1.5rem}.cq-attr__controls{display:grid;grid-template-columns:max-content 1fr;align-items:center;gap:.5rem 1rem;margin-block-end:1rem;input{&[type=range]{width:clamp(8rem,100%,16rem)}}}.cq-attr__controls code{font-family:var(--font-geist-mono),monospace;font-size:.875rem}.cq-attr__accents,.cq-attr__check{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}.cq-attr__accents label{display:inline-flex;align-items:center;gap:.25rem}.cq-attr__accents input{appearance:none;width:1rem;height:1rem;border-radius:50%;border:2px solid white;background-color:var(--accent-color);&[value=terracotta]{--accent-color:var(--attr-terracotta)}&[value=sage]{--accent-color:var(--attr-sage)}&[value=indigo]{--accent-color:var(--attr-indigo)}&:checked{box-shadow:0 0 0 2px var(--accent-color)}}@media (forced-colors:active){.cq-attr__accents input{appearance:auto}}.cq-attr__frame{container-type:inline-size;container-name:attr-grid;resize:horizontal;overflow:auto;min-width:16rem;max-width:100%;padding:1rem;border:1px dashed #9ca3af;border-radius:.5rem}.fluid-grid{--featured:attr(data-featured type(<custom-ident>),false);--accent:attr(data-accent type(<custom-ident>),terracotta);@supports not (width:attr(x type(<length>),0px)){--featured:false;--accent:terracotta;&[data-featured=true]{--featured:true}&[data-accent=sage]{--accent:sage}&[data-accent=indigo]{--accent:indigo}}display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));grid-template-columns:repeat(auto-fit,minmax(min(attr(data-min-size type(<length>),220px),100%),1fr));gap:2cqi;gap:attr(data-gap cqi,2cqi)}@container style(--featured: true){@container attr-grid (min-width: 48rem){.card:first-child{grid-column:span 2;grid-row:span 2}}}@container style(--accent: terracotta){.card{--accent-color:var(--attr-terracotta)}}@container style(--accent: sage){.card{--accent-color:var(--attr-sage)}}@container style(--accent: indigo){.card{--accent-color:var(--attr-indigo)}}.card{--card-accent:var(--accent-color,var(--attr-terracotta));display:flex;flex-direction:column;overflow:hidden;border-top:3px solid var(--card-accent);border-radius:.5rem;background:#f3f4f6;color:#171717;img{flex:1;inline-size:100%;min-block-size:8rem;object-fit:cover}.tag{font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--card-accent)}.tag,h3{font-weight:700}h3{font-size:1.125rem}}.card-content{padding:.75rem 1rem 1rem}.cq-attr-unsupported{display:none}@supports not (width:attr(data-x type(<length>),1px)){.cq-attr-unsupported{display:block}}.cq-unsupported{display:none}@supports not (container-type:inline-size){.cq-unsupported{display:block}}