/* Preview styles from styleguide feature/map-modal (39317bdc). */
.c-producers-map.show-modal .c-producers-map__filters-toggle,
.c-producers-map.show-modal .c-producers-map__wrapper {
    display: none;
}

.c-producers-map__modal-wrapper {
    position: relative;
    display: none;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
    background-color: var(--color-light-sand);
    aspect-ratio: .8;
    cursor: pointer;
}

.show-modal .c-producers-map__modal-wrapper {
    display: flex;
}

.c-producers-map__modal-bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
}

.c-producers-map__modal-content {
    --cols: 10;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(var(--column-width-gutter) * var(--cols) - var(--gutter-x));
    padding: var(--space-l);
    text-align: center;
    background-color: var(--color-sand);
    border-radius: var(--space-s);
    gap: var(--space-xl);
}

.c-producers-map [data-producers-map-target="status"]:empty {
    display: none;
}

@media (max-width: 767.98px) {
    .c-producers-map__modal-bg {
        inset: -20%;
    }
}

@media (min-width: 768px) {
    .c-producers-map__modal-wrapper {
        aspect-ratio: 2;
    }
    .c-producers-map__modal-content {
        --cols: 6;
    }
}

@media (min-width: 992px) {
    .c-producers-map__modal-content {
        --cols: 4;
    }
}