sizes.css

/* 1. ------------------------------------
set global vars on :root */
/*
measure = intrinsic widths sizes
s... = unitless scale values determined by size-scale-ratio
-> can also be computed with a max and min size and steps between
size-lock... = used for computing css locks for every size we need
*/
:root {
  --s-14: calc(var(--s-13) / var(--size-scale-ratio));
  --s-13: calc(var(--s-12) / var(--size-scale-ratio));
  --s-12: calc(var(--s-11) / var(--size-scale-ratio));
  --s-11: calc(var(--s-10) / var(--size-scale-ratio));
  --s-10: calc(var(--s-9) / var(--size-scale-ratio));
  --s-9: calc(var(--s-8) / var(--size-scale-ratio));
  --s-8: calc(var(--s-7) / var(--size-scale-ratio));
  --s-7: calc(var(--s-6) / var(--size-scale-ratio));
  --s-6: calc(var(--s-5) / var(--size-scale-ratio));
  --s-5: calc(var(--s-4) / var(--size-scale-ratio));
  --s-4: calc(var(--s-3) / var(--size-scale-ratio));
  --s-3: calc(var(--s-2) / var(--size-scale-ratio));
  --s-2: calc(var(--s-1) / var(--size-scale-ratio));
  --s-1: var(--s0);
  --s0: var(--size-base);
  --s1: var(--s0);
  --s2: calc(var(--s1) * var(--size-scale-ratio));
  --s3: calc(var(--s2) * var(--size-scale-ratio));
  --s4: calc(var(--s3) * var(--size-scale-ratio));
  --s5: calc(var(--s4) * var(--size-scale-ratio));
  --s6: calc(var(--s5) * var(--size-scale-ratio));
  --s7: calc(var(--s6) * var(--size-scale-ratio));
  --s8: calc(var(--s7) * var(--size-scale-ratio));
  --s9: calc(var(--s8) * var(--size-scale-ratio));
  --s10: calc(var(--s9) * var(--size-scale-ratio));
  --s11: calc(var(--s10) * var(--size-scale-ratio));
  --s12: calc(var(--s11) * var(--size-scale-ratio));
}

/* 2. ------------------------------------
We will work by context. Whatever the context we are in, we need to compute the css locks for every size on the common scale */
/*
the lock is the fluid value
the size-... is the fluid value bound within a min and max IF the browser supports min/max css functions ELSE it will just be the fluid value
*/

