@layer components {
    .community-band {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
        gap: var(--space-3);
        margin-block: var(--space-4) var(--space-6);
    }

    .community-band-card {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        min-height: var(--touch-target);
        padding: var(--space-3) var(--space-4);
        background: var(--wheat-tint);
        border: 1px solid var(--line);
        border-inline-start: 4px solid var(--wheat);
        border-radius: var(--radius-m);
        text-decoration: none;
        color: var(--soil);
        font-weight: 600;
        transition: translate 160ms ease, box-shadow 160ms ease;
    }

    .community-band-card:hover,
    .community-band-card:focus-visible {
        translate: 0 -2px;
        box-shadow: var(--shadow-2);
    }

    .community-band-card .icon {
        color: var(--sky-deep);
    }

    .community-band-card.accent-sky .icon {
        color: var(--sky);
    }

    .community-band-card.accent-moss .icon {
        color: var(--moss);
    }

    .listing-price {
        font-family: var(--font-data);
    }

    .listing-price-free {
        background: var(--wheat-tint);
        border: 1px solid var(--wheat);
    }

    @media (prefers-reduced-motion: reduce) {
        .community-band-card {
            transition: none;
        }
    }
}