:root {
    /* Spacing - Margins & Paddings */
    --base-spacing-unit: 5px;
    --spacing-none: 0;
    --spacing-x: var(--base-spacing-unit);
    --spacing-s: calc(var(--base-spacing-unit) * 2);
    --spacing-m: calc(var(--base-spacing-unit) * 3);
    --spacing-l: calc(var(--base-spacing-unit) * 4);
    --spacing-xl: calc(var(--base-spacing-unit) * 6);

    /* Grid Gaps */
    --grid-gap-0: 0px;
    --grid-gap-1: var(--spacing-x);
    --grid-gap-2: var(--spacing-s);
    --grid-gap-3: var(--spacing-m);
    --grid-gap-4: var(--spacing-l);
    --grid-gap-5: var(--spacing-xl);
    --grid-gap-6: calc(var(--base-spacing-unit) * 6);
    --grid-gap-7: calc(var(--base-spacing-unit) * 7);
    --grid-gap-8: calc(var(--base-spacing-unit) * 8);
    --grid-gap-9: calc(var(--base-spacing-unit) * 9);
    --grid-gap-10: calc(var(--base-spacing-unit) * 10);
    --grid-gap-11: calc(var(--base-spacing-unit) * 11);
    --grid-gap-12: calc(var(--base-spacing-unit) * 12);
    --grid-gap-13: calc(var(--base-spacing-unit) * 13);
    --grid-gap-14: calc(var(--base-spacing-unit) * 14);
    --grid-gap-15: calc(var(--base-spacing-unit) * 15);
    --grid-gap-16: calc(var(--base-spacing-unit) * 16);
    --grid-gap-17: calc(var(--base-spacing-unit) * 17);
    --grid-gap-18: calc(var(--base-spacing-unit) * 18);
    --grid-gap-19: calc(var(--base-spacing-unit) * 19);
    --grid-gap-20: calc(var(--base-spacing-unit) * 20);
}

.grid{
    --grid-number: 1;
    --grid-gutter: var(--grid-gap-0);
    display:grid;
    grid-template-columns:repeat(var(--grid-number), 1fr);
    grid-gap:var(--grid-gutter);
}

/* ... (Grid system classes - g-*, gc-*, gr-*, gt-*, responsive grid classes) ...  */
/* (Copied from the previous response - framework.css file) */
.grid[class*=g-2]{--grid-number: 2}
.grid[class*=g-3]{--grid-number: 3}
.grid[class*=g-4]{--grid-number: 4}
.grid[class*=g-5]{--grid-number: 5}
.grid[class*=g-6]{--grid-number: 6}
.grid[class*=g-7]{--grid-number: 7}
.grid[class*=g-8]{--grid-number: 8}
.grid[class*=g-9]{--grid-number: 9}
.grid[class*=g-10]{--grid-number: 10}
.grid[class*=g-11]{--grid-number: 11}
.grid[class*=g-12]{--grid-number: 12}
.grid[class*=g-13]{--grid-number: 13}
.grid[class*=g-14]{--grid-number: 14}
.grid[class*=g-15]{--grid-number: 15}
.grid[class*=g-16]{--grid-number: 16}
.grid[class*=g-17]{--grid-number: 17}
.grid[class*=g-18]{--grid-number: 18}
.grid[class*=g-19]{--grid-number: 19}
.grid[class*=g-20]{--grid-number: 20}
.grid[class*=g-21]{--grid-number: 21}
.grid[class*=g-22]{--grid-number: 22}
.grid[class*=g-23]{--grid-number: 23}
.grid[class*=g-24]{--grid-number: 24}

.gc-1{grid-column:auto/span 1}
.gr-1{grid-row:auto/span 1}
.gc-2{grid-column:auto/span 2}
.gr-2{grid-row:auto/span 2}
.gc-3{grid-column:auto/span 3}
.gr-3{grid-row:auto/span 3}
.gc-4{grid-column:auto/span 4}
.gr-4{grid-row:auto/span 4}
.gc-5{grid-column:auto/span 5}
.gr-5{grid-row:auto/span 5}
.gc-6{grid-column:auto/span 6}
.gr-6{grid-row:auto/span 6}
.gc-7{grid-column:auto/span 7}
.gr-7{grid-row:auto/span 7}
.gc-8{grid-column:auto/span 8}
.gr-8{grid-row:auto/span 8}
.gc-9{grid-column:auto/span 9}
.gr-9{grid-row:auto/span 9}
.gc-10{grid-column:auto/span 10}
.gr-10{grid-row:auto/span 10}
.gc-11{grid-column:auto/span 11}
.gr-11{grid-row:auto/span 11}
.gc-12{grid-column:auto/span 12}
.gr-12{grid-row:auto/span 12}
.gc-13{grid-column:auto/span 13}
.gr-13{grid-row:auto/span 13}
.gc-14{grid-column:auto/span 14}
.gr-14{grid-row:auto/span 14}
.gc-15{grid-column:auto/span 15}
.gr-15{grid-row:auto/span 15}
.gc-16{grid-column:auto/span 16}
.gr-16{grid-row:auto/span 16}
.gc-17{grid-column:auto/span 17}
.gr-17{grid-row:auto/span 17}
.gc-18{grid-column:auto/span 18}
.gr-18{grid-row:auto/span 18}
.gc-19{grid-column:auto/span 19}
.gr-19{grid-row:auto/span 19}
.gc-20{grid-column:auto/span 20}
.gr-20{grid-row:auto/span 20}
.gc-21{grid-column:auto/span 21}
.gr-21{grid-row:auto/span 21}
.gc-22{grid-column:auto/span 22}
.gr-22{grid-row:auto/span 22}
.gc-23{grid-column:auto/span 23}
.gr-23{grid-row:auto/span 23}
.gc-24{grid-column:auto/span 24}
.gr-24{grid-row:auto/span 24}

.gt-0{grid-gap:var(--grid-gap-0)}
.gt-1{grid-gap:var(--grid-gap-1)}
.gt-2{grid-gap:var(--grid-gap-2)}
.gt-3{grid-gap:var(--grid-gap-3)}
.gt-4{grid-gap:var(--grid-gap-4)}
.gt-5{grid-gap:var(--grid-gap-5)}
.gt-6{grid-gap:var(--grid-gap-6)}
.gt-7{grid-gap:var(--grid-gap-7)}
.gt-8{grid-gap:var(--grid-gap-8)}
.gt-9{grid-gap:var(--grid-gap-9)}
.gt-10{grid-gap:var(--grid-gap-10)}
.gt-11{grid-gap:var(--grid-gap-11)}
.gt-12{grid-gap:var(--grid-gap-12)}
.gt-13{grid-gap:var(--grid-gap-13)}
.gt-14{grid-gap:var(--grid-gap-14)}
.gt-15{grid-gap:var(--grid-gap-15)}
.gt-16{grid-gap:var(--grid-gap-16)}
.gt-17{grid-gap:var(--grid-gap-17)}
.gt-18{grid-gap:var(--grid-gap-18)}
.gt-19{grid-gap:var(--grid-gap-19)}
.gt-20{grid-gap:var(--grid-gap-20)}

.grid-first{order:-1}
.grid-last{order:10000000000000}

