@import url('https: //fonts.googleapis.com/css2?family=Inter: wght@400;600;700&display=swap');

:root,
[data-theme=default] {
  --color-primary-darker: hsl(240, 5%, 0%);
  --color-primary-darker-h: 240;
  --color-primary-darker-s: 5%;
  --color-primary-darker-l: 0%;
  --color-primary-dark: hsl(240, 5%, 6%);
  --color-primary-dark-h: 240;
  --color-primary-dark-s: 5%;
  --color-primary-dark-l: 6%;
  --color-primary: hsl(240, 5%, 12%);
  --color-primary-h: 240;
  --color-primary-s: 5%;
  --color-primary-l: 12%;
  --color-primary-light: hsl(240, 5%, 18%);
  --color-primary-light-h: 240;
  --color-primary-light-s: 5%;
  --color-primary-light-l: 18%;
  --color-primary-lighter: hsl(240, 5%, 24%);
  --color-primary-lighter-h: 240;
  --color-primary-lighter-s: 5%;
  --color-primary-lighter-l: 24%;
  --color-accent-darker: hsl(143, 100%, 24%);
  --color-accent-darker-h: 143;
  --color-accent-darker-s: 100%;
  --color-accent-darker-l: 24%;
  --color-accent-dark: hsl(143, 100%, 28%);
  --color-accent-dark-h: 143;
  --color-accent-dark-s: 100%;
  --color-accent-dark-l: 28%;
  --color-accent: hsl(143, 100%, 34%);
  --color-accent-h: 143;
  --color-accent-s: 100%;
  --color-accent-l: 34%;
  --color-accent-light: hsl(143, 100%, 38%);
  --color-accent-light-h: 143;
  --color-accent-light-s: 100%;
  --color-accent-light-l: 38%;
  --color-accent-lighter: hsl(143, 100%, 44%);
  --color-accent-lighter-h: 143;
  --color-accent-lighter-s: 100%;
  --color-accent-lighter-l: 44%;
  --color-1: hsl(213, 72%, 10%);
  --color-1-h: 213;
  --color-1-s: 72%;
  --color-1-l: 10%;
  --color-black: hsl(0, 0%, 4%);
  --color-black-h: 0;
  --color-black-s: 0%;
  --color-black-l: 4%;
  --color-white: hsl(0, 0%, 100%);
  --color-white-h: 0;
  --color-white-s: 0%;
  --color-white-l: 100%;
  --color-warning-darker: hsl(46, 100%, 47%);
  --color-warning-darker-h: 46;
  --color-warning-darker-s: 100%;
  --color-warning-darker-l: 47%;
  --color-warning-dark: hsl(46, 100%, 50%);
  --color-warning-dark-h: 46;
  --color-warning-dark-s: 100%;
  --color-warning-dark-l: 50%;
  --color-warning: hsl(46, 100%, 61%);
  --color-warning-h: 46;
  --color-warning-s: 100%;
  --color-warning-l: 61%;
  --color-warning-light: hsl(46, 100%, 71%);
  --color-warning-light-h: 46;
  --color-warning-light-s: 100%;
  --color-warning-light-l: 71%;
  --color-warning-lighter: hsl(46, 100%, 80%);
  --color-warning-lighter-h: 46;
  --color-warning-lighter-s: 100%;
  --color-warning-lighter-l: 80%;
  --color-success-darker: hsl(107, 100%, 50%);
  --color-success-darker-h: 107;
  --color-success-darker-s: 100%;
  --color-success-darker-l: 50%;
  --color-success-dark: hsl(107, 100%, 60%);
  --color-success-dark-h: 107;
  --color-success-dark-s: 100%;
  --color-success-dark-l: 60%;
  --color-success: hsl(107, 100%, 70%);
  --color-success-h: 107;
  --color-success-s: 100%;
  --color-success-l: 70%;
  --color-success-light: hsl(107, 100%, 80%);
  --color-success-light-h: 107;
  --color-success-light-s: 100%;
  --color-success-light-l: 80%;
  --color-success-lighter: hsl(107, 100%, 90%);
  --color-success-lighter-h: 107;
  --color-success-lighter-s: 100%;
  --color-success-lighter-l: 90%;
  --color-error-darker: hsl(18, 100%, 46%);
  --color-error-darker-h: 18;
  --color-error-darker-s: 100%;
  --color-error-darker-l: 46%;
  --color-error-dark: hsl(18, 100%, 56%);
  --color-error-dark-h: 18;
  --color-error-dark-s: 100%;
  --color-error-dark-l: 56%;
  --color-error: hsl(18, 100%, 66%);
  --color-error-h: 18;
  --color-error-s: 100%;
  --color-error-l: 66%;
  --color-error-light: hsl(18, 100%, 76%);
  --color-error-light-h: 18;
  --color-error-light-s: 100%;
  --color-error-light-l: 76%;
  --color-error-lighter: hsl(18, 100%, 86%);
  --color-error-lighter-h: 18;
  --color-error-lighter-s: 100%;
  --color-error-lighter-l: 86%;
  --color-bg-darker: hsl(240, 5%, 3%);
  --color-bg-darker-h: 240;
  --color-bg-darker-s: 5%;
  --color-bg-darker-l: 3%;
  --color-bg: hsl(240, 5%, 10%);
  --color-bg-dark-h: 240;
  --color-bg-dark-s: 5%;
  --color-bg-dark-l: 10%;
  --color-bg: hsl(240, 5%, 20%);
  --color-bg-h: 240;
  --color-bg-s: 5%;
  --color-bg-l: 20%;
  --color-bg-light: hsl(240, 5%, 22%);
  --color-bg-light-h: 240;
  --color-bg-light-s: 5%;
  --color-bg-light-l: 22%;
  --color-bg-lighter: hsl(240, 5%, 26%);
  --color-bg-lighter-h: 240;
  --color-bg-lighter-s: 5%;
  --color-bg-lighter-l: 26%;
  --color-contrast-lower: hsl(240, 5%, 20%);
  --color-contrast-lower-h: 240;
  --color-contrast-lower-s: 5%;
  --color-contrast-lower-l: 20%;
  --color-contrast-low: hsl(240, 5%, 40%);
  --color-contrast-low-h: 240;
  --color-contrast-low-s: 5%;
  --color-contrast-low-l: 40%;
  --color-contrast-medium: hsl(240, 5%, 60%);
  --color-contrast-medium-h: 240;
  --color-contrast-medium-s: 5%;
  --color-contrast-medium-l: 60%;
  --color-contrast-high: hsl(240, 5%, 90%);
  --color-contrast-high-h: 240;
  --color-contrast-high-s: 5%;
  --color-contrast-high-l: 90%;
  --color-contrast-higher: hsl(0, 0%, 100%);
  --color-contrast-higher-h: 0;
  --color-contrast-higher-s: 0%;
  --color-contrast-higher-l: 100%;
}

:root {
  --font-primary: "Inter", sans-serif;
  --font-secondary: "Inter", sans-serif;
}

h1, h2, h3, h4 {
  --heading-font-weight: 600;
}

.side-template-v3__main>div {
  margin-top: var(--space-lg);
}

.text-component h1,
.text-component h2,
.text-component h3,
.text-component h4 {
  margin-top: calc(var(--space-unit) * .9375 * 1.3 * var(--text-space-y-multiplier,1))
}

.text-component p {
  word-break: break-word;
}