:root {

    /*************************/
    /*      SPACING          */
    /************************/
    --spacing-extra-large: 60px;
    --spacing-large: 48px;
    --spacing-medium: 32px;
    --spacing-regular: 16px;

    /*************************/
    /*  PADDING AND MARGINS  */
    /************************/

    .padding-extra-large { padding: var(--spacing-extra-large) !important; }
    .pt-extra-large { padding-top: var(--spacing-extra-large) !important; }
    .pb-extra-large { padding-bottom: var(--spacing-extra-large) !important; }
    .pl-extra-large { padding-left: var(--spacing-extra-large) !important; }
    .pr-extra-large { padding-right: var(--spacing-extra-large) !important; }
    .pt-large { padding-top: var(--spacing-large) !important; }
    .pb-large { padding-bottom: var(--spacing-large) !important; }
    .pl-large { padding-left: var(--spacing-large) !important; }
    .pr-large { padding-right: var(--spacing-large) !important; }
    .pt-medium { padding-top: var(--spacing-medium) !important; }
    .pb-medium { padding-bottom: var(--spacing-medium) !important; }
    .pl-medium { padding-left: var(--spacing-medium) !important; }
    .pr-medium { padding-right: var(--spacing-medium) !important; }
    .pt-regular { padding-top: var(--spacing-regular) !important; }
    .pb-regular { padding-bottom: var(--spacing-regular) !important; }
    .pl-regular { padding-left: var(--spacing-regular) !important; }
    .pr-regular { padding-right: var(--spacing-regular) !important; }

    .px-extra-large{ padding-left: var(--spacing-extra-large) !important; padding-right: var(--spacing-extra-large) !important; }
    .py-extra-large{ padding-top: var(--spacing-extra-large) !important; padding-bottom: var(--spacing-extra-large) !important; }
    .px-large{ padding-left: var(--spacing-large) !important; padding-right: var(--spacing-large) !important; }
    .py-large{ padding-top: var(--spacing-large) !important; padding-bottom: var(--spacing-large) !important; }
    .px-medium{ padding-left: var(--spacing-medium) !important; padding-right: var(--spacing-medium) !important; }
    .py-medium{ padding-top: var(--spacing-medium) !important; padding-bottom: var(--spacing-medium) !important; }
    .px-regular{ padding-right: var(--spacing-regular) !important; padding-left: var(--spacing-regular) !important; }
    .py-regular{ padding-top: var(--spacing-regular) !important; padding-bottom: var(--spacing-regular) !important; }

    .margin-extra-large { margin: var(--spacing-extra-large) !important; }
    .mt-extra-large { margin: var(--spacing-extra-large) !important; }
    .mb-extra-large { margin: var(--spacing-extra-large) !important; }
    .ml-extra-large { margin: var(--spacing-extra-large) !important; }
    .mr-extra-large { margin: var(--spacing-extra-large) !important; }
    .mt-large { margin-top: var(--spacing-large) !important; }
    .mb-large { margin-bottom: var(--spacing-large) !important; }
    .ml-large { margin-left: var(--spacing-large) !important; }
    .mr-large { margin-right: var(--spacing-large) !important; }
    .mt-medium { margin-top: var(--spacing-medium) !important; }
    .mb-medium { margin-bottom: var(--spacing-medium) !important; }
    .ml-medium { margin-left: var(--spacing-medium) !important; }
    .mr-medium { margin-right: var(--spacing-medium) !important; }
    .mt-regular { margin-top: var(--spacing-regular) !important; }
    .mb-regular { margin-bottom: var(--spacing-regular) !important; }
    .ml-regular { margin-left: var(--spacing-regular) !important; }
    .mr-regular { margin-right: var(--spacing-regular) !important; }

    .w1, #width1 { width: 1%; }
.w2, #width2 { width: 2%; }
.w3, #width3 { width: 3%; }
.w4, #width4 { width: 4%; }
.w5, #width5 { width: 5%; }
.w6, #width6 { width: 6%; }
.w7, #width7 { width: 7%; }
.w8, #width8 { width: 8%; }
.w9, #width9 { width: 9%; }
.w10, #width10 { width: 10%; }
.w11, #width11 { width: 11%; }
.w12, #width12 { width: 12%; }
.w13, #width13 { width: 13%; }
.w14, #width14 { width: 14%; }
.w15, #width15 { width: 15%; }
.w16, #width16 { width: 16%; }
.w17, #width17 { width: 17%; }
.w18, #width18 { width: 18%; }
.w19, #width19 { width: 19%; }
.w20, #width20 { width: 20%; }
.w21, #width21 { width: 21%; }
.w22, #width22 { width: 22%; }
.w23, #width23 { width: 23%; }
.w24, #width24 { width: 24%; }
.w25, #width25 { width: 25%; }
.w26, #width26 { width: 26%; }
.w27, #width27 { width: 27%; }
.w28, #width28 { width: 28%; }
.w29, #width29 { width: 29%; }
.w30, #width30 { width: 30%; }
.w31, #width31 { width: 31%; }
.w32, #width32 { width: 32%; }
.w33, #width33 { width: 33%; }
.w34, #width34 { width: 34%; }
.w35, #width35 { width: 35%; }
.w36, #width36 { width: 36%; }
.w37, #width37 { width: 37%; }
.w38, #width38 { width: 38%; }
.w39, #width39 { width: 39%; }
.w40, #width40 { width: 40%; }
.w41, #width41 { width: 41%; }
.w42, #width42 { width: 42%; }
.w43, #width43 { width: 43%; }
.w44, #width44 { width: 44%; }
.w45, #width45 { width: 45%; }
.w46, #width46 { width: 46%; }
.w47, #width47 { width: 47%; }
.w48, #width48 { width: 48%; }
.w49, #width49 { width: 49%; }
.w50, #width50 { width: 50%; }
.w51, #width51 { width: 51%; }
.w52, #width52 { width: 52%; }
.w53, #width53 { width: 53%; }
.w54, #width54 { width: 54%; }
.w55, #width55 { width: 55%; }
.w56, #width56 { width: 56%; }
.w57, #width57 { width: 57%; }
.w58, #width58 { width: 58%; }
.w59, #width59 { width: 59%; }
.w60, #width60 { width: 60%; }
.w61, #width61 { width: 61%; }
.w62, #width62 { width: 62%; }
.w63, #width63 { width: 63%; }
.w64, #width64 { width: 64%; }
.w65, #width65 { width: 65%; }
.w66, #width66 { width: 66%; }
.w67, #width67 { width: 67%; }
.w68, #width68 { width: 68%; }
.w69, #width69 { width: 69%; }
.w70, #width70 { width: 70%; }
.w71, #width71 { width: 71%; }
.w72, #width72 { width: 72%; }
.w73, #width73 { width: 73%; }
.w74, #width74 { width: 74%; }
.w75, #width75 { width: 75%; }
.w76, #width76 { width: 76%; }
.w77, #width77 { width: 77%; }
.w78, #width78 { width: 78%; }
.w79, #width79 { width: 79%; }
.w80, #width80 { width: 80%; }
.w81, #width81 { width: 81%; }
.w82, #width82 { width: 82%; }
.w83, #width83 { width: 83%; }
.w84, #width84 { width: 84%; }
.w85, #width85 { width: 85%; }
.w86, #width86 { width: 86%; }
.w87, #width87 { width: 87%; }
.w88, #width88 { width: 88%; }
.w89, #width89 { width: 89%; }
.w90, #width90 { width: 90%; }
.w91, #width91 { width: 91%; }
.w92, #width92 { width: 92%; }
.w93, #width93 { width: 93%; }
.w94, #width94 { width: 94%; }
.w95, #width95 { width: 95%; }
.w96, #width96 { width: 96%; }
.w97, #width97 { width: 97%; }
.w98, #width98 { width: 98%; }
.w99, #width99 { width: 99%; }
.w100, #width100 { width: 100%; }

}