body,
*[class*="size-context-"] {
  /* ARCHIVE: Lock formula */
  /* --lock-h0: calc(
    (var(--size-h0-min) * 1rem) +
    (var(--size-h0-max) - var(--size-h0-min)) *
    (100vw - (var(--size-lock-screen-min) * 1rem)) /
    (var(--size-lock-screen-max) - var(--size-lock-screen-min))
  );
  --lock-h1: ...
  --lock-h2: ... */
  @mixin locks h-1, h0, h1, h2, h3, h4, p, h5, h6, h7, h8, h9;
  /* Can also use function */
  /* --lock-h1: lock(var(--size-h1-min),var(--size-h1-max),var(--size-lock-screen-min),var(--size-lock-screen-max)); */

  /* --size-font: var(--lock); */
  --size-h-1: var(--lock-h-1);
  --size-h0: var(--lock-h0);
  --size-h1: var(--lock-h1);
  --size-h2: var(--lock-h2);
  --size-h3: var(--lock-h3);
  --size-h4: var(--lock-h4);
  --size-p: var(--lock-p);
  --size-h5: var(--lock-h5);
  --size-h6: var(--lock-h6);
  --size-h7: var(--lock-h7);
  --size-h8: var(--lock-h8);
  --size-h9: var(--lock-h9);

  /* NOTE: Have to use @support because for some reason firefox is not skipping the rule even though it does not know min(max()) */
  @supports (font-size: min(max(16px, 2.2vw), 22px)) {
    /* ARCHIVE: Clamp lacks browser support */
    /* --size-h0: clamp((var(--size-h0-min) * 1rem), var(--lock-h0), (var(--size-h0-max) * 1rem)); */
    /* https://caniuse.com/#feat=css-math-functions */
    /* See https://css-tricks.com/simplified-fluid-typography/ */

    /* Combination with the formula to avoid media queries */
    /* prettier-ignore */
    --size-h-1: min(max((var(--size-h-1-min) * 1rem), var(--lock-h-1)), (var(--size-h-1-max) * 1rem)); /* prettier-ignore */
    --size-h0: min(max((var(--size-h0-min) * 1rem), var(--lock-h0)), (var(--size-h0-max) * 1rem)); /* prettier-ignore */
    --size-h1: min(max((var(--size-h1-min) * 1rem), var(--lock-h1)), (var(--size-h1-max) * 1rem)); /* prettier-ignore */
    --size-h2: min(max((var(--size-h2-min) * 1rem), var(--lock-h2)), (var(--size-h2-max) * 1rem)); /* prettier-ignore */
    --size-h3: min(max((var(--size-h3-min) * 1rem), var(--lock-h3)), (var(--size-h3-max) * 1rem)); /* prettier-ignore */
    --size-h4: min(max((var(--size-h4-min) * 1rem), var(--lock-h4)), (var(--size-h4-max) * 1rem)); /* prettier-ignore */
    --size-p: min(max((var(--size-p-min) * 1rem), var(--lock-p)), (var(--size-p-max) * 1rem)); /* prettier-ignore */
    --size-h5: min(max((var(--size-h5-min) * 1rem), var(--lock-h5)), (var(--size-h5-max) * 1rem)); /* prettier-ignore */
    --size-h6: min(max((var(--size-h6-min) * 1rem), var(--lock-h6)), (var(--size-h6-max) * 1rem)); /* prettier-ignore */
    --size-h7: min(max((var(--size-h7-min) * 1rem), var(--lock-h7)), (var(--size-h7-max) * 1rem)); /* prettier-ignore */
    --size-h8: min(max((var(--size-h8-min) * 1rem), var(--lock-h8)), (var(--size-h8-max) * 1rem));
    --size-h9: min(
      max((var(--size-h9-min) * 1rem), var(--lock-h9)),
      (var(--size-h9-max) * 1rem)
    );
  }
  /* If no support for min(max()) we use media queries for more predictability */
  @supports not (font-size: min(max(16px, 2.2vw), 22px)) {
    @media (width > calc(env(--size-lock-screen-max) * 1rem)) {
      --size-h-1: calc(var(--size-h-1-max) * 1rem);
      --size-h0: calc(var(--size-h0-max) * 1rem);
      --size-h1: calc(var(--size-h1-max) * 1rem);
      --size-h2: calc(var(--size-h2-max) * 1rem);
      --size-h3: calc(var(--size-h3-max) * 1rem);
      --size-h4: calc(var(--size-h4-max) * 1rem);
      --size-p: calc(var(--size-p-max) * 1rem);
      --size-h5: calc(var(--size-h5-max) * 1rem);
      --size-h6: calc(var(--size-h6-max) * 1rem);
      --size-h7: calc(var(--size-h7-max) * 1rem);
      --size-h8: calc(var(--size-h8-max) * 1rem);
      --size-h9: calc(var(--size-h9-max) * 1rem);
    }
    @media (width < calc(env(--size-lock-screen-min) * 1rem)) {
      --size-h-1: calc(var(--size-h-1-min) * 1rem);
      --size-h0: calc(var(--size-h0-min) * 1rem);
      --size-h1: calc(var(--size-h1-min) * 1rem);
      --size-h2: calc(var(--size-h2-min) * 1rem);
      --size-h3: calc(var(--size-h3-min) * 1rem);
      --size-h4: calc(var(--size-h4-min) * 1rem);
      --size-p: calc(var(--size-p-min) * 1rem);
      --size-h5: calc(var(--size-h5-min) * 1rem);
      --size-h6: calc(var(--size-h6-min) * 1rem);
      --size-h7: calc(var(--size-h7-min) * 1rem);
      --size-h8: calc(var(--size-h8-min) * 1rem);
      --size-h9: calc(var(--size-h9-min) * 1rem);
    }
  }

  /* --lh-h0: calc(var(--size-h0) * 1.45);
  --lh-h1: calc(var(--size-h1) * 1.45);
  --lh-h2: calc(var(--size-h2) * 1.45);
  --lh-h3: calc(var(--size-h3) * 1.45);
  --lh-h4: calc(var(--size-h4) * 1.45);
  --lh-p: calc(var(--size-p) * 1.45);
  --lh-h5: calc(var(--size-h5) * 1.45);
  --lh-h6: calc(var(--size-h6) * 1.45);
  --lh-h7: calc(var(--size-h7) * 1.45);
  --lh-h8: calc(var(--size-h8) * 1.45);
  --lh-h9: calc(var(--size-h9) * 1.45);
   */
}

