.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--hafo-space-3)}.card{background:var(--hafo-color-bg-secondary);border:.5px solid var(--hafo-color-border-default);border-radius:var(--hafo-radius-lg);display:flex;flex-direction:column;align-items:center;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}.card__image img{width:100%;height:100%;object-fit:contain}.card__label{margin:0;padding:var(--hafo-space-2);font-size:var(--hafo-font-size-base);line-height:var(--hafo-space-4);color:var(--hafo-color-primary-900);letter-spacing:.01em}.card__count{margin:var(--hafo-space-half) 0 0;padding:0 var(--hafo-space-3) var(--hafo-space-3);font-size:13px;line-height:20px;color:var(--hafo-color-text-secondary);font-weight:var(--hafo-font-weight-normal)}@media(max-width:991px){.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:767px){.card__image{width:100%;height:100%;border-radius:var(--hafo-radius-lg) var(--hafo-radius-lg) 0 0}.card__image img{border-radius:var(--hafo-radius-lg) var(--hafo-radius-lg) 0 0!important}p.card__label{padding:var(--hafo-space-2) var(--hafo-space-2) 0}.card__count{padding:0 var(--hafo-space-2) var(--hafo-space-2)}}