/* container categorie galeries */
    .container_categorie_galeries{        
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 5px;
        width: max-content;
        max-width:  100%;
        margin: 0 auto;
        scroll-behavior: smooth;
        anchor-name: --caroussel;
        position: relative;
        scroll-snap-type: x mandatory;                    
        scroll-marker-group: after;
    }

    .container_categorie_galeries::scroll-marker-group{
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 0;
        display: none;
    }

    .content_categorie_galeries::scroll-marker{
        content: '';
        width: 8px; height: 8px;
        background: white;
        border-radius: 16px;
        color: var(--primary);
    }

    .content_categorie_galeries::scroll-marker:target-current{
        background: var(--primary);
    }

    .container_categorie_galeries::-webkit-scrollbar{
        display: none;
    }

    .container_categorie_galeries::scroll-button(right), .container_categorie_galeries::scroll-button(left){
        border: none;
        background-color: var(--third);
        padding: 5px 14px;
        color: var(--white);
        cursor: pointer;
        position: absolute;
        position-anchor: --caroussel;
        border-radius: 5px;
        margin-top:30px;
    }

    .container_categorie_galeries::scroll-button(left){                    
        content: "\21D0";
        position-area: center bottom;
        translate: -50%;
        margin-right: 8px;
        margin-top: 8px;
    }

    .container_categorie_galeries::scroll-button(right){                    
        content: "\21D2";
        position-area: center bottom;
        translate: 50%;
        margin-left: 8px;
        margin-top: 8px;
    }

    .container_categorie_galeries::scroll-button(right):disabled, .container_categorie_galeries::scroll-button(left):disabled{
        opacity: 0.5;
        cursor: auto;
    }

    .content_categorie_galeries{
        scroll-snap-align: start;
        position: relative;
        flex: 0 0 auto;
        
        background: var(--primary);
        padding: 4px 5px;
        padding-right: 12px;
        border-radius: 35px;
        color: var(--white);
        
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    .box_img_categorie{
        flex: 0 0 33px;
        height: 33px;
        padding: 3px;
        background: var(--white);
        border-radius: 50%;
    }
    
    .box_img_categorie img{
        width: 100%; height: 100%;
        object-fit: contain;
    }
    
    .info_categorie{
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    
    .content_categorie_galeries h3{
        text-wrap: nowrap;
        color: var(--white);
    }
    
    .content_categorie_galeries span{
        font-size: 10px;
        color: var(--third);
    }
    
    .content_categorie_galeries:hover, .content_categorie_galeries.active {
        background: var(--third);
        cursor: pointer;
    }
    
    .content_categorie_galeries:hover span, .content_categorie_galeries.active span {
        color: var(--white);
    }
/* container categorie galeries */

/* section galerie */
    .container_img{
        width: min(1200px, 100%);
        columns: 5 200px;
        column-gap: .7rem;
        margin: 0 auto;
        margin-top: 48px;
    }

    .container_img a{
        display: block;
        margin-bottom: .7rem;
        width: 100%;
    }
    
    .container_img a img{
        width: 100%; height: 100%;
        object-fit: contain;
    }

    .container_img a:hover{
        scale: 1.03;
    }
/* section galerie */

/* section galerie */
    @media screen and (max-width: 727px) {
        .container_img{
            columns: 5 150px;
            column-gap: .5rem;
        }

        .container_img img{
            margin-bottom: .5rem;
        }
    }

    @media screen and (max-width: 381px) {
        .container_img{
            columns: 5 100px;
            column-gap: .3rem;
        }

        .container_img img{
            margin-bottom: .3rem;
        }
    }
/* section galerie */