@media only screen and (min-width : 401px){
    /* ... (Responsive Grid system classes - g-xs-*, gc-xs-*, gr-xs-*, gt-*) ...  */
    /* (Copied from the previous response - framework.css file) */
    .grid[class*=g-xs-1]{--grid-number: 1}
    .grid[class*=g-xs-2]{--grid-number: 2}
    .grid[class*=g-xs-3]{--grid-number: 3}
    .grid[class*=g-xs-4]{--grid-number: 4}
    .grid[class*=g-xs-5]{--grid-number: 5}
    .grid[class*=g-xs-6]{--grid-number: 6}
    .grid[class*=g-xs-7]{--grid-number: 7}
    .grid[class*=g-xs-8]{--grid-number: 8}
    .grid[class*=g-xs-9]{--grid-number: 9}
    .grid[class*=g-xs-10]{--grid-number: 10}
    .grid[class*=g-xs-11]{--grid-number: 11}
    .grid[class*=g-xs-12]{--grid-number: 12}
    .grid[class*=g-xs-13]{--grid-number: 13}
    .grid[class*=g-xs-14]{--grid-number: 14}
    .grid[class*=g-xs-15]{--grid-number: 15}
    .grid[class*=g-xs-16]{--grid-number: 16}
    .grid[class*=g-xs-17]{--grid-number: 17}
    .grid[class*=g-xs-18]{--grid-number: 18}
    .grid[class*=g-xs-19]{--grid-number: 19}
    .grid[class*=g-xs-20]{--grid-number: 20}
    .grid[class*=g-xs-21]{--grid-number: 21}
    .grid[class*=g-xs-22]{--grid-number: 22}
    .grid[class*=g-xs-23]{--grid-number: 23}
    .grid[class*=g-xs-24]{--grid-number: 24}

    .gt-0{grid-gap:var(--grid-gap-0)}
    .gt-1{grid-gap:var(--grid-gap-1)}
    .gt-2{grid-gap:var(--grid-gap-2)}
    .gt-3{grid-gap:var(--grid-gap-3)}
    .gt-4{grid-gap:var(--grid-gap-4)}
    .gt-5{grid-gap:var(--grid-gap-5)}
    .gt-6{grid-gap:var(--grid-gap-6)}
    .gt-7{grid-gap:var(--grid-gap-7)}
    .gt-8{grid-gap:var(--grid-gap-8)}
    .gt-9{grid-gap:var(--grid-gap-9)}
    .gt-10{grid-gap:var(--grid-gap-10)}
    .gt-11{grid-gap:var(--grid-gap-11)}
    .gt-12{grid-gap:var(--grid-gap-12)}
    .gt-13{grid-gap:var(--grid-gap-13)}
    .gt-14{grid-gap:var(--grid-gap-14)}
    .gt-15{grid-gap:var(--grid-gap-15)}
    .gt-16{grid-gap:var(--grid-gap-16)}
    .gt-17{grid-gap:var(--grid-gap-17)}
    .gt-18{grid-gap:var(--grid-gap-18)}
    .gt-19{grid-gap:var(--grid-gap-19)}
    .gt-20{grid-gap:var(--grid-gap-20)}

    .gc-xs-1{grid-column:auto/span 1}
    .gr-xs-1{grid-row:auto/span 1}
    .gc-xs-2{grid-column:auto/span 2}
    .gr-xs-2{grid-row:auto/span 2}
    .gc-xs-3{grid-column:auto/span 3}
    .gr-xs-3{grid-row:auto/span 3}
    .gc-xs-4{grid-column:auto/span 4}
    .gr-xs-4{grid-row:auto/span 4}
    .gc-xs-5{grid-column:auto/span 5}
    .gr-xs-5{grid-row:auto/span 5}
    .gc-xs-6{grid-column:auto/span 6}
    .gr-xs-6{grid-row:auto/span 6}
    .gc-xs-7{grid-column:auto/span 7}
    .gr-xs-7{grid-row:auto/span 7}
    .gc-xs-8{grid-column:auto/span 8}
    .gr-xs-8{grid-row:auto/span 8}
    .gc-xs-9{grid-column:auto/span 9}
    .gr-xs-9{grid-row:auto/span 9}
    .gc-xs-10{grid-column:auto/span 10}
    .gr-xs-10{grid-row:auto/span 10}
    .gc-xs-11{grid-column:auto/span 11}
    .gr-xs-11{grid-row:auto/span 11}
    .gc-xs-12{grid-column:auto/span 12}
    .gr-xs-12{grid-row:auto/span 12}
    .gc-xs-13{grid-column:auto/span 13}
    .gr-xs-13{grid-row:auto/span 13}
    .gc-xs-14{grid-column:auto/span 14}
    .gr-xs-14{grid-row:auto/span 14}
    .gc-xs-15{grid-column:auto/span 15}
    .gr-xs-15{grid-row:auto/span 15}
    .gc-xs-16{grid-column:auto/span 16}
    .gr-xs-16{grid-row:auto/span 16}
    .gc-xs-17{grid-column:auto/span 17}
    .gr-xs-17{grid-row:auto/span 17}
    .gc-xs-18{grid-column:auto/span 18}
    .gr-xs-18{grid-row:auto/span 18}
    .gc-xs-19{grid-column:auto/span 19}
    .gr-xs-19{grid-row:auto/span 19}
    .gc-xs-20{grid-column:auto/span 20}
    .gr-xs-20{grid-row:auto/span 20}
    .gc-xs-21{grid-column:auto/span 21}
    .gr-xs-21{grid-row:auto/span 21}
    .gc-xs-22{grid-column:auto/span 22}
    .gr-xs-22{grid-row:auto/span 22}
    .gc-xs-23{grid-column:auto/span 23}
    .gr-xs-23{grid-row:auto/span 23}
    .gc-xs-24{grid-column:auto/span 24}
    .gr-xs-24{grid-row:auto/span 24}
}

