@layer components{.card{background-color:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);display:flex;flex-direction:column;gap:var(--card-gap);padding:var(--card-padding);position:relative;text-decoration:none;transition:background-color var(--card-transition)}.card,a.card{color:var(--card-fg)}.card--hoverable:hover{background-color:var(--card-hover-bg)}a.card:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}.card__icon{block-size:var(--card-icon-size);color:var(--card-icon-color);display:inline-flex;flex:none;inline-size:var(--card-icon-size)}.card__icon svg,.card__icon-img{block-size:100%;inline-size:100%;object-fit:contain}.card__content{display:flex;flex-direction:column;gap:var(--picus-space-2);min-inline-size:0}.card__label{color:var(--card-fg);font-family:var(--type-display-family);font-size:var(--card-label-size);font-weight:var(--card-label-weight);line-height:var(--card-label-lh)}.card__extra{margin-block-start:var(--picus-space-2)}.card__featured{inset-block-start:var(--picus-space-3);inset-inline-end:var(--picus-space-3);position:absolute}.card__illustration{block-size:auto;inline-size:100%}.card--inline{align-items:flex-start;flex-direction:row}.card--image-top{padding-block-start:0}.card--image-top .card__image-wrap{aspect-ratio:var(--card-image-ratio);border-start-end-radius:var(--card-radius);border-start-start-radius:var(--card-radius);display:block;margin-inline:calc(var(--card-padding)*-1);overflow:hidden}.card--image-top .card__image{block-size:100%;inline-size:100%;object-fit:cover}.card--illustration{align-items:center;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.card--illustration .card__content,.card--illustration .card__icon{grid-column:1}.card--illustration .card__illustration{grid-column:2;grid-row:1/span 2}.card--illustration-only{overflow:hidden;padding:0}.card--feature{background-color:var(--picus-color-transparent);border:0;border-block-start:var(--card-border);border-radius:0;padding-inline:0}@media (max-width:767px){.card--illustration{grid-template-columns:minmax(0,1fr)}.card--illustration .card__illustration{grid-column:1;grid-row:auto}}}