/* -------------
    SOMMAIRE
------------- */

/*
    @AUTHOR : Nicolas BOUDOT

    UTILITAIRE : ELLIPSIS
    Permet de tronquer un texte et d'ajouter des points de suspension
*/



.utils_ellipsis,
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
}

    .utils_ellipsis--2,
    .ellipsis--2 {
        -webkit-line-clamp: 2;
    }

    .utils_ellipsis--3,
    .ellipsis--3 {
        -webkit-line-clamp: 3;
    }

    .utils_ellipsis--4,
    .ellipsis--4 {
        -webkit-line-clamp: 4;
    }

.utils_ellipsis > *,
.ellipsis > * {
    margin: 0;
}



/* ---------------------
    02 - SM
--------------------- */

@media (min-width: 576px) {
    .utils_ellipsis-sm,
    .ellipsis-sm {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
    }

        .utils_ellipsis-sm--2,
        .ellipsis-sm--2 {
            -webkit-line-clamp: 2;
        }

        .utils_ellipsis-sm--3,
        .ellipsis-sm--3 {
            -webkit-line-clamp: 3;
        }

        .utils_ellipsis-sm--4,
        .ellipsis-sm--4 {
            -webkit-line-clamp: 4;
        }

    .utils_ellipsis-sm > *,
    .ellipsis-sm > * {
        margin: 0;
    }
}



/* ---------------------
    03 - MD
--------------------- */

@media (min-width: 768px) {
    .utils_ellipsis-md,
    .ellipsis-md {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
    }

        .utils_ellipsis-md--2,
        .ellipsis-md--2 {
            -webkit-line-clamp: 2;
        }

        .utils_ellipsis-md--3,
        .ellipsis-md--3 {
            -webkit-line-clamp: 3;
        }

        .utils_ellipsis-md--4,
        .ellipsis-md--4 {
            -webkit-line-clamp: 4;
        }

    .utils_ellipsis-md > *,
    .ellipsis-md > * {
        margin: 0;
    }
}



/* ---------------------
    04 - LG
--------------------- */

@media (min-width: 992px) {
    .utils_ellipsis-lg,
    .ellipsis-lg {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
    }

        .utils_ellipsis-lg--2,
        .ellipsis-lg--2 {
            -webkit-line-clamp: 2;
        }

        .utils_ellipsis-lg--3,
        .ellipsis-lg--3 {
            -webkit-line-clamp: 3;
        }

        .utils_ellipsis-lg--4,
        .ellipsis-lg--4 {
            -webkit-line-clamp: 4;
        }

    .utils_ellipsis-lg > *,
    .ellipsis-lg > * {
        margin: 0;
    }
}



/* ---------------------
    05 - XL
--------------------- */

@media (min-width: 1200px) {
    .utils_ellipsis-xl,
    .ellipsis-xl {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
    }

        .utils_ellipsis-xl--2,
        .ellipsis-xl--2 {
            -webkit-line-clamp: 2;
        }

        .utils_ellipsis-xl--3,
        .ellipsis-xl--3 {
            -webkit-line-clamp: 3;
        }

        .utils_ellipsis-xl--4,
        .ellipsis-xl--4 {
            -webkit-line-clamp: 4;
        }

    .utils_ellipsis-xl > *,
    .ellipsis-xl > * {
        margin: 0;
    }
}



/* ---------------------
    06 - XXL
--------------------- */

@media (min-width: 1400px) {
    .utils_ellipsis-xxl,
    .ellipsis-xxl {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
    }

        .utils_ellipsis-xxl--2,
        .ellipsis-xxl--2 {
            -webkit-line-clamp: 2;
        }

        .utils_ellipsis-xxl--3,
        .ellipsis-xxl--3 {
            -webkit-line-clamp: 3;
        }

        .utils_ellipsis-xxl--4,
        .ellipsis-xxl--4 {
            -webkit-line-clamp: 4;
        }

    .utils_ellipsis-xxl > *,
    .ellipsis-xxl > * {
        margin: 0;
    }
}