.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--hafo-space-3)}.card{border:.5px solid var(--hafo-color-border-default);border-radius:var(--hafo-radius-lg);display:flex;flex-direction:column;align-items:stretch;text-align:center;cursor:pointer;overflow:hidden;transition:transform var(--hafo-transition-fast),box-shadow var(--hafo-transition-fast)}.card:focus-within,.card:hover,.card--active{transform:translateY(-4px)}.card__image{width:100%;height:14rem;display:flex;align-items:center;justify-content:center;background:#fff}.card__image img{width:100%;height:100%;object-fit:contain}.card__label{width:100%;margin:0;padding:var(--hafo-space-2) var(--hafo-space-3);background:var(--hafo-color-bg-secondary);font-size:var(--hafo-font-size-base);line-height:var(--hafo-space-4);color:var(--hafo-color-primary-900);letter-spacing:.01em;text-align:center}.card__count{width:100%;margin:0;padding:var(--hafo-space-half) var(--hafo-space-3) var(--hafo-space-3);background:var(--hafo-color-bg-secondary);font-size:13px;line-height:20px;color:var(--hafo-color-text-secondary);font-weight:var(--hafo-font-weight-normal);text-align:center}@media(max-width:991px){.cards{grid-template-columns:repeat(2,1fr)}.card__image{height:auto;aspect-ratio:4 / 3}}@media(max-width:600px){.cards{grid-template-columns:repeat(2,1fr);gap:var(--hafo-space-2)}.card__image{aspect-ratio:1 / 1}p.card__label{padding:var(--hafo-space-2) var(--hafo-space-1);font-size:var(--hafo-font-size-sm)}.card__count{padding:0 var(--hafo-space-1) var(--hafo-space-2);font-size:11px}}