/* 3. ------------------------------------
  Default use of context values by assigning the appropriate sizes to reusable vars for margins, paddings, ... */
/* TODO: what vars do we need throughout the app? Isn't --size-h1 -> --size-h8 enough and more declarative? */
body,
*[class*="size-context-"] {
  /* should have multiple widths (max, measure, aside, min, 0, ?) */
  /* --size-relative-ratio is defined in tokens = 1.618 by default */
  --size-relative-xs: calc(var(--size-relative-s) / var(--size-relative-ratio)); /* 0.382 */
  --size-relative-s: calc(var(--size-relative-m) / var(--size-relative-ratio)); /* 0.618 */
  --size-relative-m: 1em;
  --size-relative-l: calc(var(--size-relative-m) * var(--size-relative-ratio)); /* 1.618 */
  --size-relative-xl: calc(var(--size-relative-l) * var(--size-relative-ratio)); /* 2.618 */
  --size-relative: var(--size-relative-m);

  /* --- main site's sections widths --- */
  --measure: var(--width-measure);
  --measure-relative: var(--width-measure-relative);
  --width-measure-h1: calc(var(--size-h1) * var(--width-measure-ratio));
  --width-measure-h2: calc(var(--size-h2) * var(--width-measure-ratio));
  --width-measure-h3: calc(var(--size-h3) * var(--width-measure-ratio));
  --width-measure-h4: calc(var(--size-h4) * var(--width-measure-ratio));
  --width-measure-h5: calc(var(--size-h5) * var(--width-measure-ratio));
  --width-measure-h6: calc(var(--size-h6) * var(--width-measure-ratio));
  /* --width-max: ; */ /* already defined in tokens and vars */

  /* ----------------------------------------------- */
  /* TODO: better way to handle widths. does not scale nice. see logo on org page */
  /* ----------------------------------------------- */

  --width-main: calc(var(--width-max) * var(--width-relative-ratio));
  --width-aside: calc(var(--width-max) - var(--width-main));
  --width-col-2: calc(var(--width-max) / 2);
  --width-col-3: calc(var(--width-max) / 3);
  --width-col-4: calc(var(--width-max) / 4);
  --width-col-5: calc(var(--width-max) / 5);
  --width-col-6: calc(var(--width-max) / 6);
  --width-col-7: calc(var(--width-max) / 7);
  --width-col-8: calc(var(--width-max) / 8);
  --width-col-9: calc(var(--width-max) / 9);
  --width-col-10: calc(var(--width-max) / 10);
  --width-col-11: calc(var(--width-max) / 11);
  --width-col-12: calc(var(--width-max) / 12);
  --width-col-13: calc(var(--width-max) / 13);
  --width-col-14: calc(var(--width-max) / 14);
  --width-col-15: calc(var(--width-max) / 15);
  --width-col-16: calc(var(--width-max) / 16);
  /* --width-min: ; */ /* min block width */

  /* gap is for margins, paddings, grid-gap, ... */
  /* --gap-xxs: var(--size-h7);
  --gap-xs: var(--size-h6);
  --gap-s: var(--size-h5);
  --gap-l: var(--size-h3);
  --gap-xl: var(--size-h2);
  --gap-xxl: var(--size-h1); */
  --gap-m: var(--size-h4);
  /* --gap: var(--gap-m); */

  /* useful vars for layout primitives */
  /* --gutters: var(--gap-m); */
  /* --space: var(--gap-m); */
  --padding: var(--size-relative);
  /* --width-border: var(--gap-xxs); */
  /* --width-max: var(--gap-xxs); */
  /* --width-min: var(--gap-xxs); */
  /* --width-item: var(--gap-xxs); */
  /* --width-side: var(--gap-xxs); */
  /* --width-main-min: var(--gap-xxs); */
  /* --height: var(--gap-xxs); */
  /* --threshold: var(--gap-xxs); */

  --size-border-button: var(--size-h8);
  /* --- Border widths --- */
  --size-border-0: 0;
  --size-border-s: 1px;
  --size-border-m: var(--size-h8);
  --size-border-l: var(--size-h6);
  /* default */
  --size-border: var(--size-border-m);

  /* --- outline ---
  (Used for :focus. Should probably be fixed for the whole site, whatever the context) */
  /* --size-outline: var(--size-h9); */
  --size-outline: calc(var(--s-14) * 1rem);

  /* --- Gutters ---
  = lateral paddings */
  --size-gutters-0: 0;
  --size-gutters-s: var(--size-h8);
  --size-gutters-m: var(--size-p);
  --size-gutters-l: var(--size-h3);
  /* default */
  --size-gutters: var(--size-gutters-m);


}