@media only screen and (min-width : 601px){
    /* ... (Responsive Grid system classes - g-s-*, gc-s-*, gr-s-*, gt-*) ...  */
    /* (Copied from the previous response - framework.css file) */
    .grid[class*=g-s-1]{--grid-number: 1}
    .grid[class*=g-s-2]{--grid-number: 2}
    .grid[class*=g-s-3]{--grid-number: 3}
    .grid[class*=g-s-4]{--grid-number: 4}
    .grid[class*=g-s-5]{--grid-number: 5}
    .grid[class*=g-s-6]{--grid-number: 6}
    .grid[class*=g-s-7]{--grid-number: 7}
    .grid[class*=g-s-8]{--grid-number: 8}
    .grid[class*=g-s-9]{--grid-number: 9}
    .grid[class*=g-s-10]{--grid-number: 10}
    .grid[class*=g-s-11]{--grid-number: 11}
    .grid[class*=g-s-12]{--grid-number: 12}
    .grid[class*=g-s-13]{--grid-number: 13}
    .grid[class*=g-s-14]{--grid-number: 14}
    .grid[class*=g-s-15]{--grid-number: 15}
    .grid[class*=g-s-16]{--grid-number: 16}
    .grid[class*=g-s-17]{--grid-number: 17}
    .grid[class*=g-s-18]{--grid-number: 18}
    .grid[class*=g-s-19]{--grid-number: 19}
    .grid[class*=g-s-20]{--grid-number: 20}
    .grid[class*=g-s-21]{--grid-number: 21}
    .grid[class*=g-s-22]{--grid-number: 22}
    .grid[class*=g-s-23]{--grid-number: 23}
    .grid[class*=g-s-24]{--grid-number: 24}

    .gt-0{grid-gap:var(--grid-gap-0)}
    .gt-1{grid-gap:var(--grid-gap-1)}
    .gt-2{grid-gap:var(--grid-gap-2)}
    .gt-3{grid-gap:var(--grid-gap-3)}
    .gt-4{grid-gap:var(--grid-gap-4)}
    .gt-5{grid-gap:var(--grid-gap-5)}
    .gt-6{grid-gap:var(--grid-gap-6)}
    .gt-7{grid-gap:var(--grid-gap-7)}
    .gt-8{grid-gap:var(--grid-gap-8)}
    .gt-9{grid-gap:var(--grid-gap-9)}
    .gt-10{grid-gap:var(--grid-gap-10)}
    .gt-11{grid-gap:var(--grid-gap-11)}
    .gt-12{grid-gap:var(--grid-gap-12)}
    .gt-13{grid-gap:var(--grid-gap-13)}
    .gt-14{grid-gap:var(--grid-gap-14)}
    .gt-15{grid-gap:var(--grid-gap-15)}
    .gt-16{grid-gap:var(--grid-gap-16)}
    .gt-17{grid-gap:var(--grid-gap-17)}
    .gt-18{grid-gap:var(--grid-gap-18)}
    .gt-19{grid-gap:var(--grid-gap-19)}
    .gt-20{grid-gap:var(--grid-gap-20)}

    .gc-s-1{grid-column:auto/span 1}
    .gr-s-1{grid-row:auto/span 1}
    .gc-s-2{grid-column:auto/span 2}
    .gr-s-2{grid-row:auto/span 2}
    .gc-s-3{grid-column:auto/span 3}
    .gr-s-3{grid-row:auto/span 3}
    .gc-s-4{grid-column:auto/span 4}
    .gr-s-4{grid-row:auto/span 4}
    .gc-s-5{grid-column:auto/span 5}
    .gr-s-5{grid-row:auto/span 5}
    .gc-s-6{grid-column:auto/span 6}
    .gr-s-6{grid-row:auto/span 6}
    .gc-s-7{grid-column:auto/span 7}
    .gr-s-7{grid-row:auto/span 7}
    .gc-s-8{grid-column:auto/span 8}
    .gr-s-8{grid-row:auto/span 8}
    .gc-s-9{grid-column:auto/span 9}
    .gr-s-9{grid-row:auto/span 9}
    .gc-s-10{grid-column:auto/span 10}
    .gr-s-10{grid-row:auto/span 10}
    .gc-s-11{grid-column:auto/span 11}
    .gr-s-11{grid-row:auto/span 11}
    .gc-s-12{grid-column:auto/span 12}
    .gr-s-12{grid-row:auto/span 12}
    .gc-s-13{grid-column:auto/span 13}
    .gr-s-13{grid-row:auto/span 13}
    .gc-s-14{grid-column:auto/span 14}
    .gr-s-14{grid-row:auto/span 14}
    .gc-s-15{grid-column:auto/span 15}
    .gr-s-15{grid-row:auto/span 15}
    .gc-s-16{grid-column:auto/span 16}
    .gr-s-16{grid-row:auto/span 16}
    .gc-s-17{grid-column:auto/span 17}
    .gr-s-17{grid-row:auto/span 17}
    .gc-s-18{grid-column:auto/span 18}
    .gr-s-18{grid-row:auto/span 18}
    .gc-s-19{grid-column:auto/span 19}
    .gr-s-19{grid-row:auto/span 19}
    .gc-s-20{grid-column:auto/span 20}
    .gr-s-20{grid-row:auto/span 20}
    .gc-s-21{grid-column:auto/span 21}
    .gr-s-21{grid-row:auto/span 21}
    .gc-s-22{grid-column:auto/span 22}
    .gr-s-22{grid-row:auto/span 22}
    .gc-s-23{grid-column:auto/span 23}
    .gr-s-23{grid-row:auto/span 23}
    .gc-s-24{grid-column:auto/span 24}
    .gr-s-24{grid-row:auto/span 24}
}

@media only screen and (min-width : 1001px){
    /* ... (Responsive Grid system classes - g-m-*, gc-m-*, gr-m-*, gt-*) ...  */
    /* (Copied from the previous response - framework.css file) */
    .grid[class*=g-m-1]{--grid-number: 1}
    .grid[class*=g-m-2]{--grid-number: 2}
    .grid[class*=g-m-3]{--grid-number: 3}
    .grid[class*=g-m-4]{--grid-number: 4}
    .grid[class*=g-m-5]{--grid-number: 5}
    .grid[class*=g-m-6]{--grid-number: 6}
    .grid[class*=g-m-7]{--grid-number: 7}
    .grid[class*=g-m-8]{--grid-number: 8}
    .grid[class*=g-m-9]{--grid-number: 9}
    .grid[class*=g-m-10]{--grid-number: 10}
    .grid[class*=g-m-11]{--grid-number: 11}
    .grid[class*=g-m-12]{--grid-number: 12}
    .grid[class*=g-m-13]{--grid-number: 13}
    .grid[class*=g-m-14]{--grid-number: 14}
    .grid[class*=g-m-15]{--grid-number: 15}
    .grid[class*=g-m-16]{--grid-number: 16}
    .grid[class*=g-m-17]{--grid-number: 17}
    .grid[class*=g-m-18]{--grid-number: 18}
    .grid[class*=g-m-19]{--grid-number: 19}
    .grid[class*=g-m-20]{--grid-number: 20}
    .grid[class*=g-m-21]{--grid-number: 21}
    .grid[class*=g-m-22]{--grid-number: 22}
    .grid[class*=g-m-23]{--grid-number: 23}
    .grid[class*=g-m-24]{--grid-number: 24}

    .gt-0{grid-gap:var(--grid-gap-0)}
    .gt-1{grid-gap:var(--grid-gap-1)}
    .gt-2{grid-gap:var(--grid-gap-2)}
    .gt-3{grid-gap:var(--grid-gap-3)}
    .gt-4{grid-gap:var(--grid-gap-4)}
    .gt-5{grid-gap:var(--grid-gap-5)}
    .gt-6{grid-gap:var(--grid-gap-6)}
    .gt-7{grid-gap:var(--grid-gap-7)}
    .gt-8{grid-gap:var(--grid-gap-8)}
    .gt-9{grid-gap:var(--grid-gap-9)}
    .gt-10{grid-gap:var(--grid-gap-10)}
    .gt-11{grid-gap:var(--grid-gap-11)}
    .gt-12{grid-gap:var(--grid-gap-12)}
    .gt-13{grid-gap:var(--grid-gap-13)}
    .gt-14{grid-gap:var(--grid-gap-14)}
    .gt-15{grid-gap:var(--grid-gap-15)}
    .gt-16{grid-gap:var(--grid-gap-16)}
    .gt-17{grid-gap:var(--grid-gap-17)}
    .gt-18{grid-gap:var(--grid-gap-18)}
    .gt-19{grid-gap:var(--grid-gap-19)}
    .gt-20{grid-gap:var(--grid-gap-20)}

    .gc-m-1{grid-column:auto/span 1}
    .gr-m-1{grid-row:auto/span 1}
    .gc-m-2{grid-column:auto/span 2}
    .gr-m-2{grid-row:auto/span 2}
    .gc-m-3{grid-column:auto/span 3}
    .gr-m-3{grid-row:auto/span 3}
    .gc-m-4{grid-column:auto/span 4}
    .gr-m-4{grid-row:auto/span 4}
    .gc-m-5{grid-column:auto/span 5}
    .gr-m-5{grid-row:auto/span 5}
    .gc-m-6{grid-column:auto/span 6}
    .gr-m-6{grid-row:auto/span 6}
    .gc-m-7{grid-column:auto/span 7}
    .gr-m-7{grid-row:auto/span 7}
    .gc-m-8{grid-column:auto/span 8}
    .gr-m-8{grid-row:auto/span 8}
    .gc-m-9{grid-column:auto/span 9}
    .gr-m-9{grid-row:auto/span 9}
    .gc-m-10{grid-column:auto/span 10}
    .gr-m-10{grid-row:auto/span 10}
    .gc-m-11{grid-column:auto/span 11}
    .gr-m-11{grid-row:auto/span 11}
    .gc-m-12{grid-column:auto/span 12}
    .gr-m-12{grid-row:auto/span 12}
    .gc-m-13{grid-column:auto/span 13}
    .gr-m-13{grid-row:auto/span 13}
    .gc-m-14{grid-column:auto/span 14}
    .gr-m-14{grid-row:auto/span 14}
    .gc-m-15{grid-column:auto/span 15}
    .gr-m-15{grid-row:auto/span 15}
    .gc-m-16{grid-column:auto/span 16}
    .gr-m-16{grid-row:auto/span 16}
    .gc-m-17{grid-column:auto/span 17}
    .gr-m-17{grid-row:auto/span 17}
    .gc-m-18{grid-column:auto/span 18}
    .gr-m-18{grid-row:auto/span 18}
    .gc-m-19{grid-column:auto/span 19}
    .gr-m-19{grid-row:auto/span 19}
    .gc-m-20{grid-column:auto/span 20}
    .gr-m-20{grid-row:auto/span 20}
    .gc-m-21{grid-column:auto/span 21}
    .gr-m-21{grid-row:auto/span 21}
    .gc-m-22{grid-column:auto/span 22}
    .gr-m-22{grid-row:auto/span 22}
    .gc-m-23{grid-column:auto/span 23}
    .gr-m-23{grid-row:auto/span 23}
    .gc-m-24{grid-column:auto/span 24}
    .gr-m-24{grid-row:auto/span 24}
}

