@import url('../../main.css');

div#categories 
{

    display         :   flex;
    justify-content : center;
    margin-bottom   :  100px;

}

section#categories_center 
{

    padding                    :                          25px;
    width                      :                        1000px;
    background-color           :           var(--s-background);
    border-top                 : 1px solid var(--q-background);
    border-bottom-left-radius  :                          10px;
    border-bottom-right-radius :                          10px;
    display                    :                          flex;
    justify-content            :                        center;
    gap                        :                          20px;
    flex-wrap                  :                          wrap;

}

div.categories_center_category { position: relative; }

div.categories_center_category img 
{

    width  : 240px;
    height : 160px;

}

div.categories_center_category_absolute 
{

    position         :             absolute;
    z-index          :                    1;
    top              :                  0px;
    left             :                  0px;
    width            :                240px;
    height           :                160px;
    background-color : rgba(2, 2, 2, 0.7);
    display          :                 flex;
    justify-content  :               center;
    align-items      :               center;

}

div.categories_center_category_absolute_center_name p
{

    padding          :          8px 20px;
    background-color : var(--main-color);
    font-size        :             8.7pt;
    opacity          :               0.7;

}

div.categories_center_category_absolute_center_counters { margin-top: 25px; }

div.categories_center_category_absolute_center_counters p 
{

    font-size :   8.7pt;
    opacity   :     0.6;
    margin    : 5px 0px;

}

div.categories_center_category_absolute_center_counters p span { opacity: 0.6; }

@media screen and (max-width: 1650px) 
{

    section#categories_center 
    { 
        
        width                      : 100%; 
        border-bottom-left-radius  :  0px;
        border-bottom-right-radius :  0px;
    
    }    

}