/* 4. ------------------------------------
Specific contexts use specific values on the scale 
We will use "size contexts" to determine the mins and max to use for the computed locks */

.size-context-main,
body {
  /* Default sizing for title */
  --size-h-1-max: var(--s12);
  --size-h-1-min: var(--s9);
  --size-h0-max: var(--s9);
  --size-h0-min: var(--s6);
  --size-h1-max: var(--s6);
  --size-h1-min: var(--s4);
  --size-h2-max: var(--s4);
  --size-h2-min: var(--s2);
  --size-h3-max: var(--s2);
  --size-h3-min: var(--s1);
  --size-h4-max: var(--s1);
  --size-h4-min: var(--s0);
  --size-p-max: var(--s1);
  --size-p-min: var(--s0);
  --size-h5-max: var(--s0);
  --size-h5-min: var(--s-1);
  --size-h6-max: var(--s-1);
  --size-h6-min: var(--s-4);
  --size-h7-max: var(--s-4);
  --size-h7-min: var(--s-8);
  --size-h8-max: var(--s-8);
  --size-h8-min: var(--s-12);
  --size-h9-max: var(--s-12);
  --size-h9-min: var(--s-14);
}

.size-context-massive {
  /* Sizing for massive titles in sections */
  --size-h-1-max: var(--s12);
  --size-h-1-min: var(--s12);
  --size-h0-max: var(--s12);
  --size-h0-min: var(--s5);
  --size-h1-max: var(--s10);
  --size-h1-min: var(--s4);
  --size-h2-max: var(--s8);
  --size-h2-min: var(--s3);
  --size-h3-max: var(--s4);
  --size-h3-min: var(--s2);
  --size-h4-max: var(--s2);
  --size-h4-min: var(--s1);
  --size-p-max: var(--s2);
  --size-p-min: var(--s1);
  --size-h5-max: var(--s1);
  --size-h5-min: var(--s-2);
  --size-h6-max: var(--s-2);
  --size-h6-min: var(--s-3);
  --size-h7-max: var(--s-3);
  --size-h7-min: var(--s-4);
  --size-h8-max: var(--s-4);
  --size-h8-min: var(--s-5);
  --size-h9-max: var(--s-5);
  --size-h9-min: var(--s-6);

  /* We can also override the default use of certain variables */
  --size-outline: calc(var(--s-14) * 1rem); /* Used for :focus */
}

.size-context-aside {
  --gap-xl: var(--size-h5);
  --gap-s: var(--size-s2);
}

.size-context-miniature {
  --size-h-1-max: var(--s2);
  --size-h-1-min: var(--s-1);
  --size-h0-max: var(--s-1);
  --size-h0-min: var(--s-2);
  --size-h1-max: var(--s-2);
  --size-h1-min: var(--s-3);
  --size-h2-max: var(--s-3);
  --size-h2-min: var(--s-4);
  --size-h3-max: var(--s-4);
  --size-h3-min: var(--s-5);
  --size-h4-max: var(--s-5);
  --size-h4-min: var(--s-6);
  --size-p-max: var(--s-5);
  --size-p-min: var(--s-6);
  --size-h5-max: var(--s-6);
  --size-h5-min: var(--s-7);
  --size-h6-max: var(--s-7);
  --size-h6-min: var(--s-8);
  --size-h7-max: var(--s-8);
  --size-h7-min: var(--s-8);
  --size-h8-max: var(--s-8);
  --size-h8-min: var(--s-8);
  --size-h9-max: var(--s-8);
  --size-h9-min: var(--s-8);
}

.size-context-narrow {
  --width-max: var(--width-narrow);
}

/* 5. ------------------------------------
utility classes to make it easier to apply font-sizes or other dimensions inside a size context */