@media only screen and (min-width : 1201px){
    /* ... (Responsive Grid system classes - g-l-*, gc-l-*, gr-l-*, gt-*) ...  */
    /* (Copied from the previous response - framework.css file) */
    .grid[class*=g-l-1]{--grid-number: 1}
    .grid[class*=g-l-2]{--grid-number: 2}
    .grid[class*=g-l-3]{--grid-number: 3}
    .grid[class*=g-l-4]{--grid-number: 4}
    .grid[class*=g-l-5]{--grid-number: 5}
    .grid[class*=g-l-6]{--grid-number: 6}
    .grid[class*=g-l-7]{--grid-number: 7}
    .grid[class*=g-l-8]{--grid-number: 8}
    .grid[class*=g-l-9]{--grid-number: 9}
    .grid[class*=g-l-10]{--grid-number: 10}
    .grid[class*=g-l-11]{--grid-number: 11}
    .grid[class*=g-l-12]{--grid-number: 12}
    .grid[class*=g-l-13]{--grid-number: 13}
    .grid[class*=g-l-14]{--grid-number: 14}
    .grid[class*=g-l-15]{--grid-number: 15}
    .grid[class*=g-l-16]{--grid-number: 16}
    .grid[class*=g-l-17]{--grid-number: 17}
    .grid[class*=g-l-18]{--grid-number: 18}
    .grid[class*=g-l-19]{--grid-number: 19}
    .grid[class*=g-l-20]{--grid-number: 20}
    .grid[class*=g-l-21]{--grid-number: 21}
    .grid[class*=g-l-22]{--grid-number: 22}
    .grid[class*=g-l-23]{--grid-number: 23}
    .grid[class*=g-l-24]{--grid-number: 24}

    .gt-0{grid-gap:var(--grid-gap-0)}
    .gt-1{grid-gap:var(--grid-gap-1)}
    .gt-2{grid-gap:var(--grid-gap-2)}
    .gt-3{grid-gap:var(--grid-gap-3)}
    .gt-4{grid-gap:var(--grid-gap-4)}
    .gt-5{grid-gap:var(--grid-gap-5)}
    .gt-6{grid-gap:var(--grid-gap-6)}
    .gt-7{grid-gap:var(--grid-gap-7)}
    .gt-8{grid-gap:var(--grid-gap-8)}
    .gt-9{grid-gap:var(--grid-gap-9)}
    .gt-10{grid-gap:var(--grid-gap-10)}
    .gt-11{grid-gap:var(--grid-gap-11)}
    .gt-12{grid-gap:var(--grid-gap-12)}
    .gt-13{grid-gap:var(--grid-gap-13)}
    .gt-14{grid-gap:var(--grid-gap-14)}
    .gt-15{grid-gap:var(--grid-gap-15)}
    .gt-16{grid-gap:var(--grid-gap-16)}
    .gt-17{grid-gap:var(--grid-gap-17)}
    .gt-18{grid-gap:var(--grid-gap-18)}
    .gt-19{grid-gap:var(--grid-gap-19)}
    .gt-20{grid-gap:var(--grid-gap-20)}

    .gc-l-1{grid-column:auto/span 1}
    .gr-l-1{grid-row:auto/span 1}
    .gc-l-2{grid-column:auto/span 2}
    .gr-l-2{grid-row:auto/span 2}
    .gc-l-3{grid-column:auto/span 3}
    .gr-l-3{grid-row:auto/span 3}
    .gc-l-4{grid-column:auto/span 4}
    .gr-l-4{grid-row:auto/span 4}
    .gc-l-5{grid-column:auto/span 5}
    .gr-l-5{grid-row:auto/span 5}
    .gc-l-6{grid-column:auto/span 6}
    .gr-l-6{grid-row:auto/span 6}
    .gc-l-7{grid-column:auto/span 7}
    .gr-l-7{grid-row:auto/span 7}
    .gc-l-8{grid-column:auto/span 8}
    .gr-l-8{grid-row:auto/span 8}
    .gc-l-9{grid-column:auto/span 9}
    .gr-l-9{grid-row:auto/span 9}
    .gc-l-10{grid-column:auto/span 10}
    .gr-l-10{grid-row:auto/span 10}
    .gc-l-11{grid-column:auto/span 11}
    .gr-l-11{grid-row:auto/span 11}
    .gc-l-12{grid-column:auto/span 12}
    .gr-l-12{grid-row:auto/span 12}
    .gc-l-13{grid-column:auto/span 13}
    .gr-l-13{grid-row:auto/span 13}
    .gc-l-14{grid-column:auto/span 14}
    .gr-l-14{grid-row:auto/span 14}
    .gc-l-15{grid-column:auto/span 15}
    .gr-l-15{grid-row:auto/span 15}
    .gc-l-16{grid-column:auto/span 16}
    .gr-l-16{grid-row:auto/span 16}
    .gc-l-17{grid-column:auto/span 17}
    .gr-l-17{grid-row:auto/span 17}
    .gc-l-18{grid-column:auto/span 18}
    .gr-l-18{grid-row:auto/span 18}
    .gc-l-19{grid-column:auto/span 19}
    .gr-l-19{grid-row:auto/span 19}
    .gc-l-20{grid-column:auto/span 20}
    .gr-l-20{grid-row:auto/span 20}
    .gc-l-21{grid-column:auto/span 21}
    .gr-l-21{grid-row:auto/span 21}
    .gc-l-22{grid-column:auto/span 22}
    .gr-l-22{grid-row:auto/span 22}
    .gc-l-23{grid-column:auto/span 23}
    .gr-l-23{grid-row:auto/span 23}
    .gc-l-24{grid-column:auto/span 24}
    .gr-l-24{grid-row:auto/span 24}
}

