.minty-color-association {
    --mca-swatch-size: 50px;
    --mca-swatch-gap: 0.5rem;
    --mca-swatch-radius: 16px;
    --mca-swatch-border: #dfdfdf;
    --mca-swatch-border-current: #1e293b;
    --mca-spacing-block: 1rem;

    margin-block: var(--mca-spacing-block);
}

.minty-color-association__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mca-swatch-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.minty-color-association__link {
    display: block;
    width: var(--mca-swatch-size);
    height: var(--mca-swatch-size);
    border: 1px solid var(--mca-swatch-border);
    border-radius: var(--mca-swatch-radius);
    overflow: hidden;
}

.minty-color-association__link--current {
    border-color: var(--mca-swatch-border-current);
    border-width: 2px;
}

.minty-color-association__image,
.minty-color-association__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}