:root {
    --responsive-columns: 24;
    --responsive-font-size-large-desktop: 18px;
    --responsive-font-size-standard: 16px;
    --responsive-font-size-small-desktop: 16px;
    --responsive-font-size-tablet: 16px;
    --responsive-font-size-mobile: 15px;
    --responsive-font-size-small-mobile: 14px;
    --responsive-gap: 5px;
    --responsive-gap-x: 0px;
    --responsive-gap-y: 0px;
}

html:not([data-size]),
html[data-size="standard"] {
    --responsive-size: standard;
    font-size: var(--responsive-font-size-standard);
}

html[data-size="small-desktop"] {
    --responsive-size: small-desktop;
    font-size: var(--responsive-font-size-small-desktop);
}

html[data-size="large-desktop"] {
    --responsive-size: large-desktop;
    font-size: var(--responsive-font-size-large-desktop);
}

html[data-size="tablet"] {
    --responsive-size: tablet;
    font-size: var(--responsive-font-size-tablet);
}

html[data-size="mobile"] {
    --responsive-size: mobile;
    font-size: var(--responsive-font-size-mobile);
}

html[data-size="small-mobile"] {
    --responsive-size: small-mobile;
    font-size: var(--responsive-font-size-small-mobile);
}

.colspan-1 { --span: 1; }
.colspan-2 { --span: 2; }
.colspan-3 { --span: 3; }
.colspan-4 { --span: 4; }
.colspan-5 { --span: 5; }
.colspan-6 { --span: 6; }
.colspan-7 { --span: 7; }
.colspan-8 { --span: 8; }
.colspan-9 { --span: 9; }
.colspan-10 { --span: 10; }
.colspan-11 { --span: 11; }
.colspan-12 { --span: 12; }
.colspan-13 { --span: 13; }
.colspan-14 { --span: 14; }
.colspan-15 { --span: 15; }
.colspan-16 { --span: 16; }
.colspan-17 { --span: 17; }
.colspan-18 { --span: 18; }
.colspan-19 { --span: 19; }
.colspan-20 { --span: 20; }
.colspan-21 { --span: 21; }
.colspan-22 { --span: 22; }
.colspan-23 { --span: 23; }
.colspan-24 { --span: 24; }

.standard-colspan-1 { --standard-span: 1; }
.standard-colspan-2 { --standard-span: 2; }
.standard-colspan-3 { --standard-span: 3; }
.standard-colspan-4 { --standard-span: 4; }
.standard-colspan-5 { --standard-span: 5; }
.standard-colspan-6 { --standard-span: 6; }
.standard-colspan-7 { --standard-span: 7; }
.standard-colspan-8 { --standard-span: 8; }
.standard-colspan-9 { --standard-span: 9; }
.standard-colspan-10 { --standard-span: 10; }
.standard-colspan-11 { --standard-span: 11; }
.standard-colspan-12 { --standard-span: 12; }
.standard-colspan-13 { --standard-span: 13; }
.standard-colspan-14 { --standard-span: 14; }
.standard-colspan-15 { --standard-span: 15; }
.standard-colspan-16 { --standard-span: 16; }
.standard-colspan-17 { --standard-span: 17; }
.standard-colspan-18 { --standard-span: 18; }
.standard-colspan-19 { --standard-span: 19; }
.standard-colspan-20 { --standard-span: 20; }
.standard-colspan-21 { --standard-span: 21; }
.standard-colspan-22 { --standard-span: 22; }
.standard-colspan-23 { --standard-span: 23; }
.standard-colspan-24 { --standard-span: 24; }

.large-desktop-colspan-1 { --large-desktop-span: 1; }
.large-desktop-colspan-2 { --large-desktop-span: 2; }
.large-desktop-colspan-3 { --large-desktop-span: 3; }
.large-desktop-colspan-4 { --large-desktop-span: 4; }
.large-desktop-colspan-5 { --large-desktop-span: 5; }
.large-desktop-colspan-6 { --large-desktop-span: 6; }
.large-desktop-colspan-7 { --large-desktop-span: 7; }
.large-desktop-colspan-8 { --large-desktop-span: 8; }
.large-desktop-colspan-9 { --large-desktop-span: 9; }
.large-desktop-colspan-10 { --large-desktop-span: 10; }
.large-desktop-colspan-11 { --large-desktop-span: 11; }
.large-desktop-colspan-12 { --large-desktop-span: 12; }
.large-desktop-colspan-13 { --large-desktop-span: 13; }
.large-desktop-colspan-14 { --large-desktop-span: 14; }
.large-desktop-colspan-15 { --large-desktop-span: 15; }
.large-desktop-colspan-16 { --large-desktop-span: 16; }
.large-desktop-colspan-17 { --large-desktop-span: 17; }
.large-desktop-colspan-18 { --large-desktop-span: 18; }
.large-desktop-colspan-19 { --large-desktop-span: 19; }
.large-desktop-colspan-20 { --large-desktop-span: 20; }
.large-desktop-colspan-21 { --large-desktop-span: 21; }
.large-desktop-colspan-22 { --large-desktop-span: 22; }
.large-desktop-colspan-23 { --large-desktop-span: 23; }
.large-desktop-colspan-24 { --large-desktop-span: 24; }