@media only screen and (min-width : 1701px){
    /* ... (Responsive Grid system classes - g-xl-*, gc-xl-*, gr-xl-*, gt-*) ...  */
    /* (Copied from the previous response - framework.css file) */
    .grid[class*=g-xl-1]{--grid-number: 1}
    .grid[class*=g-xl-2]{--grid-number: 2}
    .grid[class*=g-xl-3]{--grid-number: 3}
    .grid[class*=g-xl-4]{--grid-number: 4}
    .grid[class*=g-xl-5]{--grid-number: 5}
    .grid[class*=g-xl-6]{--grid-number: 6}
    .grid[class*=g-xl-7]{--grid-number: 7}
    .grid[class*=g-xl-8]{--grid-number: 8}
    .grid[class*=g-xl-9]{--grid-number: 9}
    .grid[class*=g-xl-10]{--grid-number: 10}
    .grid[class*=g-xl-11]{--grid-number: 11}
    .grid[class*=g-xl-12]{--grid-number: 12}
    .grid[class*=g-xl-13]{--grid-number: 13}
    .grid[class*=g-xl-14]{--grid-number: 14}
    .grid[class*=g-xl-15]{--grid-number: 15}
    .grid[class*=g-xl-16]{--grid-number: 16}
    .grid[class*=g-xl-17]{--grid-number: 17}
    .grid[class*=g-xl-18]{--grid-number: 18}
    .grid[class*=g-xl-19]{--grid-number: 19}
    .grid[class*=g-xl-20]{--grid-number: 20}
    .grid[class*=g-xl-21]{--grid-number: 21}
    .grid[class*=g-xl-22]{--grid-number: 22}
    .grid[class*=g-xl-23]{--grid-number: 23}
    .grid[class*=g-xl-24]{--grid-number: 24}

    .gt-0{grid-gap:var(--grid-gap-0)}
    .gt-1{grid-gap:var(--grid-gap-1)}
    .gt-2{grid-gap:var(--grid-gap-2)}
    .gt-3{grid-gap:var(--grid-gap-3)}
    .gt-4{grid-gap:var(--grid-gap-4)}
    .gt-5{grid-gap:var(--grid-gap-5)}
    .gt-6{grid-gap:var(--grid-gap-6)}
    .gt-7{grid-gap:var(--grid-gap-7)}
    .gt-8{grid-gap:var(--grid-gap-8)}
    .gt-9{grid-gap:var(--grid-gap-9)}
    .gt-10{grid-gap:var(--grid-gap-10)}
    .gt-11{grid-gap:var(--grid-gap-11)}
    .gt-12{grid-gap:var(--grid-gap-12)}
    .gt-13{grid-gap:var(--grid-gap-13)}
    .gt-14{grid-gap:var(--grid-gap-14)}
    .gt-15{grid-gap:var(--grid-gap-15)}
    .gt-16{grid-gap:var(--grid-gap-16)}
    .gt-17{grid-gap:var(--grid-gap-17)}
    .gt-18{grid-gap:var(--grid-gap-18)}
    .gt-19{grid-gap:var(--grid-gap-19)}
    .gt-20{grid-gap:var(--grid-gap-20)}

    .gc-xl-1{grid-column:auto/span 1}
    .gr-xl-1{grid-row:auto/span 1}
    .gc-xl-2{grid-column:auto/span 2}
    .gr-xl-2{grid-row:auto/span 2}
    .gc-xl-3{grid-column:auto/span 3}
    .gr-xl-3{grid-row:auto/span 3}
    .gc-xl-4{grid-column:auto/span 4}
    .gr-xl-4{grid-row:auto/span 4}
    .gc-xl-5{grid-column:auto/span 5}
    .gr-xl-5{grid-row:auto/span 5}
    .gc-xl-6{grid-column:auto/span 6}
    .gr-xl-6{grid-row:auto/span 6}
    .gc-xl-7{grid-column:auto/span 7}
    .gr-xl-7{grid-row:auto/span 7}
    .gc-xl-8{grid-column:auto/span 8}
    .gr-xl-8{grid-row:auto/span 8}
    .gc-xl-9{grid-column:auto/span 9}
    .gr-xl-9{grid-row:auto/span 9}
    .gc-xl-10{grid-column:auto/span 10}
    .gr-xl-10{grid-row:auto/span 10}
    .gc-xl-11{grid-column:auto/span 11}
    .gr-xl-11{grid-row:auto/span 11}
    .gc-xl-12{grid-column:auto/span 12}
    .gr-xl-12{grid-row:auto/span 12}
    .gc-xl-13{grid-column:auto/span 13}
    .gr-xl-13{grid-row:auto/span 13}
    .gc-xl-14{grid-column:auto/span 14}
    .gr-xl-14{grid-row:auto/span 14}
    .gc-xl-15{grid-column:auto/span 15}
    .gr-xl-15{grid-row:auto/span 15}
    .gc-xl-16{grid-column:auto/span 16}
    .gr-xl-16{grid-row:auto/span 16}
    .gc-xl-17{grid-column:auto/span 17}
    .gr-xl-17{grid-row:auto/span 17}
    .gc-xl-18{grid-column:auto/span 18}
    .gr-xl-18{grid-row:auto/span 18}
    .gc-xl-19{grid-column:auto/span 19}
    .gr-xl-19{grid-row:auto/span 19}
    .gc-xl-20{grid-column:auto/span 20}
    .gr-xl-20{grid-row:auto/span 20}
    .gc-xl-21{grid-column:auto/span 21}
    .gr-xl-21{grid-row:auto/span 21}
    .gc-xl-22{grid-column:auto/span 22}
    .gr-xl-22{grid-row:auto/span 22}
    .gc-xl-23{grid-column:auto/span 23}
    .gr-xl-23{grid-row:auto/span 23}
    .gc-xl-24{grid-column:auto/span 24}
    .gr-xl-24{grid-row:auto/span 24}
}

@media only screen and (min-width : 2201px){
    /* ... (Responsive Grid system classes - g-uhd-*, gc-uhd-*, gr-uhd-*, gt-*) ...  */
    /* (Copied from the previous response - framework.css file) */
    .grid[class*=g-uhd-1]{--grid-number: 1}
    .grid[class*=g-uhd-2]{--grid-number: 2}
    .grid[class*=g-uhd-3]{--grid-number: 3}
    .grid[class*=g-uhd-4]{--grid-number: 4}
    .grid[class*=g-uhd-5]{--grid-number: 5}
    .grid[class*=g-uhd-6]{--grid-number: 6}
    .grid[class*=g-uhd-7]{--grid-number: 7}
    .grid[class*=g-uhd-8]{--grid-number: 8}
    .grid[class*=g-uhd-9]{--grid-number: 9}
    .grid[class*=g-uhd-10]{--grid-number: 10}
    .grid[class*=g-uhd-11]{--grid-number: 11}
    .grid[class*=g-uhd-12]{--grid-number: 12}
    .grid[class*=g-uhd-13]{--grid-number: 13}
    .grid[class*=g-uhd-14]{--grid-number: 14}
    .grid[class*=g-uhd-15]{--grid-number: 15}
    .grid[class*=g-uhd-16]{--grid-number: 16}
    .grid[class*=g-uhd-17]{--grid-number: 17}
    .grid[class*=g-uhd-18]{--grid-number: 18}
    .grid[class*=g-uhd-19]{--grid-number: 19}
    .grid[class*=g-uhd-20]{--grid-number: 20}
    .grid[class*=g-uhd-21]{--grid-number: 21}
    .grid[class*=g-uhd-22]{--grid-number: 22}
    .grid[class*=g-uhd-23]{--grid-number: 23}
    .grid[class*=g-uhd-24]{--grid-number: 24}

    .gt-0{grid-gap:var(--grid-gap-0)}
    .gt-1{grid-gap:var(--grid-gap-1)}
    .gt-2{grid-gap:var(--grid-gap-2)}
    .gt-3{grid-gap:var(--grid-gap-3)}
    .gt-4{grid-gap:var(--grid-gap-4)}
    .gt-5{grid-gap:var(--grid-gap-5)}
    .gt-6{grid-gap:var(--grid-gap-6)}
    .gt-7{grid-gap:var(--grid-gap-7)}
    .gt-8{grid-gap:var(--grid-gap-8)}
    .gt-9{grid-gap:var(--grid-gap-9)}
    .gt-10{grid-gap:var(--grid-gap-10)}
    .gt-11{grid-gap:var(--grid-gap-11)}
    .gt-12{grid-gap:var(--grid-gap-12)}
    .gt-13{grid-gap:var(--grid-gap-13)}
    .gt-14{grid-gap:var(--grid-gap-14)}
    .gt-15{grid-gap:var(--grid-gap-15)}
    .gt-16{grid-gap:var(--grid-gap-16)}
    .gt-17{grid-gap:var(--grid-gap-17)}
    .gt-18{grid-gap:var(--grid-gap-18)}
    .gt-19{grid-gap:var(--grid-gap-19)}
    .gt-20{grid-gap:var(--grid-gap-20)}

    .gc-uhd-1{grid-column:auto/span 1}
    .gr-uhd-1{grid-row:auto/span 1}
    .gc-uhd-2{grid-column:auto/span 2}
    .gr-uhd-2{grid-row:auto/span 2}
    .gc-uhd-3{grid-column:auto/span 3}
    .gr-uhd-3{grid-row:auto/span 3}
    .gc-uhd-4{grid-column:auto/span 4}
    .gr-uhd-4{grid-row:auto/span 4}
    .gc-uhd-5{grid-column:auto/span 5}
    .gr-uhd-5{grid-row:auto/span 5}
    .gc-uhd-6{grid-column:auto/span 6}
    .gr-uhd-6{grid-row:auto/span 6}
    .gc-uhd-7{grid-column:auto/span 7}
    .gr-uhd-7{grid-row:auto/span 7}
    .gc-uhd-8{grid-column:auto/span 8}
    .gr-uhd-8{grid-row:auto/span 8}
    .gc-uhd-9{grid-column:auto/span 9}
    .gr-uhd-9{grid-row:auto/span 9}
    .gc-uhd-10{grid-column:auto/span 10}
    .gr-uhd-10{grid-row:auto/span 10}
    .gc-uhd-11{grid-column:auto/span 11}
    .gr-uhd-11{grid-row:auto/span 11}
    .gc-uhd-12{grid-column:auto/span 12}
    .gr-uhd-12{grid-row:auto/span 12}
    .gc-uhd-13{grid-column:auto/span 13}
    .gr-uhd-13{grid-row:auto/span 13}
    .gc-uhd-14{grid-column:auto/span 14}
    .gr-uhd-14{grid-row:auto/span 14}
    .gc-uhd-15{grid-column:auto/span 15}
    .gr-uhd-15{grid-row:auto/span 15}
    .gc-uhd-16{grid-column:auto/span 16}
    .gr-uhd-16{grid-row:auto/span 16}
    .gc-uhd-17{grid-column:auto/span 17}
    .gr-uhd-17{grid-row:auto/span 17}
    .gc-uhd-18{grid-column:auto/span 18}
    .gr-uhd-18{grid-row:auto/span 18}
    .gc-uhd-19{grid-column:auto/span 19}
    .gr-uhd-19{grid-row:auto/span 19}
    .gc-uhd-20{grid-column:auto/span 20}
    .gr-uhd-20{grid-row:auto/span 20}
    .gc-uhd-21{grid-column:auto/span 21}
    .gr-uhd-21{grid-row:auto/span 21}
    .gc-uhd-22{grid-column:auto/span 22}
    .gr-uhd-22{grid-row:auto/span 22}
    .gc-uhd-23{grid-column:auto/span 23}
    .gr-uhd-23{grid-row:auto/span 23}
    .gc-uhd-24{grid-column:auto/span 24}
    .gr-uhd-24{grid-row:auto/span 24}
}


