/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*
(xxl) Large desktop :                > 1441px
(xl) Large desktop ::after          1280px - 1440px
(lg) Desktop (larger-desktop) :     1025px - 1279px
(md) Tablet (portrait) & laptop :   769px - 1024px
(sm) Tablet (landscape) :           481px - 768px
(xs) Mobile :                       320px - 480px
*/

html {
    --width-1: 8.33%;
    --width-2: 16.66%;
    --width-3: 24.99%;
    --width-4: 33.33%;
    --width-5: 41.66%;
    --width-6: 49.99%;
    --width-7: 58.33%;
    --width-8: 66.66%;
    --width-9: 74.99%;
    --width-10: 83.33%;
    --width-11: 91.66%;
    --width-12: 100%;
}

@media screen and (min-width: 1441px) {
    [w-xxl="1"] { width: var(--width-1); }
    [w-xxl="2"] { width: var(--width-2); }
    [w-xxl="3"] { width: var(--width-3); }
    [w-xxl="4"] { width: var(--width-4); }
    [w-xxl="5"] { width: var(--width-5); }
    [w-xxl="6"] { width: var(--width-6); }
    [w-xxl="7"] { width: var(--width-7); }
    [w-xxl="8"] { width: var(--width-8); }
    [w-xxl="9"] { width: var(--width-9); }
    [w-xxl="10"] { width: var(--width-10); }
    [w-xxl="11"] { width: var(--width-11); }
    [w-xxl="12"] { width: var(--width-12);}
}

@media screen and (min-width: 1280px) {
    [w-xl="1"] { width: var(--width-1); }
    [w-xl="2"] { width: var(--width-2); }
    [w-xl="3"] { width: var(--width-3); }
    [w-xl="4"] { width: var(--width-4); }
    [w-xl="5"] { width: var(--width-5); }
    [w-xl="6"] { width: var(--width-6); }
    [w-xl="7"] { width: var(--width-7); }
    [w-xl="8"] { width: var(--width-8); }
    [w-xl="9"] { width: var(--width-9); }
    [w-xl="10"] { width: var(--width-10); }
    [w-xl="11"] { width: var(--width-11); }
    [w-xl="12"] { width: var(--width-12);}
}

@media screen and (min-width: 1025px) {
    [w-lg="1"] { width: var(--width-1); }
    [w-lg="2"] { width: var(--width-2); }
    [w-lg="3"] { width: var(--width-3); }
    [w-lg="4"] { width: var(--width-4); }
    [w-lg="5"] { width: var(--width-5); }
    [w-lg="6"] { width: var(--width-6); }
    [w-lg="7"] { width: var(--width-7); }
    [w-lg="8"] { width: var(--width-8); }
    [w-lg="9"] { width: var(--width-9); }
    [w-lg="10"] { width: var(--width-10); }
    [w-lg="11"] { width: var(--width-11); }
    [w-lg="12"] { width: var(--width-12);}
}

@media screen and (min-width: 769px) {
    [w-md="1"] { width: var(--width-1); }
    [w-md="2"] { width: var(--width-2); }
    [w-md="3"] { width: var(--width-3); }
    [w-md="4"] { width: var(--width-4); }
    [w-md="5"] { width: var(--width-5); }
    [w-md="6"] { width: var(--width-6); }
    [w-md="7"] { width: var(--width-7); }
    [w-md="8"] { width: var(--width-8); }
    [w-md="9"] { width: var(--width-9); }
    [w-md="10"] { width: var(--width-10); }
    [w-md="11"] { width: var(--width-11); }
    [w-md="12"] { width: var(--width-12);}
}

@media screen and (min-width: 481px) {
    [w-sm="1"] { width: var(--width-1); }
    [w-sm="2"] { width: var(--width-2); }
    [w-sm="3"] { width: var(--width-3); }
    [w-sm="4"] { width: var(--width-4); }
    [w-sm="5"] { width: var(--width-5); }
    [w-sm="6"] { width: var(--width-6); }
    [w-sm="7"] { width: var(--width-7); }
    [w-sm="8"] { width: var(--width-8); }
    [w-sm="9"] { width: var(--width-9); }
    [w-sm="10"] { width: var(--width-10); }
    [w-sm="11"] { width: var(--width-11); }
    [w-sm="12"] { width: var(--width-12);}
}

@media screen and (min-width: 320px) {
    [w-xs="1"] { width: var(--width-1); }
    [w-xs="2"] { width: var(--width-2); }
    [w-xs="3"] { width: var(--width-3); }
    [w-xs="4"] { width: var(--width-4); }
    [w-xs="5"] { width: var(--width-5); }
    [w-xs="6"] { width: var(--width-6); }
    [w-xs="7"] { width: var(--width-7); }
    [w-xs="8"] { width: var(--width-8); }
    [w-xs="9"] { width: var(--width-9); }
    [w-xs="10"] { width: var(--width-10); }
    [w-xs="11"] { width: var(--width-11); }
    [w-xs="12"] { width: var(--width-12);}
}