[mn="7012"]{  
    --iconWidth: var(--iconWidth_default, 90px);
    --iconHeight: var(--iconHeight_default, 100%);
    --iconRadius: var(--iconRadius_default, 3px);
    --iconBorder: var(--iconBorder_default, 0);
    --iconPadding: var(--iconPadding_default, 0);
    --count: var(--count_default, 4);

    @media (width <= 991px) { 
        --count: var(--count_991, 3); 
    } 

    @media (width <= 767px) { 
        --count: var(--count_767, 3); 
    } 
    
    @media (width <= 575px) { 
        --count: var(--count_575, 2); 
    } 
}

[mn="7012"]{
    counter-reset: count 0;

    .list-{
        counter-increment: count 1;

        /* .title::before{
            content: counter(count, decimal-leading-zero);
            display: block;
            margin: 0 0 12px;
            font-size: 70%;
            color: #555
        } */
    }
}
[mn="7012"]{

    .categorylistbx.listbx{

        --listset-count: var(--count);
        --listset-gap: 21px;
        margin: 21px 0 0;

        .categorybx { 
     
            .infobx { 
                background-color: transparent; 
                max-width: 100%;
                margin: 0 auto;  
                /* aspect-ratio: 3 / 2; */
            } 
            .bimgw { 
                width: var(--iconWidth); 
                border-radius: var(--iconRadius);
                border: var(--iconBorder);
                padding: var(--iconPadding);
                .bimg{
                    padding-top: var(--iconHeight);
                    transition: .6s all cubic-bezier(0.075, 0.82, 0.165, 1);
                }
            }
    
            & a{
                display: block;
                width: 100%;
    
                /* &:hover{
                    .bimg{
                        scale: 1.15;
                    }
                } */
            }
    
    
        }
    }  

    .title {
        font-family: var(--ft-t2); 
        margin: 15px 0;
        line-height: 1.1; 
        font-size: 100%;
        width: 100%;
    } 

    .arrow{
        display: inline-block;
        aspect-ratio: 27 / 15;
        width: 27px;

        mask-size: contain;
        -webkit-mask-size: contain;
        mask-position: center;
        -webkit-mask-position: center;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        background-color: var(--secftclr, #000);
        -webkit-mask-image: url(_src/arrow.png); 
        mask-image: url(_src/arrow.png);
        transition: .2s all ease-in;
    }
    a:hover{
        .arrow{
            rotate: -45deg;
        }
    }
}

/* ============================ */
/* ============================ */
 
[mn="7012"]{
    .list-{
        ._content{
            line-height: 1.3;
            font-size: 90%;
        }
    }
}