.flex{display:flex;flex-direction:row;flex-wrap:wrap}
.flex>*{width:100%}
.f-grow,.flex.f-grow>*{flex-grow:1;flex-shrink:1}
.flex-column{flex-direction:column}
.flex-center{align-items:center;align-content:center}
.f-c{justify-content:center}
.f-sa{justify-content:space-around}
.f-sb{justify-content:space-between}

.f-1>*, .fc-1{width:calc(100% / 1)}
.f-2>*, .fc-2{width:calc(100% / 2)}
.f-3>*, .fc-3{width:calc(100% / 3)}
.f-4>*, .fc-4{width:calc(100% / 4)}
.f-5>*, .fc-5{width:calc(100% / 5)}
.f-6>*, .fc-6{width:calc(100% / 6)}
.f-7>*, .fc-7{width:calc(100% / 7)}
.f-8>*, .fc-8{width:calc(100% / 8)}
.f-9>*, .fc-9{width:calc(100% / 9)}
.f-10>*, .fc-10{width:calc(100% / 10)}
.f-11>*, .fc-11{width:calc(100% / 11)}
.f-12>*, .fc-12{width:calc(100% / 12)}
.f-13>*, .fc-13{width:calc(100% / 13)}
.f-14>*, .fc-14{width:calc(100% / 14)}
.f-15>*, .fc-15{width:calc(100% / 15)}
.f-16>*, .fc-16{width:calc(100% / 16)}
.f-17>*, .fc-17{width:calc(100% / 17)}
.f-18>*, .fc-18{width:calc(100% / 18)}
.f-19>*, .fc-19{width:calc(100% / 19)}
.f-20>*, .fc-20{width:calc(100% / 20)}
.f-21>*, .fc-21{width:calc(100% / 21)}
.f-22>*, .fc-22{width:calc(100% / 22)}
.f-23>*, .fc-23{width:calc(100% / 23)}
.f-24>*, .fc-24{width:calc(100% / 24)}

.flex.fp-0>*{padding:var(--spacing-none)}
.flex.fp-1>*{padding:calc(var(--base-spacing-unit) * 1)}
.flex.fp-2>*{padding:calc(var(--base-spacing-unit) * 2)}
.flex.fp-3>*{padding:calc(var(--base-spacing-unit) * 3)}
.flex.fp-4>*{padding:calc(var(--base-spacing-unit) * 4)}
.flex.fp-5>*{padding:var(--spacing-x)}
.flex.fp-6>*{padding:calc(var(--base-spacing-unit) * 6)}
.flex.fp-7>*{padding:calc(var(--base-spacing-unit) * 7)}
.flex.fp-8>*{padding:calc(var(--base-spacing-unit) * 8)}
.flex.fp-9>*{padding:calc(var(--base-spacing-unit) * 9)}
.flex.fp-10>*{padding:var(--spacing-s)}
.flex.fp-11>*{padding:calc(var(--base-spacing-unit) * 11)}
.flex.fp-12>*{padding:calc(var(--base-spacing-unit) * 12)}
.flex.fp-13>*{padding:calc(var(--base-spacing-unit) * 13)}
.flex.fp-14>*{padding:calc(var(--base-spacing-unit) * 14)}
.flex.fp-15>*{padding:var(--spacing-m)}
.flex.fp-16>*{padding:calc(var(--base-spacing-unit) * 16)}
.flex.fp-17>*{padding:calc(var(--base-spacing-unit) * 17)}
.flex.fp-18>*{padding:calc(var(--base-spacing-unit) * 18)}
.flex.fp-19>*{padding:calc(var(--base-spacing-unit) * 19)}
.flex.fp-20>*{padding:var(--spacing-l)}
.flex.fp-21>*{padding:calc(var(--base-spacing-unit) * 21)}
.flex.fp-22>*{padding:calc(var(--base-spacing-unit) * 22)}
.flex.fp-23>*{padding:calc(var(--base-spacing-unit) * 23)}
.flex.fp-24>*{padding:calc(var(--base-spacing-unit) * 24)}
.flex.fp-25>*{padding:calc(var(--base-spacing-unit) * 25)}
.flex.fp-26>*{padding:calc(var(--base-spacing-unit) * 26)}
.flex.fp-27>*{padding:calc(var(--base-spacing-unit) * 27)}
.flex.fp-28>*{padding:calc(var(--base-spacing-unit) * 28)}
.flex.fp-29>*{padding:calc(var(--base-spacing-unit) * 29)}
.flex.fp-30>*{padding:var(--spacing-xl)}

