@supports (--a: 0) {
    :root {
        --gui-slider-bg-color:#e6e6e6;
    }
    .gui-slider {
        padding: 16px 0;
        background: --gui-slider-bg-color;
        position: relative;
    }    
}

.gui-slider-title {
    color: #000000;
    font-size: 18px;
    margin: 0 0 16px 0;
    text-align: center;
    text-transform: uppercase;
}

.gui-slides {
    margin: 0;
    padding: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-scroll-snap-type: mandatory;
    -ms-scroll-snap-type: mandatory;
    scroll-snap-type: mandatory;
    -webkit-scroll-snap-destination: 218px 0;
    -ms-scroll-snap-destination: 218px 0;
    scroll-snap-destination: 218px 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.gui-slides:before,
.gui-slides:after {
    content: '';
    display: block;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-flex-basis: 44px;
    -ms-flex-preferred-size: 44px;
    flex-basis: 44px;
}

.gui-slides .card {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-flex-basis: 218px;
    -ms-flex-preferred-size: 218px;
    flex-basis: 218px;
    padding: 8px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: white;
    margin-right: 16px;
    list-style: none;
    max-width: 218px;
    -webkit-box-shadow: 0 2px 2px 0 rgba(33, 37, 41, 0.08);
    box-shadow: 0 2px 2px 0 rgba(33, 37, 41, 0.08);
    -webkit-scroll-snap-coordinate: 218px 0;
    -ms-scroll-snap-coordinate: 218px 0;
    scroll-snap-coordinate: 218px 0;
}

.gui-slides .card a {
    color: #000;
    text-decoration: none;
}

.gui-slides .card:last-child {
    margin-right: 0;
}

@supports (scroll-snap-align: center) {
    .gui-slides {
        -webkit-scroll-snap-type: x mandatory;
        -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    }

    .gui-slides .card {
        scroll-snap-align: center;
    }
}

@supports (--a: 0) {
    :root {
        --card-margin: 8px;
        --card-width: 218px;
    }

    .gui-slides .card {
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        -webkit-flex-basis: var(--card-width);
        -ms-flex-preferred-size: var(--card-width);
        flex-basis: var(--card-width);
        margin-right: var(--card-margin);
    }
}

.gui-slider-product-image img {
    max-width: 100%;
}

.gui-slider-product-rating {
    margin: 16px 0;
}

.gui-slider-product-title {
    font-size: 14px;
    margin-bottom: 16px;
    color: #000000;
    text-decoration: none;  
}
.gui-slider-product-price {
    display: block;
    font-weight: bold;
    font-size: 18px;
}