.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    width: 100%;
    padding-right: calc(var(--gutter-x) * 0.5);
    padding-left: calc(var(--gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

.container {
    max-width: 100%;
}

/* Containers fixés sur breakpoints */
@media (min-width: 576px) {

    .container,
    .container-sm {
        max-width: var(--container-sm);
    }
}

@media (min-width: 768px) {

    .container,
    .container-sm,
    .container-md {
        max-width: var(--container-md);
    }
}

@media (min-width: 992px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg {
        max-width: var(--container-lg);
    }
}

@media (min-width: 1200px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: var(--container-xl);
    }
}

@media (min-width: 1400px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: var(--container-xxl);
    }
}

/** Custom grid layout **/
.grid_layout {

    display: grid;
    gap: 40px;

    @media (max-width: 992px) {
        gap: 20px
    }

    @media (max-width: 576px) {
        grid-template-columns: 1fr;
    }


    &.nb_cols_2 {
        @media (min-width: 577px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    &.nb_cols_3 {
        @media (min-width: 768px) {
            grid-template-columns: repeat(3, 1fr);
        }

        @media (min-width: 577px) and (max-width: 767px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    &.nb_cols_4 {
        @media (min-width: 992px) {
            grid-template-columns: repeat(4, 1fr);
        }

        @media (min-width: 768px) and (max-width: 991px) {
            grid-template-columns: repeat(3, 1fr);
        }

        @media (min-width: 577px) and (max-width: 767px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    &.nb_cols_5 {
        @media (min-width: 992px) {
            grid-template-columns: repeat(5, 1fr);
        }

        @media (min-width: 768px) and (max-width: 991px) {
            grid-template-columns: repeat(3, 1fr);
        }

        @media (min-width: 577px) and (max-width: 767px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }
}

@media (min-width: 992px) {
    .content .limited {
        max-width: 824px;
    }
}