@media only screen and (min-width : 601px){
    .f-s-1>*, .fc-s-1{width:calc(100% / 1)}
    .f-s-2>*, .fc-s-2{width:calc(100% / 2)}
    .f-s-3>*, .fc-s-3{width:calc(100% / 3)}
    .f-s-4>*, .fc-s-4{width:calc(100% / 4)}
    .f-s-5>*, .fc-s-5{width:calc(100% / 5)}
    .f-s-6>*, .fc-s-6{width:calc(100% / 6)}
    .f-s-7>*, .fc-s-7{width:calc(100% / 7)}
    .f-s-8>*, .fc-s-8{width:calc(100% / 8)}
    .f-s-9>*, .fc-s-9{width:calc(100% / 9)}
    .f-s-10>*, .fc-s-10{width:calc(100% / 10)}
    .f-s-11>*, .fc-s-11{width:calc(100% / 11)}
    .f-s-12>*, .fc-s-12{width:calc(100% / 12)}
    .f-s-13>*, .fc-s-13{width:calc(100% / 13)}
    .f-s-14>*, .fc-s-14{width:calc(100% / 14)}
    .f-s-15>*, .fc-s-15{width:calc(100% / 15)}
    .f-s-16>*, .fc-s-16{width:calc(100% / 16)}
    .f-s-17>*, .fc-s-17{width:calc(100% / 17)}
    .f-s-18>*, .fc-s-18{width:calc(100% / 18)}
    .f-s-19>*, .fc-s-19{width:calc(100% / 19)}
    .f-s-20>*, .fc-s-20{width:calc(100% / 20)}
    .f-s-21>*, .fc-s-21{width:calc(100% / 21)}
    .f-s-22>*, .fc-s-22{width:calc(100% / 22)}
    .f-s-23>*, .fc-s-23{width:calc(100% / 23)}
    .f-s-24>*, .fc-s-24{width:calc(100% / 24)}
}

@media only screen and (min-width : 1001px){
    .f-m-1>*, .fc-m-1{width:calc(100% / 1)}
    .f-m-2>*, .fc-m-2{width:calc(100% / 2)}
    .f-m-3>*, .fc-m-3{width:calc(100% / 3)}
    .f-m-4>*, .fc-m-4{width:calc(100% / 4)}
    .f-m-5>*, .fc-m-5{width:calc(100% / 5)}
    .f-m-6>*, .fc-m-6{width:calc(100% / 6)}
    .f-m-7>*, .fc-m-7{width:calc(100% / 7)}
    .f-m-8>*, .fc-m-8{width:calc(100% / 8)}
    .f-m-9>*, .fc-m-9{width:calc(100% / 9)}
    .f-m-10>*, .fc-m-10{width:calc(100% / 10)}
    .f-m-11>*, .fc-m-11{width:calc(100% / 11)}
    .f-m-12>*, .fc-m-12{width:calc(100% / 12)}
    .f-m-13>*, .fc-m-13{width:calc(100% / 13)}
    .f-m-14>*, .fc-m-14{width:calc(100% / 14)}
    .f-m-15>*, .fc-m-15{width:calc(100% / 15)}
    .f-m-16>*, .fc-m-16{width:calc(100% / 16)}
    .f-m-17>*, .fc-m-17{width:calc(100% / 17)}
    .f-m-18>*, .fc-m-18{width:calc(100% / 18)}
    .f-m-19>*, .fc-m-19{width:calc(100% / 19)}
    .f-m-20>*, .fc-m-20{width:calc(100% / 20)}
    .f-m-21>*, .fc-m-21{width:calc(100% / 21)}
    .f-m-22>*, .fc-m-22{width:calc(100% / 22)}
    .f-m-23>*, .fc-m-23{width:calc(100% / 23)}
    .f-m-24>*, .fc-m-24{width:calc(100% / 24)}
}

@media only screen and (min-width : 1201px){
    .f-l-1>*, .fc-l-1{width:calc(100% / 1)}
    .f-l-2>*, .fc-l-2{width:calc(100% / 2)}
    .f-l-3>*, .fc-l-3{width:calc(100% / 3)}
    .f-l-4>*, .fc-l-4{width:calc(100% / 4)}
    .f-l-5>*, .fc-l-5{width:calc(100% / 5)}
    .f-l-6>*, .fc-l-6{width:calc(100% / 6)}
    .f-l-7>*, .fc-l-7{width:calc(100% / 7)}
    .f-l-8>*, .fc-l-8{width:calc(100% / 8)}
    .f-l-9>*, .fc-l-9{width:calc(100% / 9)}
    .f-l-10>*, .fc-l-10{width:calc(100% / 10)}
    .f-l-11>*, .fc-l-11{width:calc(100% / 11)}
    .f-l-12>*, .fc-l-12{width:calc(100% / 12)}
    .f-l-13>*, .fc-l-13{width:calc(100% / 13)}
    .f-l-14>*, .fc-l-14{width:calc(100% / 14)}
    .f-l-15>*, .fc-l-15{width:calc(100% / 15)}
    .f-l-16>*, .fc-l-16{width:calc(100% / 16)}
    .f-l-17>*, .fc-l-17{width:calc(100% / 17)}
    .f-l-18>*, .fc-l-18{width:calc(100% / 18)}
    .f-l-19>*, .fc-l-19{width:calc(100% / 19)}
    .f-l-20>*, .fc-l-20{width:calc(100% / 20)}
    .f-l-21>*, .fc-l-21{width:calc(100% / 21)}
    .f-l-22>*, .fc-l-22{width:calc(100% / 22)}
    .f-l-23>*, .fc-l-23{width:calc(100% / 23)}
    .f-l-24>*, .fc-l-24{width:calc(100% / 24)}
}

@media only screen and (min-width : 1701px){
    .f-xl-1>*, .fc-xl-1{width:calc(100% / 1)}
    .f-xl-2>*, .fc-xl-2{width:calc(100% / 2)}
    .f-xl-3>*, .fc-xl-3{width:calc(100% / 3)}
    .f-xl-4>*, .fc-xl-4{width:calc(100% / 4)}
    .f-xl-5>*, .fc-xl-5{width:calc(100% / 5)}
    .f-xl-6>*, .fc-xl-6{width:calc(100% / 6)}
    .f-xl-7>*, .fc-xl-7{width:calc(100% / 7)}
    .f-xl-8>*, .fc-xl-8{width:calc(100% / 8)}
    .f-xl-9>*, .fc-xl-9{width:calc(100% / 9)}
    .f-xl-10>*, .fc-xl-10{width:calc(100% / 10)}
    .f-xl-11>*, .fc-xl-11{width:calc(100% / 11)}
    .f-xl-12>*, .fc-xl-12{width:calc(100% / 12)}
    .f-xl-13>*, .fc-xl-13{width:calc(100% / 13)}
    .f-xl-14>*, .fc-xl-14{width:calc(100% / 14)}
    .f-xl-15>*, .fc-xl-15{width:calc(100% / 15)}
    .f-xl-16>*, .fc-xl-16{width:calc(100% / 16)}
    .f-xl-17>*, .fc-xl-17{width:calc(100% / 17)}
    .f-xl-18>*, .fc-xl-18{width:calc(100% / 18)}
    .f-xl-19>*, .fc-xl-19{width:calc(100% / 19)}
    .f-xl-20>*, .fc-xl-20{width:calc(100% / 20)}
    .f-xl-21>*, .fc-xl-21{width:calc(100% / 21)}
    .f-xl-22>*, .fc-xl-22{width:calc(100% / 22)}
    .f-xl-23>*, .fc-xl-23{width:calc(100% / 23)}
    .f-xl-24>*, .fc-xl-24{width:calc(100% / 24)}
}