/* prettier-ignore */
*, .size-h4, .h4, .size-p, .p, .size-h4 *, .h4 *, .size-p *, .p * { font-size: 1rem; font-size: var(--size-h4, 1rem);} /* prettier-ignore */
.size-h-1, .h-1, .size-h-1 *, .h-1 * { font-size: 3rem; font-size: var(--size-h-1, 3rem); } /* prettier-ignore */
.size-h0, .h0, .size-h0 *, .h0 * { font-size: 2.5rem; font-size: var(--size-h0, 2.5rem); } /* prettier-ignore */
h1, h1 *, .size-h1, .h1, .size-h1 *, .h1 * { font-size: 2rem; font-size: var(--size-h1, 2rem); } /* prettier-ignore */
h2, h2 *, .size-h2, .h2, .size-h2 *, .h2 * { font-size: 1.8rem; font-size: var(--size-h2, 1.8rem); } /* prettier-ignore */
h3, h3 *, .size-h3, .h3, .size-h3 *, .h3 * { font-size: 1.5rem; font-size: var(--size-h3, 1.5rem); } /* prettier-ignore */
h5, h5 *, .size-h5, .h5, .size-h5 *, .h5 * { font-size: 0.8rem; font-size: var(--size-h5, 0.8rem); } /* prettier-ignore */
h6, h6 *, .size-h6, .h6, .size-h6 *, .h6 * { font-size: 0.6rem; font-size: var(--size-h6, 0.6rem); } /* prettier-ignore */
.size-h7, .h7, .size-h7 *, .h7 * { font-size: 0.4rem; font-size: var(--size-h7, 0.4rem); } /* prettier-ignore */
.size-h8, .h8, .size-h8 *, .h8 * { font-size: 0.25rem; font-size: var(--size-h8, 0.25rem); } /* prettier-ignore */
.size-h9, .h9, .size-h9 *, .h9 * { font-size: 0.1rem; font-size: var(--size-h9, 0.1rem); }
/* prettier-ignore */
button, .button { border-width: var(--size-border-button) }

/* --- BORDERS Sub-contexts --- */ /* prettier-ignore */
.size-border-0 { --size-border: 0; } /* prettier-ignore */
.size-border-s { --size-border: var(--size-border-s); } /* prettier-ignore */
.size-border-m { --size-border: var(--size-border-m); } /* prettier-ignore */
.size-border-l { --size-border: var(--size-border-l); } /* prettier-ignore */
/* --- GAP Sub-contexts --- */ /* prettier-ignore */
.gap-0, .gap-0-down > *, .gap-down-0 > *, .no-gap, .no-gap-down > *, .no-down-gap > * { --gap: 0; } /* prettier-ignore */
.gap-h-1, .gap-h-1-down > *, .gap-down-h-1 > * { --gap: var(--size-h-1); } /* prettier-ignore */
.gap-h0, .gap-h0-down > *, .gap-down-h0 > * { --gap: var(--size-h0); } /* prettier-ignore */
.gap-h1, .gap-h1-down > *, .gap-down-h1 > * { --gap: var(--size-h1); } /* prettier-ignore */
.gap-h2, .gap-h2-down > *, .gap-down-h2 > * { --gap: var(--size-h2); } /* prettier-ignore */
.gap-h3, .gap-h3-down > *, .gap-down-h3 > * { --gap: var(--size-h3); } /* prettier-ignore */
.gap-p, .gap-p-down > *, .gap-down-p > * { --gap: var(--size-p); } /* prettier-ignore */
.gap-h4, .gap-h4-down > *, .gap-down-h4 > * { --gap: var(--size-h4); } /* prettier-ignore */
.gap-h5, .gap-h5-down > *, .gap-down-h5 > * { --gap: var(--size-h5); } /* prettier-ignore */
.gap-h6, .gap-h6-down > *, .gap-down-h6 > * { --gap: var(--size-h6); } /* prettier-ignore */
.gap-h7, .gap-h7-down > *, .gap-down-h7 > * { --gap: var(--size-h7); } /* prettier-ignore */
.gap-h8, .gap-h8-down > *, .gap-down-h8 > * { --gap: var(--size-h8); } /* prettier-ignore */
.gap-h9, .gap-h9-down > *, .gap-down-h9 > * { --gap: var(--size-h9); }
/* useful if the gap on the current element is conflicting with a gap it should receive from a parent */ /* prettier-ignore */
.gap-down > * { --gap: var(--gap-down); } /* prettier-ignore */
/* Utility classes */ /* prettier-ignore */
.no-border { border: none; } /* prettier-ignore */
.border-width-0 { border-width: none; } /* prettier-ignore */
.border-width-1 { border-width: 1px; } /* prettier-ignore */
.border-width-s { border-width: var(--size-border-s)} /* prettier-ignore */
.border-width-m { border-width: var(--size-border-m)} /* prettier-ignore */
.border-width-l { border-width: var(--size-border-l)} /* prettier-ignore */
*[class*="border-radius-"] { overflow: hidden; } /* prettier-ignore */
.border-radius-s { border-radius: var(--border-radius-s)} /* prettier-ignore */
.border-radius-m { border-radius: var(--border-radius-m)} /* prettier-ignore */
.border-radius-l { border-radius: var(--border-radius-l)} /* prettier-ignore */
.border-radius-xl { border-radius: var(--border-radius-xl)} /* prettier-ignore */
.border-radius-circle { border-radius: var(--border-radius-circle)} /* prettier-ignore */

