@layer components {

    .stockists {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--s-4);
    }

    .stockists__item {
        display: grid;
        align-content: start;
        gap: var(--s-2);
        padding: var(--s-5);
        border: 1px solid var(--c-line);
        border-radius: var(--r-1);
        background: var(--c-surface);
    }

    .stockists__name {
        font-size: var(--t-lg);
    }

    .stockists__address {
        font-size: var(--t-sm);
        font-style: normal;
    }

    .stockists .stockists__range {
        font-size: var(--t-sm);
        color: var(--c-muted);
    }

}