@media only screen and (min-width : 2201px){
    .f-uhd-1>*, .fc-uhd-1{width:calc(100% / 1)}
    .f-uhd-2>*, .fc-uhd-2{width:calc(100% / 2)}
    .f-uhd-3>*, .fc-uhd-3{width:calc(100% / 3)}
    .f-uhd-4>*, .fc-uhd-4{width:calc(100% / 4)}
    .f-uhd-5>*, .fc-uhd-5{width:calc(100% / 5)}
    .f-uhd-6>*, .fc-uhd-6{width:calc(100% / 6)}
    .f-uhd-7>*, .fc-uhd-7{width:calc(100% / 7)}
    .f-uhd-8>*, .fc-uhd-8{width:calc(100% / 8)}
    .f-uhd-9>*, .fc-uhd-9{width:calc(100% / 9)}
    .f-uhd-10>*, .fc-uhd-10{width:calc(100% / 10)}
    .f-uhd-11>*, .fc-uhd-11{width:calc(100% / 11)}
    .f-uhd-12>*, .fc-uhd-12{width:calc(100% / 12)}
    .f-uhd-13>*, .fc-uhd-13{width:calc(100% / 13)}
    .f-uhd-14>*, .fc-uhd-14{width:calc(100% / 14)}
    .f-uhd-15>*, .fc-uhd-15{width:calc(100% / 15)}
    .f-uhd-16>*, .fc-uhd-16{width:calc(100% / 16)}
    .f-uhd-17>*, .fc-uhd-17{width:calc(100% / 17)}
    .f-uhd-18>*, .fc-uhd-18{width:calc(100% / 18)}
    .f-uhd-19>*, .fc-uhd-19{width:calc(100% / 19)}
    .f-uhd-20>*, .fc-uhd-20{width:calc(100% / 20)}
    .f-uhd-21>*, .fc-uhd-21{width:calc(100% / 21)}
    .f-uhd-22>*, .fc-uhd-22{width:calc(100% / 22)}
    .f-uhd-23>*, .fc-uhd-23{width:calc(100% / 23)}
    .f-uhd-24>*, .fc-uhd-24{width:calc(100% / 24)}
}

body .p-n,body .row .p-n,body .row .col .p-n{padding:var(--spacing-none)}
body .p-n-t,body .row .p-n-t,body .row .col .p-n-t{padding-top:var(--spacing-none)}
body .p-n-r,body .row .p-n-r,body .row .col .p-n-r{padding-right:var(--spacing-none)}
body .p-n-b,body .row .p-n-b,body .row .col .p-n-b{padding-bottom:var(--spacing-none)}
body .p-n-l,body .row .p-n-l,body .row .col .p-n-l{padding-left:var(--spacing-none)}

body .p-x,body .row .p-x,body .row .col .p-x{padding:var(--spacing-x)}
body .pt-x,body .row .pt-x,body .row .col .pt-x{padding-top:var(--spacing-x)}
body .pr-x,body .row .pr-x,body .row .col .pr-x{padding-right:var(--spacing-x)}
body .pb-x,body .row .pb-x,body .row .col .pb-x{padding-bottom:var(--spacing-x)}
body .pl-x,body .row .pl-x,body .row .col .p-xl{padding-left:var(--spacing-x)}

body .p-s,body .row .p-s,body .row .col .p-s{padding:var(--spacing-s)}
body .pt-s,body .row .pt-s,body .row .col .pt-s{padding-top:var(--spacing-s)}
body .pr-s,body .row .pr-s,body .row .col .pr-s{padding-right:var(--spacing-s)}
body .pb-s,body .row .pb-s,body .row .col .pb-s{padding-bottom:var(--spacing-s)}
body .pl-s,body .row .pl-s,body .row .col .pl-s{padding-left:var(--spacing-s)}

body .p-m,body .row .p-m,body .row .col .p-m{padding:var(--spacing-m)}
body .pt-m,body .row .pt-m,body .row .col .pt-m{padding-top:var(--spacing-m)}
body .pr-m,body .row .pr-m,body .row .col .p-m{padding-right:var(--spacing-m)}
body .pb-m,body .row .pb-m,body .row .col .p-m{padding-bottom:var(--spacing-m)}
body .pl-m,body .row .pl-m,body .row .col .p-m{padding-left:var(--spacing-m)}

body .p-l,body .row .p-l,body .row .col .p-l{padding:var(--spacing-l)}
body .pt-l,body .row .pt-l,body .row .col .pt-l{padding-top:var(--spacing-l)}
body .pr-l,body .row .pr-l,body .row .col .p-l{padding-right:var(--spacing-l)}
body .pb-l,body .row .pb-l,body .row .col .p-l{padding-bottom:var(--spacing-l)}
body .pl-l,body .row .pl-l,body .row .col .p-l{padding-left:var(--spacing-l)}

body .p-xl,body .row .p-xl,body .row .col .p-xl{padding:var(--spacing-xl)}
body .pt-xl,body .row .pt-xl,body .row .col .pt-xl{padding-top:var(--spacing-xl)}
body .pr-xl,body .row .pr-xl,body .row .col .p-xl{padding-right:var(--spacing-xl)}
body .pb-xl,body .row .pb-xl,body .row .col .p-xl{padding-bottom:var(--spacing-xl)}
body .pl-xl,body .row .pl-xl,body .row .col .p-xl{padding-left:var(--spacing-xl)}


body .m-n,body .row .m-n,body .row .col .m-n{margin:var(--spacing-none)}
body .m-n-t,body .row .m-n-t,body .row .col .m-n-t{margin-top:var(--spacing-none)}
body .m-n-r,body .row .m-n-r,body .row .col .m-n-r{margin-right:var(--spacing-none)}
body .m-n-b,body .row .m-n-b,body .row .col .m-n-b{margin-bottom:var(--spacing-none)}
body .m-n-l,body .row .m-n-l,body .row .col .m-n-l{margin-left:var(--spacing-none)}

body .m-x,body .row .m-x,body .row .col .m-x{margin:var(--spacing-x)}
body .mt-x,body .row .mt-x,body .row .col .mt-x{margin-top:var(--spacing-x)}
body .mr-x,body .row .mr-x,body .row .col .mr-x{margin-right:var(--spacing-x)}
body .mb-x,body .row .mb-x,body .row .col .mb-x{margin-bottom:var(--spacing-x)}
body .ml-x,body .row .ml-x,body .row .col .m-xl{margin-left:var(--spacing-x)}

body .m-s,body .row .m-s,body .row .col .m-s{margin:var(--spacing-s)}
body .mt-s,body .row .mt-s,body .row .col .mt-s{margin-top:var(--spacing-s)}
body .mr-s,body .row .mr-s,body .row .col .m-s{margin-right:var(--spacing-s)}
body .mb-s,body .row .mb-s,body .row .col .m-s{margin-bottom:var(--spacing-s)}
body .ml-s,body .row .ml-s,body .row .col .m-s{margin-left:var(--spacing-s)}

body .m-m,body .row .m-m,body .row .col .m-m{margin:var(--spacing-m)}
body .mt-m,body .row .mt-m,body .row .col .mt-m{margin-top:var(--spacing-m)}
body .mr-m,body .row .mr-m,body .row .col .m-m{margin-right:var(--spacing-m)}
body .mb-m,body .row .mb-m,body .row .col .m-m{margin-bottom:var(--spacing-m)}
body .ml-m,body .row .ml-m,body .row .col .m-m{margin-left:var(--spacing-m)}

body .m-l,body .row .m-l,body .row .col .m-l{margin:var(--spacing-l)}
body .mt-l,body .row .mt-l,body .row .col .mt-l{margin-top:var(--spacing-l)}
body .mr-l,body .row .mr-l,body .row .col .m-l{margin-right:var(--spacing-l)}
body .mb-l,body .row .mb-l,body .row .col .m-l{margin-bottom:var(--spacing-l)}
body .ml-l,body .row .ml-l,body .row .col .m-l{margin-left:var(--spacing-l)}

body .m-xl,body .row .m-xl,body .row .col .m-xl{margin:var(--spacing-xl)}
body .mt-xl,body .row .mt-xl,body .row .col .mt-xl{margin-top:var(--spacing-xl)}
body .mr-xl,body .row .mr-xl,body .row .col .m-xl{margin-right:var(--spacing-xl)}
body .mb-xl,body .row .mb-xl,body .row .col .m-xl{margin-bottom:var(--spacing-xl)}
body .ml-xl,body .row .ml-xl,body .row .col .m-xl{margin-left:var(--spacing-xl)}