:root {
    --visibleCards: 4;
    /*Card width = (Grid width - gap) / Cards number;*/
    --columnWidth: calc((100% - (1.5rem * (var(--visibleCards) - 1)  )) / var(--visibleCards));
}
.navigator{
    max-width: var(--content-max-width);
    margin: auto;
    height: 550px;
    position: relative;
    z-index: var(--z-index-content);

}
.slider_nav {
    overflow-x: hidden;
    touch-action: pan-y;
}
.slider_nav:hover {
    cursor: grab;
}
.slider_nav .slider {
    width: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--columnWidth);
    grid-gap: 1.5rem;
    position: relative;
    height: 230px;
    list-style: none;
}
.slider_nav .slider:hover {
    cursor: grab;
}
.slider_nav .slider .slider_li .slider_link {
    background: var(--bfc-red);
    width: 100%;
    color: var(--bfc-light);
    text-decoration: none;
    padding: 45px 0;
    border-radius: 10px;
    height: 100%;
    font-weight: bolder;
    text-transform: uppercase;
    transition: .3s;
}
.slider_nav .slider .slider_li .slider_link .slider_icon {
    width: 60px;
    height: 60px;
}

.slider_nav .slider .slider_li .slider_link:hover {
    background: var(--bfc-red-dark);
}

@media screen and (max-width: 1200px) {
    :root {
        --visibleCards: 3;
    }
}
@media screen and (max-width: 920px) {
    :root {
        --visibleCards: 2;
    }
}
@media screen and (max-width: 600px) {
    :root {
        --visibleCards: 1;
    }
}