.padding-0, .no-padding { padding: 0; } /* prettier-ignore */
.padding-h-1 { padding: var(--size-h-1)} /* prettier-ignore */
.padding-h0 { padding: var(--size-h0)} /* prettier-ignore */
.padding-h1 { padding: var(--size-h1)} /* prettier-ignore */
.padding-h2 { padding: var(--size-h2)} /* prettier-ignore */
.padding-h3 { padding: var(--size-h3)} /* prettier-ignore */
.padding-h4 { padding: var(--size-h4)} /* prettier-ignore */
.padding-h5 { padding: var(--size-h5)} /* prettier-ignore */
.padding-h6 { padding: var(--size-h6)} /* prettier-ignore */
.padding-h7 { padding: var(--size-h7)} /* prettier-ignore */
.padding-h8 { padding: var(--size-h8)} /* prettier-ignore */
.padding-h9 { padding: var(--size-h9)} /* prettier-ignore */
.padding-relative { padding: var(--size-relative)} /* prettier-ignore */
.padding-relative-xs { padding: var(--size-relative-xs)} /* prettier-ignore */
.padding-relative-s { padding: var(--size-relative-s)} /* prettier-ignore */
.padding-relative-m { padding: var(--size-relative-m)} /* prettier-ignore */
.padding-relative-l { padding: var(--size-relative-l)} /* prettier-ignore */
.padding-relative-xl { padding: var(--size-relative-xl)} /* prettier-ignore */
.padding-x-0, .no-padding-x { padding-left: 0; padding-right: 0; } /* prettier-ignore */
.padding-x-h-1 { padding-left: var(--size-h-1); padding-right: var(--size-h-1); } /* prettier-ignore */
.padding-x-h0 { padding-left: var(--size-h0); padding-right: var(--size-h0); } /* prettier-ignore */
.padding-x-h1 { padding-left: var(--size-h1); padding-right: var(--size-h1); } /* prettier-ignore */
.padding-x-h2 { padding-left: var(--size-h2); padding-right: var(--size-h2); } /* prettier-ignore */
.padding-x-h3 { padding-left: var(--size-h3); padding-right: var(--size-h3); } /* prettier-ignore */
.padding-x-h4 { padding-left: var(--size-h4); padding-right: var(--size-h4); } /* prettier-ignore */
.padding-x-h5 { padding-left: var(--size-h5); padding-right: var(--size-h5); } /* prettier-ignore */
.padding-x-h6 { padding-left: var(--size-h6); padding-right: var(--size-h6); } /* prettier-ignore */
.padding-x-h7 { padding-left: var(--size-h7); padding-right: var(--size-h7); } /* prettier-ignore */
.padding-x-h8 { padding-left: var(--size-h8); padding-right: var(--size-h8); } /* prettier-ignore */
.padding-x-h9 { padding-left: var(--size-h9); padding-right: var(--size-h9); } /* prettier-ignore */
.padding-x-relative { padding-left: var(--size-relative); padding-right: var(--size-relative); } /* prettier-ignore */
.padding-x-relative-xs { padding-left: var(--size-relative-xs); padding-right: var(--size-relative-xs); } /* prettier-ignore */
.padding-x-relative-s { padding-left: var(--size-relative-s); padding-right: var(--size-relative-s); } /* prettier-ignore */
.padding-x-relative-m { padding-left: var(--size-relative-m); padding-right: var(--size-relative-m); } /* prettier-ignore */
.padding-x-relative-l { padding-left: var(--size-relative-l); padding-right: var(--size-relative-l); } /* prettier-ignore */
.padding-x-relative-xl { padding-left: var(--size-relative-xl); padding-right: var(--size-relative-xl); } /* prettier-ignore */
.padding-y-0, .no-padding-y { padding-top: 0; padding-bottom: 0; } /* prettier-ignore */
.padding-y-h-1 { padding-top: var(--size-h-1); padding-bottom: var(--size-h-1); } /* prettier-ignore */
.padding-y-h0 { padding-top: var(--size-h0); padding-bottom: var(--size-h0); } /* prettier-ignore */
.padding-y-h1 { padding-top: var(--size-h1); padding-bottom: var(--size-h1); } /* prettier-ignore */
.padding-y-h2 { padding-top: var(--size-h2); padding-bottom: var(--size-h2); } /* prettier-ignore */
.padding-y-h3 { padding-top: var(--size-h3); padding-bottom: var(--size-h3); } /* prettier-ignore */
.padding-y-h4 { padding-top: var(--size-h4); padding-bottom: var(--size-h4); } /* prettier-ignore */
.padding-y-h5 { padding-top: var(--size-h5); padding-bottom: var(--size-h5); } /* prettier-ignore */
.padding-y-h6 { padding-top: var(--size-h6); padding-bottom: var(--size-h6); } /* prettier-ignore */
.padding-y-h7 { padding-top: var(--size-h7); padding-bottom: var(--size-h7); } /* prettier-ignore */
.padding-y-h8 { padding-top: var(--size-h8); padding-bottom: var(--size-h8); } /* prettier-ignore */
.padding-y-h9 { padding-top: var(--size-h9); padding-bottom: var(--size-h9); } /* prettier-ignore */
.padding-y-relative { padding-top: var(--size-relative); padding-bottom: var(--size-relative); } /* prettier-ignore */
.padding-y-relative-xs { padding-top: var(--size-relative-xs); padding-bottom: var(--size-relative-xs); } /* prettier-ignore */
.padding-y-relative-s { padding-top: var(--size-relative-s); padding-bottom: var(--size-relative-s); } /* prettier-ignore */
.padding-y-relative-m { padding-top: var(--size-relative-m); padding-bottom: var(--size-relative-m); } /* prettier-ignore */
.padding-y-relative-l { padding-top: var(--size-relative-l); padding-bottom: var(--size-relative-l); } /* prettier-ignore */
.padding-y-relative-xl { padding-top: var(--size-relative-xl); padding-bottom: var(--size-relative-xl); } /* prettier-ignore */
.max-width-measure, .max-width-down-measure > * { max-width: var(--width-measure);} /* prettier-ignore */
.max-width-measure-relative, .max-width-down-measure-relative > * { max-width: var(--width-measure-relative);} /* prettier-ignore */
.max-width-measure-h1, .max-width-down-measure-h1 > * { max-width: var(--width-measure-h1);} /* prettier-ignore */
.max-width-measure-h2, .max-width-down-measure-h2 > * { max-width: var(--width-measure-h2);} /* prettier-ignore */
.max-width-measure-h3, .max-width-down-measure-h3 > * { max-width: var(--width-measure-h3);} /* prettier-ignore */
.max-width-measure-h4, .max-width-down-measure-h4 > * { max-width: var(--width-measure-h4);} /* prettier-ignore */
.max-width-measure-h5, .max-width-down-measure-h5 > * { max-width: var(--width-measure-h5);} /* prettier-ignore */
.max-width-measure-h6, .max-width-down-measure-h6 > * { max-width: var(--width-measure-h6);} /* prettier-ignore */
.max-width-max, .max-width-down-max > * { max-width: var(--width-max);} /* prettier-ignore */
.max-width-main, .max-width-down-main > * { max-width: var(--width-main);} /* prettier-ignore */
.max-width-aside, .max-width-down-aside > * { max-width: var(--width-aside);} /* prettier-ignore */
.max-width-col-2, .max-width-down-col-2 > * { max-width: var(--width-col-2);} /* prettier-ignore */
.max-width-col-3, .max-width-down-col-3 > * { max-width: var(--width-col-3);} /* prettier-ignore */
.max-width-col-4, .max-width-down-col-4 > * { max-width: var(--width-col-4);} /* prettier-ignore */
.max-width-col-5, .max-width-down-col-5 > * { max-width: var(--width-col-5);} /* prettier-ignore */
.max-width-col-6, .max-width-down-col-6 > * { max-width: var(--width-col-6);} /* prettier-ignore */
.max-width-col-7, .max-width-down-col-7 > * { max-width: var(--width-col-7);} /* prettier-ignore */
.max-width-col-8, .max-width-down-col-8 > * { max-width: var(--width-col-8);} /* prettier-ignore */
.max-width-col-9, .max-width-down-col-9 > * { max-width: var(--width-col-9);} /* prettier-ignore */
.max-width-col-10, .max-width-down-col-10 > * { max-width: var(--width-col-10);} /* prettier-ignore */
.max-width-col-11, .max-width-down-col-11 > * { max-width: var(--width-col-11);} /* prettier-ignore */
.max-width-col-12, .max-width-down-col-12 > * { max-width: var(--width-col-12);} /* prettier-ignore */
.max-width-col-13, .max-width-down-col-13 > * { max-width: var(--width-col-13);} /* prettier-ignore */
.max-width-col-14, .max-width-down-col-14 > * { max-width: var(--width-col-14);} /* prettier-ignore */
.max-width-col-15, .max-width-down-col-15 > * { max-width: var(--width-col-15);} /* prettier-ignore */
.max-width-col-16, .max-width-down-col-16 > * { max-width: var(--width-col-16);} /* prettier-ignore */
.width-fit-content, .width-down-fit-content > * { width: fit-content; max-width: 100%;} /* prettier-ignore */
.width-measure, .width-down-measure > * { width: var(--width-measure); max-width: 100%;} /* prettier-ignore */
.width-measure-relative, .width-down-measure-relative > * { width: var(--width-measure-relative); max-width: 100%;} /* prettier-ignore */
.width-measure-h1, .width-down-measure-h1 > * { width: var(--width-measure-h1); max-width: 100%;} /* prettier-ignore */
.width-measure-h2, .width-down-measure-h2 > * { width: var(--width-measure-h2); max-width: 100%;} /* prettier-ignore */
.width-measure-h3, .width-down-measure-h3 > * { width: var(--width-measure-h3); max-width: 100%;} /* prettier-ignore */
.width-measure-h4, .width-down-measure-h4 > * { width: var(--width-measure-h4); max-width: 100%;} /* prettier-ignore */
.width-measure-h5, .width-down-measure-h5 > * { width: var(--width-measure-h5); max-width: 100%;} /* prettier-ignore */
.width-measure-h6, .width-down-measure-h6 > * { width: var(--width-measure-h6); max-width: 100%;} /* prettier-ignore */
.width-max, .width-down-max > * { width: var(--width-max); max-width: 100%;} /* prettier-ignore */
.width-main, .width-down-main > * { width: var(--width-main); max-width: 100%;} /* prettier-ignore */
.width-aside, .width-down-aside > * { width: var(--width-aside); max-width: 100%;} /* prettier-ignore */
.width-col-2, .width-down-col-2 > * { width: var(--width-col-2); max-width: 100%;} /* prettier-ignore */
.width-col-3, .width-down-col-3 > * { width: var(--width-col-3); max-width: 100%;} /* prettier-ignore */
.width-col-4, .width-down-col-4 > * { width: var(--width-col-4); max-width: 100%;} /* prettier-ignore */
.width-col-5, .width-down-col-5 > * { width: var(--width-col-5); max-width: 100%;} /* prettier-ignore */
.width-col-6, .width-down-col-6 > * { width: var(--width-col-6); max-width: 100%;} /* prettier-ignore */
.width-col-7, .width-down-col-7 > * { width: var(--width-col-7); max-width: 100%;} /* prettier-ignore */
.width-col-8, .width-down-col-8 > * { width: var(--width-col-8); max-width: 100%;} /* prettier-ignore */
.width-col-9, .width-down-col-9 > * { width: var(--width-col-9); max-width: 100%;} /* prettier-ignore */
.width-col-10, .width-down-col-10 > * { width: var(--width-col-10); max-width: 100%;} /* prettier-ignore */
.width-col-11, .width-down-col-11 > * { width: var(--width-col-11); max-width: 100%;} /* prettier-ignore */
.width-col-12, .width-down-col-12 > * { width: var(--width-col-12); max-width: 100%;} /* prettier-ignore */
.width-col-13, .width-down-col-13 > * { width: var(--width-col-13); max-width: 100%;} /* prettier-ignore */
.width-col-14, .width-down-col-14 > * { width: var(--width-col-14); max-width: 100%;} /* prettier-ignore */
.width-col-15, .width-down-col-15 > * { width: var(--width-col-15); max-width: 100%;} /* prettier-ignore */
.width-col-16, .width-down-col-16 > * { width: var(--width-col-16); max-width: 100%;} /* prettier-ignore */