flyonui/components/card.css

The easiest, free and open-source Tailwind CSS component library with semantic classes.

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.card{border-radius:var(--radius-box);--tw-border-style:solid;border-style:solid;border-color:color-mix(in oklab,var(--color-base-content)20%,transparent);background-color:var(--color-base-100);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);color:color-mix(in oklab,var(--color-base-content)80%,transparent);--tw-outline-style:none;box-shadow:var(--card-shadow,0 1px 3px 0 color-mix(in oklab,var(--color-base-300)20%,#0000),0 1px 2px -1px color-mix(in oklab,var(--color-base-300)20%,#0000));border-width:var(--card-border,0px);outline-style:none;flex-direction:column;display:flex;position:relative;&:focus{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline-offset:2px;outline:2px solid #0000}}& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-end-radius:unset;border-end-start-radius:unset;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:unset;border-end-end-radius:inherit;border-end-start-radius:inherit;overflow:hidden}&:where(.card-border){border:var(--border)solid color-mix(in oklab,var(--color-base-content)20%,transparent)}&.image-full{display:grid;&:before{border-radius:var(--radius-box);background-color:var(--color-neutral);opacity:.75;content:"";grid-row-start:1;grid-column-start:1;position:relative}&>*{grid-row-start:1;grid-column-start:1}&>.card-body{color:var(--color-neutral-content);position:relative}& :where(figure){border-radius:inherit;overflow:hidden}&>figure img{object-fit:cover;height:100%}}& figure{justify-content:center;align-items:center;display:flex}&:has(>input:is(input[type=checkbox],input[type=radio])){cursor:pointer;user-select:none}&:has(>:checked){outline:2px solid}}.card-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-base-content)}.card-header{border-top-left-radius:var(--radius-box);border-top-right-radius:var(--radius-box);padding:var(--card-p,1.5rem)}.card-body{padding:var(--card-p,1.5rem);flex-direction:column;flex:auto;gap:.5rem;display:flex;& :where(p){flex-grow:1}}.card-actions{flex-wrap:wrap;align-items:flex-start;gap:.75rem;display:flex}.card-footer{border-bottom-right-radius:var(--radius-box);border-bottom-left-radius:var(--radius-box);padding:var(--card-p,1.5rem)}:where(.card-header)+.card-body,:where(.card-body)+.card-footer{padding-top:0}.card-xs{--card-p:.5rem;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));& .card-title{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}.card-sm{--card-p:1rem;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));& .card-title{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}.card-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--card-p:1.5rem;& .card-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}.card-lg{--card-p:2rem;font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));& .card-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}.card-xl{--card-p:2.5rem;font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));& .card-title{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}}.card .card-alert{border-radius:0;&:first-child{border-top-left-radius:var(--radius-box);border-top-right-radius:var(--radius-box)}&:last-child{border-bottom-right-radius:var(--radius-box);border-bottom-left-radius:var(--radius-box)}}.card-side{flex-direction:row;align-items:stretch;& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:unset;border-end-end-radius:unset;border-end-start-radius:inherit;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:inherit;border-end-end-radius:inherit;border-end-start-radius:unset;overflow:hidden}& figure>*{max-width:unset}& :where(figure>*){object-fit:cover;width:100%;height:100%}}.card-group{border-radius:var(--radius-box);box-shadow:var(--card-shadow,0 1px 3px 0 color-mix(in oklab,var(--color-base-300)20%,#0000),0 1px 2px -1px color-mix(in oklab,var(--color-base-300)20%,#0000));border-color:color-mix(in oklab,var(--color-base-content)30%,transparent);border-width:var(--card-border,0px);overflow:hidden;&>.card{--card-shadow:none;--card-border:0;border-radius:0;flex:1 0}}@media (width>=640px){.sm\:card{border-radius:var(--radius-box);--tw-border-style:solid;border-style:solid;border-color:color-mix(in oklab,var(--color-base-content)20%,transparent);background-color:var(--color-base-100);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);color:color-mix(in oklab,var(--color-base-content)80%,transparent);--tw-outline-style:none;box-shadow:var(--card-shadow,0 1px 3px 0 color-mix(in oklab,var(--color-base-300)20%,#0000),0 1px 2px -1px color-mix(in oklab,var(--color-base-300)20%,#0000));border-width:var(--card-border,0px);outline-style:none;flex-direction:column;display:flex;position:relative;&:focus{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline-offset:2px;outline:2px solid #0000}}& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-end-radius:unset;border-end-start-radius:unset;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:unset;border-end-end-radius:inherit;border-end-start-radius:inherit;overflow:hidden}&:where(.card-border){border:var(--border)solid color-mix(in oklab,var(--color-base-content)20%,transparent)}&.image-full{display:grid;&:before{border-radius:var(--radius-box);background-color:var(--color-neutral);opacity:.75;content:"";grid-row-start:1;grid-column-start:1;position:relative}&>*{grid-row-start:1;grid-column-start:1}&>.card-body{color:var(--color-neutral-content);position:relative}& :where(figure){border-radius:inherit;overflow:hidden}&>figure img{object-fit:cover;height:100%}}& figure{justify-content:center;align-items:center;display:flex}&:has(>input:is(input[type=checkbox],input[type=radio])){cursor:pointer;user-select:none}&:has(>:checked){outline:2px solid}}.sm\:card-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-base-content)}.sm\:card-header{border-top-left-radius:var(--radius-box);border-top-right-radius:var(--radius-box);padding:var(--card-p,1.5rem)}.sm\:card-body{padding:var(--card-p,1.5rem);flex-direction:column;flex:auto;gap:.5rem;display:flex;& :where(p){flex-grow:1}}.sm\:card-actions{flex-wrap:wrap;align-items:flex-start;gap:.75rem;display:flex}.sm\:card-footer{border-bottom-right-radius:var(--radius-box);border-bottom-left-radius:var(--radius-box);padding:var(--card-p,1.5rem)}:where(.card-header)+.card-body,:where(.card-body)+.card-footer{padding-top:0}.sm\:card-xs{--card-p:.5rem;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));& .card-title{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}.sm\:card-sm{--card-p:1rem;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));& .card-title{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}.sm\:card-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--card-p:1.5rem;& .card-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}.sm\:card-lg{--card-p:2rem;font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));& .card-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}.sm\:card-xl{--card-p:2.5rem;font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));& .card-title{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}}.sm\:card .card-alert{border-radius:0;&:first-child{border-top-left-radius:var(--radius-box);border-top-right-radius:var(--radius-box)}&:last-child{border-bottom-right-radius:var(--radius-box);border-bottom-left-radius:var(--radius-box)}}.sm\:card-side{flex-direction:row;align-items:stretch;& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:unset;border-end-end-radius:unset;border-end-start-radius:inherit;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:inherit;border-end-end-radius:inherit;border-end-start-radius:unset;overflow:hidden}& figure>*{max-width:unset}& :where(figure>*){object-fit:cover;width:100%;height:100%}}.sm\:card-group{border-radius:var(--radius-box);box-shadow:var(--card-shadow,0 1px 3px 0 color-mix(in oklab,var(--color-base-300)20%,#0000),0 1px 2px -1px color-mix(in oklab,var(--color-base-300)20%,#0000));border-color:color-mix(in oklab,var(--color-base-content)30%,transparent);border-width:var(--card-border,0px);overflow:hidden;&>.card{--card-shadow:none;--card-border:0;border-radius:0;flex:1 0}}}@media (width>=768px){.md\:card{border-radius:var(--radius-box);--tw-border-style:solid;border-style:solid;border-color:color-mix(in oklab,var(--color-base-content)20%,transparent);background-color:var(--color-base-100);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);color:color-mix(in oklab,var(--color-base-content)80%,transparent);--tw-outline-style:none;box-shadow:var(--card-shadow,0 1px 3px 0 color-mix(in oklab,var(--color-base-300)20%,#0000),0 1px 2px -1px color-mix(in oklab,var(--color-base-300)20%,#0000));border-width:var(--card-border,0px);outline-style:none;flex-direction:column;display:flex;position:relative;&:focus{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline-offset:2px;outline:2px solid #0000}}& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-end-radius:unset;border-end-start-radius:unset;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:unset;border-end-end-radius:inherit;border-end-start-radius:inherit;overflow:hidden}&:where(.card-border){border:var(--border)solid color-mix(in oklab,var(--color-base-content)20%,transparent)}&.image-full{display:grid;&:before{border-radius:var(--radius-box);background-color:var(--color-neutral);opacity:.75;content:"";grid-row-start:1;grid-column-start:1;position:relative}&>*{grid-row-start:1;grid-column-start:1}&>.card-body{color:var(--color-neutral-content);position:relative}& :where(figure){border-radius:inherit;overflow:hidden}&>figure img{object-fit:cover;height:100%}}& figure{justify-content:center;align-items:center;display:flex}&:has(>input:is(input[type=checkbox],input[type=radio])){cursor:pointer;user-select:none}&:has(>:checked){outline:2px solid}}.md\:card-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-base-content)}.md\:card-header{border-top-left-radius:var(--radius-box);border-top-right-radius:var(--radius-box);padding:var(--card-p,1.5rem)}.md\:card-body{padding:var(--card-p,1.5rem);flex-direction:column;flex:auto;gap:.5rem;display:flex;& :where(p){flex-grow:1}}.md\:card-actions{flex-wrap:wrap;align-items:flex-start;gap:.75rem;display:flex}.md\:card-footer{border-bottom-right-radius:var(--radius-box);border-bottom-left-radius:var(--radius-box);padding:var(--card-p,1.5rem)}:where(.card-header)+.card-body,:where(.card-body)+.card-footer{padding-top:0}.md\:card-xs{--card-p:.5rem;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));& .card-title{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}.md\:card-sm{--card-p:1rem;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));& .card-title{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}.md\:card-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--card-p:1.5rem;& .card-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}.md\:card-lg{--card-p:2rem;font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));& .card-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}.md\:card-xl{--card-p:2.5rem;font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));& .card-title{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}}.md\:card .card-alert{border-radius:0;&:first-child{border-top-left-radius:var(--radius-box);border-top-right-radius:var(--radius-box)}&:last-child{border-bottom-right-radius:var(--radius-box);border-bottom-left-radius:var(--radius-box)}}.md\:card-side{flex-direction:row;align-items:stretch;& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:unset;border-end-end-radius:unset;border-end-start-radius:inherit;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:inherit;border-end-end-radius:inherit;border-end-start-radius:unset;overflow:hidden}& figure>*{max-width:unset}& :where(figure>*){object-fit:cover;width:100%;height:100%}}.md\:card-group{border-radius:var(--radius-box);box-shadow:var(--card-shadow,0 1px 3px 0 color-mix(in oklab,var(--color-base-300)20%,#0000),0 1px 2px -1px color-mix(in oklab,var(--color-base-300)20%,#0000));border-color:color-mix(in oklab,var(--color-base-content)30%,transparent);border-width:var(--card-border,0px);overflow:hidden;&>.card{--card-shadow:none;--card-border:0;border-radius:0;flex:1 0}}}@media (width>=1024px){.lg\:card{border-radius:var(--radius-box);--tw-border-style:solid;border-style:solid;border-color:color-mix(in oklab,var(--color-base-content)20%,transparent);background-color:var(--color-base-100);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);color:color-mix(in oklab,var(--color-base-content)80%,transparent);--tw-outline-style:none;box-shadow:var(--card-shadow,0 1px 3px 0 color-mix(in oklab,var(--color-base-300)20%,#0000),0 1px 2px -1px color-mix(in oklab,var(--color-base-300)20%,#0000));border-width:var(--card-border,0px);outline-style:none;flex-direction:column;display:flex;position:relative;&:focus{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline-offset:2px;outline:2px solid #0000}}& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-end-radius:unset;border-end-start-radius:unset;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:unset;border-end-end-radius:inherit;border-end-start-radius:inherit;overflow:hidden}&:where(.card-border){border:var(--border)solid color-mix(in oklab,var(--color-base-content)20%,transparent)}&.image-full{display:grid;&:before{border-radius:var(--radius-box);background-color:var(--color-neutral);opacity:.75;content:"";grid-row-start:1;grid-column-start:1;position:relative}&>*{grid-row-start:1;grid-column-start:1}&>.card-body{color:var(--color-neutral-content);position:relative}& :where(figure){border-radius:inherit;overflow:hidden}&>figure img{object-fit:cover;height:100%}}& figure{justify-content:center;align-items:center;display:flex}&:has(>input:is(input[type=checkbox],input[type=radio])){cursor:pointer;user-select:none}&:has(>:checked){outline:2px solid}}.lg\:card-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-base-content)}.lg\:card-header{border-top-left-radius:var(--radius-box);border-top-right-radius:var(--radius-box);padding:var(--card-p,1.5rem)}.lg\:card-body{padding:var(--card-p,1.5rem);flex-direction:column;flex:auto;gap:.5rem;display:flex;& :where(p){flex-grow:1}}.lg\:card-actions{flex-wrap:wrap;align-items:flex-start;gap:.75rem;display:flex}.lg\:card-footer{border-bottom-right-radius:var(--radius-box);border-bottom-left-radius:var(--radius-box);padding:var(--card-p,1.5rem)}:where(.card-header)+.card-body,:where(.card-body)+.card-footer{padding-top:0}.lg\:card-xs{--card-p:.5rem;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));& .card-title{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}.lg\:card-sm{--card-p:1rem;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));& .card-title{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}.lg\:card-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--card-p:1.5rem;& .card-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}.lg\:card-lg{--card-p:2rem;font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));& .card-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}.lg\:card-xl{--card-p:2.5rem;font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));& .card-title{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}}.lg\:card .card-alert{border-radius:0;&:first-child{border-top-left-radius:var(--radius-box);border-top-right-radius:var(--radius-box)}&:last-child{border-bottom-right-radius:var(--radius-box);border-bottom-left-radius:var(--radius-box)}}.lg\:card-side{flex-direction:row;align-items:stretch;& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:unset;border-end-end-radius:unset;border-end-start-radius:inherit;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:inherit;border-end-end-radius:inherit;border-end-start-radius:unset;overflow:hidden}& figure>*{max-width:unset}& :where(figure>*){object-fit:cover;width:100%;height:100%}}.lg\:card-group{border-radius:var(--radius-box);box-shadow:var(--card-shadow,0 1px 3px 0 color-mix(in oklab,var(--color-base-300)20%,#0000),0 1px 2px -1px color-mix(in oklab,var(--color-base-300)20%,#0000));border-color:color-mix(in oklab,var(--color-base-content)30%,transparent);border-width:var(--card-border,0px);overflow:hidden;&>.card{--card-shadow:none;--card-border:0;border-radius:0;flex:1 0}}}@media (width>=1280px){.xl\:card{border-radius:var(--radius-box);--tw-border-style:solid;border-style:solid;border-color:color-mix(in oklab,var(--color-base-content)20%,transparent);background-color:var(--color-base-100);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);color:color-mix(in oklab,var(--color-base-content)80%,transparent);--tw-outline-style:none;box-shadow:var(--card-shadow,0 1px 3px 0 color-mix(in oklab,var(--color-base-300)20%,#0000),0 1px 2px -1px color-mix(in oklab,var(--color-base-300)20%,#0000));border-width:var(--card-border,0px);outline-style:none;flex-direction:column;display:flex;position:relative;&:focus{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline-offset:2px;outline:2px solid #0000}}& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-end-radius:unset;border-end-start-radius:unset;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:unset;border-end-end-radius:inherit;border-end-start-radius:inherit;overflow:hidden}&:where(.card-border){border:var(--border)solid color-mix(in oklab,var(--color-base-content)20%,transparent)}&.image-full{display:grid;&:before{border-radius:var(--radius-box);background-color:var(--color-neutral);opacity:.75;content:"";grid-row-start:1;grid-column-start:1;position:relative}&>*{grid-row-start:1;grid-column-start:1}&>.card-body{color:var(--color-neutral-content);position:relative}& :where(figure){border-radius:inherit;overflow:hidden}&>figure img{object-fit:cover;height:100%}}& figure{justify-content:center;align-items:center;display:flex}&:has(>input:is(input[type=checkbox],input[type=radio])){cursor:pointer;user-select:none}&:has(>:checked){outline:2px solid}}.xl\:card-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-base-content)}.xl\:card-header{border-top-left-radius:var(--radius-box);border-top-right-radius:var(--radius-box);padding:var(--card-p,1.5rem)}.xl\:card-body{padding:var(--card-p,1.5rem);flex-direction:column;flex:auto;gap:.5rem;display:flex;& :where(p){flex-grow:1}}.xl\:card-actions{flex-wrap:wrap;align-items:flex-start;gap:.75rem;display:flex}.xl\:card-footer{border-bottom-right-radius:var(--radius-box);border-bottom-left-radius:var(--radius-box);padding:var(--card-p,1.5rem)}:where(.card-header)+.card-body,:where(.card-body)+.card-footer{padding-top:0}.xl\:card-xs{--card-p:.5rem;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));& .card-title{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}.xl\:card-sm{--card-p:1rem;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));& .card-title{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}.xl\:card-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--card-p:1.5rem;& .card-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}.xl\:card-lg{--card-p:2rem;font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));& .card-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}.xl\:card-xl{--card-p:2.5rem;font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));& .card-title{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}}.xl\:card .card-alert{border-radius:0;&:first-child{border-top-left-radius:var(--radius-box);border-top-right-radius:var(--radius-box)}&:last-child{border-bottom-right-radius:var(--radius-box);border-bottom-left-radius:var(--radius-box)}}.xl\:card-side{flex-direction:row;align-items:stretch;& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:unset;border-end-end-radius:unset;border-end-start-radius:inherit;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:inherit;border-end-end-radius:inherit;border-end-start-radius:unset;overflow:hidden}& figure>*{max-width:unset}& :where(figure>*){object-fit:cover;width:100%;height:100%}}.xl\:card-group{border-radius:var(--radius-box);box-shadow:var(--card-shadow,0 1px 3px 0 color-mix(in oklab,var(--color-base-300)20%,#0000),0 1px 2px -1px color-mix(in oklab,var(--color-base-300)20%,#0000));border-color:color-mix(in oklab,var(--color-base-content)30%,transparent);border-width:var(--card-border,0px);overflow:hidden;&>.card{--card-shadow:none;--card-border:0;border-radius:0;flex:1 0}}}@media (width>=1536px){.\32 xl\:card{border-radius:var(--radius-box);--tw-border-style:solid;border-style:solid;border-color:color-mix(in oklab,var(--color-base-content)20%,transparent);background-color:var(--color-base-100);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal);color:color-mix(in oklab,var(--color-base-content)80%,transparent);--tw-outline-style:none;box-shadow:var(--card-shadow,0 1px 3px 0 color-mix(in oklab,var(--color-base-300)20%,#0000),0 1px 2px -1px color-mix(in oklab,var(--color-base-300)20%,#0000));border-width:var(--card-border,0px);outline-style:none;flex-direction:column;display:flex;position:relative;&:focus{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline-offset:2px;outline:2px solid #0000}}& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-end-radius:unset;border-end-start-radius:unset;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:unset;border-end-end-radius:inherit;border-end-start-radius:inherit;overflow:hidden}&:where(.card-border){border:var(--border)solid color-mix(in oklab,var(--color-base-content)20%,transparent)}&.image-full{display:grid;&:before{border-radius:var(--radius-box);background-color:var(--color-neutral);opacity:.75;content:"";grid-row-start:1;grid-column-start:1;position:relative}&>*{grid-row-start:1;grid-column-start:1}&>.card-body{color:var(--color-neutral-content);position:relative}& :where(figure){border-radius:inherit;overflow:hidden}&>figure img{object-fit:cover;height:100%}}& figure{justify-content:center;align-items:center;display:flex}&:has(>input:is(input[type=checkbox],input[type=radio])){cursor:pointer;user-select:none}&:has(>:checked){outline:2px solid}}.\32 xl\:card-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-base-content)}.\32 xl\:card-header{border-top-left-radius:var(--radius-box);border-top-right-radius:var(--radius-box);padding:var(--card-p,1.5rem)}.\32 xl\:card-body{padding:var(--card-p,1.5rem);flex-direction:column;flex:auto;gap:.5rem;display:flex;& :where(p){flex-grow:1}}.\32 xl\:card-actions{flex-wrap:wrap;align-items:flex-start;gap:.75rem;display:flex}.\32 xl\:card-footer{border-bottom-right-radius:var(--radius-box);border-bottom-left-radius:var(--radius-box);padding:var(--card-p,1.5rem)}:where(.card-header)+.card-body,:where(.card-body)+.card-footer{padding-top:0}.\32 xl\:card-xs{--card-p:.5rem;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));& .card-title{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}.\32 xl\:card-sm{--card-p:1rem;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));& .card-title{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}.\32 xl\:card-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--card-p:1.5rem;& .card-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}.\32 xl\:card-lg{--card-p:2rem;font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));& .card-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}.\32 xl\:card-xl{--card-p:2.5rem;font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));& .card-title{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}}.\32 xl\:card .card-alert{border-radius:0;&:first-child{border-top-left-radius:var(--radius-box);border-top-right-radius:var(--radius-box)}&:last-child{border-bottom-right-radius:var(--radius-box);border-bottom-left-radius:var(--radius-box)}}.\32 xl\:card-side{flex-direction:row;align-items:stretch;& :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:unset;border-end-end-radius:unset;border-end-start-radius:inherit;overflow:hidden}& :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:inherit;border-end-end-radius:inherit;border-end-start-radius:unset;overflow:hidden}& figure>*{max-width:unset}& :where(figure>*){object-fit:cover;width:100%;height:100%}}.\32 xl\:card-group{border-radius:var(--radius-box);box-shadow:var(--card-shadow,0 1px 3px 0 color-mix(in oklab,var(--color-base-300)20%,#0000),0 1px 2px -1px color-mix(in oklab,var(--color-base-300)20%,#0000));border-color:color-mix(in oklab,var(--color-base-content)30%,transparent);border-width:var(--card-border,0px);overflow:hidden;&>.card{--card-shadow:none;--card-border:0;border-radius:0;flex:1 0}}}}