// width is defined by --width
// --width is defined by --width-{breakpoint}

.item-container, [xs], [sm], [md], [lg], [xl] {
  --width-xs: 100%;
  --width-sm: 100%;
  --width-md: 100%;
  --width-lg: 100%;
  --width-xl: 100%;
}
[xs="1"] { --width-xs: 8.33%; --width-sm: 8.33%; --width-md: 8.33%; --width-lg: 8.33%; --width-xl: 8.33%; }
[xs="2"] { --width-xs: 16.66%; --width-sm: 16.66%; --width-md: 16.66%; --width-lg: 16.66%; --width-xl: 16.66%; }
[xs="3"] { --width-xs: 25%; --width-sm: 25%; --width-md: 25%; --width-lg: 25%; --width-xl: 25%; }
[xs="4"] { --width-xs: 33.33%; --width-sm: 33.33%; --width-md: 33.33%; --width-lg: 33.33%; --width-xl: 33.33%; }
[xs="5"] { --width-xs: 41.66%; --width-sm: 41.66%; --width-md: 41.66%; --width-lg: 41.66%; --width-xl: 41.66%; }
[xs="6"] { --width-xs: 50%; --width-sm: 50%; --width-md: 50%; --width-lg: 50%; --width-xl: 50%; }
[xs="7"] { --width-xs: 58.33%; --width-sm: 58.33%; --width-md: 58.33%; --width-lg: 58.33%; --width-xl: 58.33%; }
[xs="8"] { --width-xs: 66.66%; --width-sm: 66.66%; --width-md: 66.66%; --width-lg: 66.66%; --width-xl: 66.66%; }
[xs="9"] { --width-xs: 75%; --width-sm: 75%; --width-md: 75%; --width-lg: 75%; --width-xl: 75%; }
[xs="10"] { --width-xs: 83.33%; --width-sm: 83.33%; --width-md: 83.33%; --width-lg: 83.33%; --width-xl: 83.33%; }
[xs="11"] { --width-xs: 91.66%; --width-sm: 91.66%; --width-md: 91.66%; --width-lg: 91.66%; --width-xl: 91.66%; }
[xs="12"] { --width-xs: 100%; --width-sm: 100%; --width-md: 100%; --width-lg: 100%; --width-xl: 100%; }
[xs="grow"] { --xs: 0; --sm: 0; --md: 0; --lg: 0; --xl: 0; flex: 1 1 0; min-width: 0; }
[sm="1"] { --width-sm: 8.33%; --width-md: 8.33%; --width-lg: 8.33%; --width-xl: 8.33%; }
[sm="2"] { --width-sm: 16.66%; --width-md: 16.66%; --width-lg: 16.66%; --width-xl: 16.66%; }
[sm="3"] { --width-sm: 25%; --width-md: 25%; --width-lg: 25%; --width-xl: 25%; }
[sm="4"] { --width-sm: 33.33%; --width-md: 33.33%; --width-lg: 33.33%; --width-xl: 33.33%; }
[sm="5"] { --width-sm: 41.66%; --width-md: 41.66%; --width-lg: 41.66%; --width-xl: 41.66%; }
[sm="6"] { --width-sm: 50%; --width-md: 50%; --width-lg: 50%; --width-xl: 50%; }
[sm="7"] { --width-sm: 58.33%; --width-md: 58.33%; --width-lg: 58.33%; --width-xl: 58.33%; }
[sm="8"] { --width-sm: 66.66%; --width-md: 66.66%; --width-lg: 66.66%; --width-xl: 66.66%; }
[sm="9"] { --width-sm: 75%; --width-md: 75%; --width-lg: 75%; --width-xl: 75%; }
[sm="10"] { --width-sm: 83.33%; --width-md: 83.33%; --width-lg: 83.33%; --width-xl: 83.33%; }
[sm="11"] { --width-sm: 91.66%; --width-md: 91.66%; --width-lg: 91.66%; --width-xl: 91.66%; }
[sm="12"] { --width-sm: 100%; --width-md: 100%; --width-lg: 100%; --width-xl: 100%; }
[sm="grow"] { --sm: 0; --md: 0; --lg: 0; --xl: 0; flex: 1 1 0; min-width: 0; }
[md="1"] { --width-md: 8.33%; --width-lg: 8.33%; --width-xl: 8.33%; }
[md="2"] { --width-md: 16.66%; --width-lg: 16.66%; --width-xl: 16.66%; }
[md="3"] { --width-md: 25%; --width-lg: 25%; --width-xl: 25%; }
[md="4"] { --width-md: 33.33%; --width-lg: 33.33%; --width-xl: 33.33%; }
[md="5"] { --width-md: 41.66%; --width-lg: 41.66%; --width-xl: 41.66%; }
[md="6"] { --width-md: 50%; --width-lg: 50%; --width-xl: 50%; }
[md="7"] { --width-md: 58.33%; --width-lg: 58.33%; --width-xl: 58.33%; }
[md="8"] { --width-md: 66.66%; --width-lg: 66.66%; --width-xl: 66.66%; }
[md="9"] { --width-md: 75%; --width-lg: 75%; --width-xl: 75%; }
[md="10"] { --width-md: 83.33%; --width-lg: 83.33%; --width-xl: 83.33%; }
[md="11"] { --width-md: 91.66%; --width-lg: 91.66%; --width-xl: 91.66%; }
[md="12"] { --width-md: 100%; --width-lg: 100%; --width-xl: 100%; }
[md="grow"] { --md: 0; --lg: 0; --xl: 0; flex: 1 1 0; min-width: 0; }
[lg="1"] { --width-lg: 8.33%; --width-xl: 8.33%; }
[lg="2"] { --width-lg: 16.66%; --width-xl: 16.66%; }
[lg="3"] { --width-lg: 25%; --width-xl: 25%; }
[lg="4"] { --width-lg: 33.33%; --width-xl: 33.33%; }
[lg="5"] { --width-lg: 41.66%; --width-xl: 41.66%; }
[lg="6"] { --width-lg: 50%; --width-xl: 50%; }
[lg="7"] { --width-lg: 58.33%; --width-xl: 58.33%; }
[lg="8"] { --width-lg: 66.66%; --width-xl: 66.66%; }
[lg="9"] { --width-lg: 75%; --width-xl: 75%; }
[lg="10"] { --width-lg: 83.33%; --width-xl: 83.33%; }
[lg="11"] { --width-lg: 91.66%; --width-xl: 91.66%; }
[lg="12"] { --width-lg: 100%; --width-xl: 100%; }
[lg="grow"] { --lg: 0; --xl: 0; flex: 1 1 0; min-width: 0; }
[xl="1"] { --width-xl: 8.33%; }
[xl="2"] { --width-xl: 16.66%; }
[xl="3"] { --width-xl: 25%; }
[xl="4"] { --width-xl: 33.33%; }
[xl="5"] { --width-xl: 41.66%; }
[xl="6"] { --width-xl: 50%; }
[xl="7"] { --width-xl: 58.33%; }
[xl="8"] { --width-xl: 66.66%; }
[xl="9"] { --width-xl: 75%; }
[xl="10"] { --width-xl: 83.33%; }
[xl="11"] { --width-xl: 91.66%; }
[xl="12"] { --width-xl: 100%; }
[xl="grow"] { --xl: 0; flex: 1 1 0; min-width: 0; }
body.screen-xs [xs], body.screen-xs [sm], body.screen-xs [md], body.screen-xs [lg], body.screen-xs [xl] { --width: var(--width-xs); width: var(--width); }
body.screen-sm [xs], body.screen-sm [sm], body.screen-sm [md], body.screen-sm [lg], body.screen-sm [xl] { --width: var(--width-sm); width: var(--width); }
body.screen-md [xs], body.screen-md [sm], body.screen-md [md], body.screen-md [lg], body.screen-md [xl] { --width: var(--width-md); width: var(--width); }
body.screen-lg [xs], body.screen-lg [sm], body.screen-lg [md], body.screen-lg [lg], body.screen-lg [xl] { --width: var(--width-lg); width: var(--width); }
body.screen-xl [xs], body.screen-xl [sm], body.screen-xl [md], body.screen-xl [lg], body.screen-xl [xl] { --width: var(--width-xl); width: var(--width); }
body.screen-xs .item-container[xs="0"] { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
body.screen-sm .item-container[xs="0"]:not([sm]) { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
body.screen-sm .item-container[sm="0"] { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
body.screen-md .item-container[xs="0"]:not([sm]):not([md]) { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
body.screen-md .item-container[sm="0"]:not([md]) { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
body.screen-md .item-container[md="0"] { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
body.screen-lg .item-container[xs="0"]:not([sm]):not([md]):not([lg]) { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
body.screen-lg .item-container[sm="0"]:not([md]):not([lg]) { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
body.screen-lg .item-container[md="0"]:not([lg]) { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
body.screen-lg .item-container[lg="0"] { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
body.screen-xl .item-container[xs="0"]:not([sm]):not([md]):not([lg]):not([xl]) { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
body.screen-xl .item-container[sm="0"]:not([md]):not([lg]):not([xl]) { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
body.screen-xl .item-container[md="0"]:not([lg]):not([xl]) { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
body.screen-xl .item-container[lg="0"]:not([xl]) { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
body.screen-xl .item-container[xl="0"] { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }
:root {
  --width-content-xs: 95vw;
}
:root {
  --width-content-sm: 90vw;
}
:root {
  --width-content-md: 90vw;
}
:root {
  --width-content-lg: 90vw;
}
:root {
  --width-content-xl: 80vw;
}
body.screen-xs {
  --width-content: var(--width-content-xs);
  --width-margin: calc((100vw - var(--width-content)) / 2);
}
body.screen-sm {
  --width-content: var(--width-content-sm);
  --width-margin: calc((100vw - var(--width-content)) / 2);
}
body.screen-md {
  --width-content: var(--width-content-md);
  --width-margin: calc((100vw - var(--width-content)) / 2);
}
body.screen-lg {
  --width-content: var(--width-content-lg);
  --width-margin: calc((100vw - var(--width-content)) / 2);
}
body.screen-xl {
  --width-content: var(--width-content-xl);
  --width-margin: calc((100vw - var(--width-content)) / 2);
}
.margins > .row-content {
  --width-xs: var(--width-content-xs);
}
.margins > .row-content {
  --width-sm: var(--width-content-sm);
}
.margins > .row-content {
  --width-md: var(--width-content-md);
}
.margins > .row-content {
  --width-lg: var(--width-content-lg);
}
.margins > .row-content {
  --width-xl: var(--width-content-xl);
}
.row-content { --width-margin: 0; }
body.screen-xs  .margins > .row-content {
  --width-margin: calc((100vw - var(--width-xs)) / 2);
}
body.screen-sm  .margins > .row-content {
  --width-margin: calc((100vw - var(--width-sm)) / 2);
}
body.screen-md  .margins > .row-content {
  --width-margin: calc((100vw - var(--width-md)) / 2);
}
body.screen-lg  .margins > .row-content {
  --width-margin: calc((100vw - var(--width-lg)) / 2);
}
body.screen-xl  .margins > .row-content {
  --width-margin: calc((100vw - var(--width-xl)) / 2);
}