/* ******************************************** */
/** PRODUCTS CAROUSEL
/* ******************************************** */

.c-carousel__holder {
    margin: calc(var(--separator)* 2) calc(var(--space-x-n)) 0;
}

.c-carousel__container {
    display: inline-block;
}
.c-carousel__title {
    display: inline;
    font-weight: 200;
    border-bottom: 3px solid currentColor;
    font-family: var(--font-secondary);
    line-height: 1.2;
    font-size: 3.2rem;
}

.c-carousel__list {
    display: flex;
    align-items: stretch;
}

/* has-background */

.c-carousel {
    --bg: var(--color-bgblue);
    --bg-rgb: var(--color-bgblue-rgb);
}

.c-carousel.has-background {
    background-color: var(--bg);
}

.c-carousel.has-background .c-carousel__title {
    color: var(--color-lightest);
}

/* Less items styles */

.c-carousel.less-items .c-carousel__list {
    padding-left: 20px;
}


/* ********************** de Mobile a TABLET ********************** */

@media (min-width: 768px) {

    /* Less items styles */

    .c-carousel.less-items .c-carousel__list {
        padding-left: 24px;
    }

}


/* ********************** de Tablet a DESKTOP ********************** */

@media (min-width: 980px) {

    /* Less items styles */

    .c-carousel.less-items .c-carousel__list {
        padding-left: 32px;
    }

}


/* ********************** de Desktop a DESKTOP 2 ********************** */

@media (min-width: 1200px) {

    /* Less items styles */

    .c-carousel.less-items .c-carousel__list {
        padding-left: 52px;
    }

}


/* ********************** de Desktop 2 a HD ********************** */

@media (min-width: 1400px) {

    .c-carousel__holder {
        position: relative;
    }

    .c-carousel__holder:after {
        content: "";
        display: block;
        width: var(--space-x);
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
        background: linear-gradient(to left, #fff 75%, rgba(255, 255, 255, 0));
    }

    .c-carousel__holder:before {
        content: "";
        display: block;
        width: var(--space-x);
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;

    }

    /* ******************************************** */
    /** PRODUCTS CAROUSEL
    /* ******************************************** */

    .c-carousel__holder {
        margin: var(--separator) calc(var(--space-x-n)) 0;
    }

    .c-carousel__list {
        display: flex;
        align-items: stretch;
    }

    /* has-background */

    .c-carousel {
        --bg: var(--color-bgblue);
        --bg-rgb: var(--color-bgblue-rgb);
    }

    .c-carousel.has-background {
        background-color: var(--bg);
    }

    .c-carousel.has-background .c-carousel__title {
        color: var(--color-lightest);
    }

    /* Less items styles */

    .c-carousel.less-items .c-carousel__list {
        padding-left: 20px;
    }


    /* ********************** de Mobile a TABLET ********************** */

    @media (min-width: 768px) {

        /* Less items styles */

        .c-carousel.less-items .c-carousel__list {
            padding-left: 24px;
        }

    }


    /* ********************** de Tablet a DESKTOP ********************** */

    @media (min-width: 980px) {

        /* Less items styles */

        .c-carousel.less-items .c-carousel__list {
            padding-left: 32px;
        }

    }


    /* ********************** de Desktop a DESKTOP 2 ********************** */

    @media (min-width: 1200px) {

        /* Less items styles */

        .c-carousel.less-items .c-carousel__list {
            padding-left: 52px;
        }

    }


    /* ********************** de Desktop 2 a HD ********************** */

    @media (min-width: 1400px) {

        .c-carousel__holder {
            position: relative;
        }

        .c-carousel__holder:after {
            content: "";
            display: block;
            width: var(--space-x);
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 2;
            background: linear-gradient(to left, #fff 75%, rgba(255, 255, 255, 0));
        }

        .c-carousel__holder:before {
            content: "";
            display: block;
            width: var(--space-x);
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;

        }

        .c-carousel:not(.has-background) .c-carousel__holder:after {
            background: linear-gradient(to left, #E6DDCF 75%, rgba(255, 255, 255, 0));
        }

        .c-carousel:not(.has-background) .c-carousel__holder:before {
            background: linear-gradient(to right, #E6DDCF 75%, rgba(255, 255, 255, 0));
        }

        /* has-background */

        .c-carousel.has-background .c-carousel__holder:after {
            background: linear-gradient(to left, var(--bg) 75%, rgb(var(--bg-rgb)/0%));
        }

        .c-carousel.has-background .c-carousel__holder:before {
            background: linear-gradient(to right, var(--bg) 75%, rgb(var(--bg-rgb)/0%));
        }

        /* Less items styles */

        .c-carousel.less-items .c-carousel__list {
            padding-left: 60px;
        }
    }

    .c-carousel:not(.has-background) .c-carousel__holder:after {
        background: linear-gradient(to left, #E6DDCF 75%, rgba(255, 255, 255, 0));
    }

    .c-carousel:not(.has-background) .c-carousel__holder:before {
        background: linear-gradient(to right, #E6DDCF 75%, rgba(255, 255, 255, 0));
    }

    /* has-background */

    .c-carousel.has-background .c-carousel__holder:after {
        background: linear-gradient(to left, var(--bg) 75%, rgb(var(--bg-rgb)/0%));
    }

    .c-carousel.has-background .c-carousel__holder:before {
        background: linear-gradient(to right, var(--bg) 75%, rgb(var(--bg-rgb)/0%));
    }

    /* Less items styles */

    .c-carousel.less-items .c-carousel__list {
        padding-left: 60px;
    }
}