.small-desktop-colspan-1 { --small-desktop-span: 1; }
.small-desktop-colspan-2 { --small-desktop-span: 2; }
.small-desktop-colspan-3 { --small-desktop-span: 3; }
.small-desktop-colspan-4 { --small-desktop-span: 4; }
.small-desktop-colspan-5 { --small-desktop-span: 5; }
.small-desktop-colspan-6 { --small-desktop-span: 6; }
.small-desktop-colspan-7 { --small-desktop-span: 7; }
.small-desktop-colspan-8 { --small-desktop-span: 8; }
.small-desktop-colspan-9 { --small-desktop-span: 9; }
.small-desktop-colspan-10 { --small-desktop-span: 10; }
.small-desktop-colspan-11 { --small-desktop-span: 11; }
.small-desktop-colspan-12 { --small-desktop-span: 12; }
.small-desktop-colspan-13 { --small-desktop-span: 13; }
.small-desktop-colspan-14 { --small-desktop-span: 14; }
.small-desktop-colspan-15 { --small-desktop-span: 15; }
.small-desktop-colspan-16 { --small-desktop-span: 16; }
.small-desktop-colspan-17 { --small-desktop-span: 17; }
.small-desktop-colspan-18 { --small-desktop-span: 18; }
.small-desktop-colspan-19 { --small-desktop-span: 19; }
.small-desktop-colspan-20 { --small-desktop-span: 20; }
.small-desktop-colspan-21 { --small-desktop-span: 21; }
.small-desktop-colspan-22 { --small-desktop-span: 22; }
.small-desktop-colspan-23 { --small-desktop-span: 23; }
.small-desktop-colspan-24 { --small-desktop-span: 24; }

.tablet-colspan-1 { --tablet-span: 1; }
.tablet-colspan-2 { --tablet-span: 2; }
.tablet-colspan-3 { --tablet-span: 3; }
.tablet-colspan-4 { --tablet-span: 4; }
.tablet-colspan-5 { --tablet-span: 5; }
.tablet-colspan-6 { --tablet-span: 6; }
.tablet-colspan-7 { --tablet-span: 7; }
.tablet-colspan-8 { --tablet-span: 8; }
.tablet-colspan-9 { --tablet-span: 9; }
.tablet-colspan-10 { --tablet-span: 10; }
.tablet-colspan-11 { --tablet-span: 11; }
.tablet-colspan-12 { --tablet-span: 12; }
.tablet-colspan-13 { --tablet-span: 13; }
.tablet-colspan-14 { --tablet-span: 14; }
.tablet-colspan-15 { --tablet-span: 15; }
.tablet-colspan-16 { --tablet-span: 16; }
.tablet-colspan-17 { --tablet-span: 17; }
.tablet-colspan-18 { --tablet-span: 18; }
.tablet-colspan-19 { --tablet-span: 19; }
.tablet-colspan-20 { --tablet-span: 20; }
.tablet-colspan-21 { --tablet-span: 21; }
.tablet-colspan-22 { --tablet-span: 22; }
.tablet-colspan-23 { --tablet-span: 23; }
.tablet-colspan-24 { --tablet-span: 24; }

.mobile-colspan-1 { --mobile-span: 1; }
.mobile-colspan-2 { --mobile-span: 2; }
.mobile-colspan-3 { --mobile-span: 3; }
.mobile-colspan-4 { --mobile-span: 4; }
.mobile-colspan-5 { --mobile-span: 5; }
.mobile-colspan-6 { --mobile-span: 6; }
.mobile-colspan-7 { --mobile-span: 7; }
.mobile-colspan-8 { --mobile-span: 8; }
.mobile-colspan-9 { --mobile-span: 9; }
.mobile-colspan-10 { --mobile-span: 10; }
.mobile-colspan-11 { --mobile-span: 11; }
.mobile-colspan-12 { --mobile-span: 12; }
.mobile-colspan-13 { --mobile-span: 13; }
.mobile-colspan-14 { --mobile-span: 14; }
.mobile-colspan-15 { --mobile-span: 15; }
.mobile-colspan-16 { --mobile-span: 16; }
.mobile-colspan-17 { --mobile-span: 17; }
.mobile-colspan-18 { --mobile-span: 18; }
.mobile-colspan-19 { --mobile-span: 19; }
.mobile-colspan-20 { --mobile-span: 20; }
.mobile-colspan-21 { --mobile-span: 21; }
.mobile-colspan-22 { --mobile-span: 22; }
.mobile-colspan-23 { --mobile-span: 23; }
.mobile-colspan-24 { --mobile-span: 24; }

.small-mobile-colspan-1 { --small-mobile-span: 1; }
.small-mobile-colspan-2 { --small-mobile-span: 2; }
.small-mobile-colspan-3 { --small-mobile-span: 3; }
.small-mobile-colspan-4 { --small-mobile-span: 4; }
.small-mobile-colspan-5 { --small-mobile-span: 5; }
.small-mobile-colspan-6 { --small-mobile-span: 6; }
.small-mobile-colspan-7 { --small-mobile-span: 7; }
.small-mobile-colspan-8 { --small-mobile-span: 8; }
.small-mobile-colspan-9 { --small-mobile-span: 9; }
.small-mobile-colspan-10 { --small-mobile-span: 10; }
.small-mobile-colspan-11 { --small-mobile-span: 11; }
.small-mobile-colspan-12 { --small-mobile-span: 12; }
.small-mobile-colspan-13 { --small-mobile-span: 13; }
.small-mobile-colspan-14 { --small-mobile-span: 14; }
.small-mobile-colspan-15 { --small-mobile-span: 15; }
.small-mobile-colspan-16 { --small-mobile-span: 16; }
.small-mobile-colspan-17 { --small-mobile-span: 17; }
.small-mobile-colspan-18 { --small-mobile-span: 18; }
.small-mobile-colspan-19 { --small-mobile-span: 19; }
.small-mobile-colspan-20 { --small-mobile-span: 20; }
.small-mobile-colspan-21 { --small-mobile-span: 21; }
.small-mobile-colspan-22 { --small-mobile-span: 22; }
.small-mobile-colspan-23 { --small-mobile-span: 23; }
.small-mobile-colspan-24 { --small-mobile-span: 24; }