/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./apps/dg-self-fix/src/smartfix.scss?ngGlobalStyle ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
/* stylelint-disable */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  box-sizing: border-box;
}

/* Start Bolt v1 reset carried over for consistent link styling */
a,
select,
button {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

[hidden] {
  display: none !important;
}

.grecaptcha-badge {
  visibility: hidden;
}

body {
  background-color: var(--page-bg);
  color: var(--text-color);
}

.grid-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: var(--grid-column-gap);
}

.container {
  display: block;
  width: 100%;
  max-width: calc(var(--grid-max-width) + var(--grid-padding) * 2);
  margin: 0 auto;
  padding-left: var(--grid-padding);
  padding-right: var(--grid-padding);
}

.xs-1 {
  grid-column: span 1;
}

.xs-2 {
  grid-column: span 2;
}

.xs-3 {
  grid-column: span 3;
}

.xs-4 {
  grid-column: span 4;
}

.xs-5 {
  grid-column: span 5;
}

.xs-6 {
  grid-column: span 6;
}

.xs-7 {
  grid-column: span 7;
}

.xs-8 {
  grid-column: span 8;
}

.xs-9 {
  grid-column: span 9;
}

.xs-10 {
  grid-column: span 10;
}

.xs-11 {
  grid-column: span 11;
}

.xs-12 {
  grid-column: span 12;
}

@media only screen and (min-width: 576px) {
  .sm-1 {
    grid-column: span 1;
  }
  .sm-2 {
    grid-column: span 2;
  }
  .sm-3 {
    grid-column: span 3;
  }
  .sm-4 {
    grid-column: span 4;
  }
  .sm-5 {
    grid-column: span 5;
  }
  .sm-6 {
    grid-column: span 6;
  }
  .sm-7 {
    grid-column: span 7;
  }
  .sm-8 {
    grid-column: span 8;
  }
  .sm-9 {
    grid-column: span 9;
  }
  .sm-10 {
    grid-column: span 10;
  }
  .sm-11 {
    grid-column: span 11;
  }
  .sm-12 {
    grid-column: span 12;
  }
}
@media only screen and (min-width: 768px) {
  .md-1 {
    grid-column: span 1;
  }
  .md-2 {
    grid-column: span 2;
  }
  .md-3 {
    grid-column: span 3;
  }
  .md-4 {
    grid-column: span 4;
  }
  .md-5 {
    grid-column: span 5;
  }
  .md-6 {
    grid-column: span 6;
  }
  .md-7 {
    grid-column: span 7;
  }
  .md-8 {
    grid-column: span 8;
  }
  .md-9 {
    grid-column: span 9;
  }
  .md-10 {
    grid-column: span 10;
  }
  .md-11 {
    grid-column: span 11;
  }
  .md-12 {
    grid-column: span 12;
  }
}
@media only screen and (min-width: 1024px) {
  .lg-1 {
    grid-column: span 1;
  }
  .lg-2 {
    grid-column: span 2;
  }
  .lg-3 {
    grid-column: span 3;
  }
  .lg-4 {
    grid-column: span 4;
  }
  .lg-5 {
    grid-column: span 5;
  }
  .lg-6 {
    grid-column: span 6;
  }
  .lg-7 {
    grid-column: span 7;
  }
  .lg-8 {
    grid-column: span 8;
  }
  .lg-9 {
    grid-column: span 9;
  }
  .lg-10 {
    grid-column: span 10;
  }
  .lg-11 {
    grid-column: span 11;
  }
  .lg-12 {
    grid-column: span 12;
  }
}
@media only screen and (min-width: 1280px) {
  .xl-1 {
    grid-column: span 1;
  }
  .xl-2 {
    grid-column: span 2;
  }
  .xl-3 {
    grid-column: span 3;
  }
  .xl-4 {
    grid-column: span 4;
  }
  .xl-5 {
    grid-column: span 5;
  }
  .xl-6 {
    grid-column: span 6;
  }
  .xl-7 {
    grid-column: span 7;
  }
  .xl-8 {
    grid-column: span 8;
  }
  .xl-9 {
    grid-column: span 9;
  }
  .xl-10 {
    grid-column: span 10;
  }
  .xl-11 {
    grid-column: span 11;
  }
  .xl-12 {
    grid-column: span 12;
  }
}
.xs--hidden {
  display: none;
}

.xs--inline {
  display: inline;
}

.xs--block {
  display: block;
}

.xs--stack {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}

.xs--flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}

.xs--flex-column {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}

.xs--nowrap {
  flex-wrap: nowrap;
}

.xs--wrap {
  flex-wrap: wrap;
}

.xs--fit {
  flex-basis: auto;
}

.xs--baseline {
  align-items: baseline;
}

.xs--middle {
  align-items: center;
}

.xs--start {
  align-items: flex-start;
}

.xs--end {
  align-items: flex-end;
}

/*
 * Add more utils here if need be.
 * E.G.
  .xs-around {
    justify-content: space-around;
  }
 */
.xs-order-0 {
  order: 0;
}

.xs-order-1 {
  order: 1;
}

.xs-order-2 {
  order: 2;
}

.xs-order-3 {
  order: 3;
}

.xs-order-4 {
  order: 4;
}

.xs-order-5 {
  order: 5;
}

.xs-order-6 {
  order: 6;
}

.xs-order-7 {
  order: 7;
}

.xs-order-8 {
  order: 8;
}

.xs-order-9 {
  order: 9;
}

.xs-order-10 {
  order: 10;
}

.xs-order-11 {
  order: 11;
}

.xs-order-12 {
  order: 12;
}

.xs-self-baseline {
  align-self: baseline;
}

.xs-self-middle {
  align-self: center;
}

.xs-self-end {
  align-self: flex-end;
}

.xs-self-start {
  align-self: flex-start;
}

@media only screen and (min-width: 576px) {
  .sm--hidden {
    display: none;
  }
  .sm--inline {
    display: inline;
  }
  .sm--block {
    display: block;
  }
  .sm--stack {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .sm--flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .sm--flex-column {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .sm--nowrap {
    flex-wrap: nowrap;
  }
  .sm--wrap {
    flex-wrap: wrap;
  }
  .sm--fit {
    flex-basis: auto;
  }
  .sm--baseline {
    align-items: baseline;
  }
  .sm--middle {
    align-items: center;
  }
  .sm--start {
    align-items: flex-start;
  }
  .sm--end {
    align-items: flex-end;
  }
  /*
   * Add more utils here if need be.
   * E.G.
    .sm-around {
      justify-content: space-around;
    }
   */
  .sm-order-0 {
    order: 0;
  }
  .sm-order-1 {
    order: 1;
  }
  .sm-order-2 {
    order: 2;
  }
  .sm-order-3 {
    order: 3;
  }
  .sm-order-4 {
    order: 4;
  }
  .sm-order-5 {
    order: 5;
  }
  .sm-order-6 {
    order: 6;
  }
  .sm-order-7 {
    order: 7;
  }
  .sm-order-8 {
    order: 8;
  }
  .sm-order-9 {
    order: 9;
  }
  .sm-order-10 {
    order: 10;
  }
  .sm-order-11 {
    order: 11;
  }
  .sm-order-12 {
    order: 12;
  }
  .sm-self-baseline {
    align-self: baseline;
  }
  .sm-self-middle {
    align-self: center;
  }
  .sm-self-end {
    align-self: flex-end;
  }
  .sm-self-start {
    align-self: flex-start;
  }
}
@media only screen and (min-width: 768px) {
  .md--hidden {
    display: none;
  }
  .md--inline {
    display: inline;
  }
  .md--block {
    display: block;
  }
  .md--stack {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .md--flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .md--flex-column {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .md--nowrap {
    flex-wrap: nowrap;
  }
  .md--wrap {
    flex-wrap: wrap;
  }
  .md--fit {
    flex-basis: auto;
  }
  .md--baseline {
    align-items: baseline;
  }
  .md--middle {
    align-items: center;
  }
  .md--start {
    align-items: flex-start;
  }
  .md--end {
    align-items: flex-end;
  }
  /*
   * Add more utils here if need be.
   * E.G.
    .md-around {
      justify-content: space-around;
    }
   */
  .md-order-0 {
    order: 0;
  }
  .md-order-1 {
    order: 1;
  }
  .md-order-2 {
    order: 2;
  }
  .md-order-3 {
    order: 3;
  }
  .md-order-4 {
    order: 4;
  }
  .md-order-5 {
    order: 5;
  }
  .md-order-6 {
    order: 6;
  }
  .md-order-7 {
    order: 7;
  }
  .md-order-8 {
    order: 8;
  }
  .md-order-9 {
    order: 9;
  }
  .md-order-10 {
    order: 10;
  }
  .md-order-11 {
    order: 11;
  }
  .md-order-12 {
    order: 12;
  }
  .md-self-baseline {
    align-self: baseline;
  }
  .md-self-middle {
    align-self: center;
  }
  .md-self-end {
    align-self: flex-end;
  }
  .md-self-start {
    align-self: flex-start;
  }
}
@media only screen and (min-width: 1024px) {
  .lg--hidden {
    display: none;
  }
  .lg--inline {
    display: inline;
  }
  .lg--block {
    display: block;
  }
  .lg--stack {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .lg--flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .lg--flex-column {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .lg--nowrap {
    flex-wrap: nowrap;
  }
  .lg--wrap {
    flex-wrap: wrap;
  }
  .lg--fit {
    flex-basis: auto;
  }
  .lg--baseline {
    align-items: baseline;
  }
  .lg--middle {
    align-items: center;
  }
  .lg--start {
    align-items: flex-start;
  }
  .lg--end {
    align-items: flex-end;
  }
  /*
   * Add more utils here if need be.
   * E.G.
    .lg-around {
      justify-content: space-around;
    }
   */
  .lg-order-0 {
    order: 0;
  }
  .lg-order-1 {
    order: 1;
  }
  .lg-order-2 {
    order: 2;
  }
  .lg-order-3 {
    order: 3;
  }
  .lg-order-4 {
    order: 4;
  }
  .lg-order-5 {
    order: 5;
  }
  .lg-order-6 {
    order: 6;
  }
  .lg-order-7 {
    order: 7;
  }
  .lg-order-8 {
    order: 8;
  }
  .lg-order-9 {
    order: 9;
  }
  .lg-order-10 {
    order: 10;
  }
  .lg-order-11 {
    order: 11;
  }
  .lg-order-12 {
    order: 12;
  }
  .lg-self-baseline {
    align-self: baseline;
  }
  .lg-self-middle {
    align-self: center;
  }
  .lg-self-end {
    align-self: flex-end;
  }
  .lg-self-start {
    align-self: flex-start;
  }
}
@media only screen and (min-width: 1280px) {
  .xl--hidden {
    display: none;
  }
  .xl--inline {
    display: inline;
  }
  .xl--block {
    display: block;
  }
  .xl--stack {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .xl--flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .xl--flex-column {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .xl--nowrap {
    flex-wrap: nowrap;
  }
  .xl--wrap {
    flex-wrap: wrap;
  }
  .xl--fit {
    flex-basis: auto;
  }
  .xl--baseline {
    align-items: baseline;
  }
  .xl--middle {
    align-items: center;
  }
  .xl--start {
    align-items: flex-start;
  }
  .xl--end {
    align-items: flex-end;
  }
  /*
   * Add more utils here if need be.
   * E.G.
    .xl-around {
      justify-content: space-around;
    }
   */
  .xl-order-0 {
    order: 0;
  }
  .xl-order-1 {
    order: 1;
  }
  .xl-order-2 {
    order: 2;
  }
  .xl-order-3 {
    order: 3;
  }
  .xl-order-4 {
    order: 4;
  }
  .xl-order-5 {
    order: 5;
  }
  .xl-order-6 {
    order: 6;
  }
  .xl-order-7 {
    order: 7;
  }
  .xl-order-8 {
    order: 8;
  }
  .xl-order-9 {
    order: 9;
  }
  .xl-order-10 {
    order: 10;
  }
  .xl-order-11 {
    order: 11;
  }
  .xl-order-12 {
    order: 12;
  }
  .xl-self-baseline {
    align-self: baseline;
  }
  .xl-self-middle {
    align-self: center;
  }
  .xl-self-end {
    align-self: flex-end;
  }
  .xl-self-start {
    align-self: flex-start;
  }
}
.mt-1 {
  margin-top: calc(var(--spacing-unit) * 1);
}

.mt-2 {
  margin-top: calc(var(--spacing-unit) * 2);
}

.mt-3 {
  margin-top: calc(var(--spacing-unit) * 3);
}

.mt-4 {
  margin-top: calc(var(--spacing-unit) * 4);
}

.mt-5 {
  margin-top: calc(var(--spacing-unit) * 5);
}

.mt-6 {
  margin-top: calc(var(--spacing-unit) * 6);
}

.mt-7 {
  margin-top: calc(var(--spacing-unit) * 7);
}

.mt-8 {
  margin-top: calc(var(--spacing-unit) * 8);
}

.mt-9 {
  margin-top: calc(var(--spacing-unit) * 9);
}

.mt-10 {
  margin-top: calc(var(--spacing-unit) * 10);
}

.mt-11 {
  margin-top: calc(var(--spacing-unit) * 11);
}

.mt-12 {
  margin-top: calc(var(--spacing-unit) * 12);
}

.mt-13 {
  margin-top: calc(var(--spacing-unit) * 13);
}

.mt-14 {
  margin-top: calc(var(--spacing-unit) * 14);
}

.mt-15 {
  margin-top: calc(var(--spacing-unit) * 15);
}

.mt-16 {
  margin-top: calc(var(--spacing-unit) * 16);
}

.mt-17 {
  margin-top: calc(var(--spacing-unit) * 17);
}

.mt-18 {
  margin-top: calc(var(--spacing-unit) * 18);
}

.mt-19 {
  margin-top: calc(var(--spacing-unit) * 19);
}

.mt-20 {
  margin-top: calc(var(--spacing-unit) * 20);
}

.mt-none {
  margin-top: calc(var(--spacing-unit) * 0);
}

.mt-xxs {
  margin-top: calc(var(--spacing-unit) * 2);
}

.mt-xs {
  margin-top: calc(var(--spacing-unit) * 3);
}

.mt-sm {
  margin-top: calc(var(--spacing-unit) * 4);
}

.mt-md {
  margin-top: calc(var(--spacing-unit) * 6);
}

.mt-lg {
  margin-top: calc(var(--spacing-unit) * 8);
}

.mt-xl {
  margin-top: calc(var(--spacing-unit) * 12);
}

.mt-xxl {
  margin-top: calc(var(--spacing-unit) * 16);
}

.mt-xxxl {
  margin-top: calc(var(--spacing-unit) * 20);
}

.mb-1 {
  margin-bottom: calc(var(--spacing-unit) * 1);
}

.mb-2 {
  margin-bottom: calc(var(--spacing-unit) * 2);
}

.mb-3 {
  margin-bottom: calc(var(--spacing-unit) * 3);
}

.mb-4 {
  margin-bottom: calc(var(--spacing-unit) * 4);
}

.mb-5 {
  margin-bottom: calc(var(--spacing-unit) * 5);
}

.mb-6 {
  margin-bottom: calc(var(--spacing-unit) * 6);
}

.mb-7 {
  margin-bottom: calc(var(--spacing-unit) * 7);
}

.mb-8 {
  margin-bottom: calc(var(--spacing-unit) * 8);
}

.mb-9 {
  margin-bottom: calc(var(--spacing-unit) * 9);
}

.mb-10 {
  margin-bottom: calc(var(--spacing-unit) * 10);
}

.mb-11 {
  margin-bottom: calc(var(--spacing-unit) * 11);
}

.mb-12 {
  margin-bottom: calc(var(--spacing-unit) * 12);
}

.mb-13 {
  margin-bottom: calc(var(--spacing-unit) * 13);
}

.mb-14 {
  margin-bottom: calc(var(--spacing-unit) * 14);
}

.mb-15 {
  margin-bottom: calc(var(--spacing-unit) * 15);
}

.mb-16 {
  margin-bottom: calc(var(--spacing-unit) * 16);
}

.mb-17 {
  margin-bottom: calc(var(--spacing-unit) * 17);
}

.mb-18 {
  margin-bottom: calc(var(--spacing-unit) * 18);
}

.mb-19 {
  margin-bottom: calc(var(--spacing-unit) * 19);
}

.mb-20 {
  margin-bottom: calc(var(--spacing-unit) * 20);
}

.mb-none {
  margin-bottom: calc(var(--spacing-unit) * 0);
}

.mb-xxs {
  margin-bottom: calc(var(--spacing-unit) * 2);
}

.mb-xs {
  margin-bottom: calc(var(--spacing-unit) * 3);
}

.mb-sm {
  margin-bottom: calc(var(--spacing-unit) * 4);
}

.mb-md {
  margin-bottom: calc(var(--spacing-unit) * 6);
}

.mb-lg {
  margin-bottom: calc(var(--spacing-unit) * 8);
}

.mb-xl {
  margin-bottom: calc(var(--spacing-unit) * 12);
}

.mb-xxl {
  margin-bottom: calc(var(--spacing-unit) * 16);
}

.mb-xxxl {
  margin-bottom: calc(var(--spacing-unit) * 20);
}

.ml-1 {
  margin-left: calc(var(--spacing-unit) * 1);
}

.ml-2 {
  margin-left: calc(var(--spacing-unit) * 2);
}

.ml-3 {
  margin-left: calc(var(--spacing-unit) * 3);
}

.ml-4 {
  margin-left: calc(var(--spacing-unit) * 4);
}

.ml-5 {
  margin-left: calc(var(--spacing-unit) * 5);
}

.ml-6 {
  margin-left: calc(var(--spacing-unit) * 6);
}

.ml-7 {
  margin-left: calc(var(--spacing-unit) * 7);
}

.ml-8 {
  margin-left: calc(var(--spacing-unit) * 8);
}

.ml-9 {
  margin-left: calc(var(--spacing-unit) * 9);
}

.ml-10 {
  margin-left: calc(var(--spacing-unit) * 10);
}

.ml-11 {
  margin-left: calc(var(--spacing-unit) * 11);
}

.ml-12 {
  margin-left: calc(var(--spacing-unit) * 12);
}

.ml-13 {
  margin-left: calc(var(--spacing-unit) * 13);
}

.ml-14 {
  margin-left: calc(var(--spacing-unit) * 14);
}

.ml-15 {
  margin-left: calc(var(--spacing-unit) * 15);
}

.ml-16 {
  margin-left: calc(var(--spacing-unit) * 16);
}

.ml-17 {
  margin-left: calc(var(--spacing-unit) * 17);
}

.ml-18 {
  margin-left: calc(var(--spacing-unit) * 18);
}

.ml-19 {
  margin-left: calc(var(--spacing-unit) * 19);
}

.ml-20 {
  margin-left: calc(var(--spacing-unit) * 20);
}

.ml-none {
  margin-left: calc(var(--spacing-unit) * 0);
}

.ml-xxs {
  margin-left: calc(var(--spacing-unit) * 2);
}

.ml-xs {
  margin-left: calc(var(--spacing-unit) * 3);
}

.ml-sm {
  margin-left: calc(var(--spacing-unit) * 4);
}

.ml-md {
  margin-left: calc(var(--spacing-unit) * 6);
}

.ml-lg {
  margin-left: calc(var(--spacing-unit) * 8);
}

.ml-xl {
  margin-left: calc(var(--spacing-unit) * 12);
}

.ml-xxl {
  margin-left: calc(var(--spacing-unit) * 16);
}

.ml-xxxl {
  margin-left: calc(var(--spacing-unit) * 20);
}

.mr-1 {
  margin-right: calc(var(--spacing-unit) * 1);
}

.mr-2 {
  margin-right: calc(var(--spacing-unit) * 2);
}

.mr-3 {
  margin-right: calc(var(--spacing-unit) * 3);
}

.mr-4 {
  margin-right: calc(var(--spacing-unit) * 4);
}

.mr-5 {
  margin-right: calc(var(--spacing-unit) * 5);
}

.mr-6 {
  margin-right: calc(var(--spacing-unit) * 6);
}

.mr-7 {
  margin-right: calc(var(--spacing-unit) * 7);
}

.mr-8 {
  margin-right: calc(var(--spacing-unit) * 8);
}

.mr-9 {
  margin-right: calc(var(--spacing-unit) * 9);
}

.mr-10 {
  margin-right: calc(var(--spacing-unit) * 10);
}

.mr-11 {
  margin-right: calc(var(--spacing-unit) * 11);
}

.mr-12 {
  margin-right: calc(var(--spacing-unit) * 12);
}

.mr-13 {
  margin-right: calc(var(--spacing-unit) * 13);
}

.mr-14 {
  margin-right: calc(var(--spacing-unit) * 14);
}

.mr-15 {
  margin-right: calc(var(--spacing-unit) * 15);
}

.mr-16 {
  margin-right: calc(var(--spacing-unit) * 16);
}

.mr-17 {
  margin-right: calc(var(--spacing-unit) * 17);
}

.mr-18 {
  margin-right: calc(var(--spacing-unit) * 18);
}

.mr-19 {
  margin-right: calc(var(--spacing-unit) * 19);
}

.mr-20 {
  margin-right: calc(var(--spacing-unit) * 20);
}

.mr-none {
  margin-right: calc(var(--spacing-unit) * 0);
}

.mr-xxs {
  margin-right: calc(var(--spacing-unit) * 2);
}

.mr-xs {
  margin-right: calc(var(--spacing-unit) * 3);
}

.mr-sm {
  margin-right: calc(var(--spacing-unit) * 4);
}

.mr-md {
  margin-right: calc(var(--spacing-unit) * 6);
}

.mr-lg {
  margin-right: calc(var(--spacing-unit) * 8);
}

.mr-xl {
  margin-right: calc(var(--spacing-unit) * 12);
}

.mr-xxl {
  margin-right: calc(var(--spacing-unit) * 16);
}

.mr-xxxl {
  margin-right: calc(var(--spacing-unit) * 20);
}

.mx-1 {
  margin-left: calc(var(--spacing-unit) * 1);
  margin-right: calc(var(--spacing-unit) * 1);
}

.mx-2 {
  margin-left: calc(var(--spacing-unit) * 2);
  margin-right: calc(var(--spacing-unit) * 2);
}

.mx-3 {
  margin-left: calc(var(--spacing-unit) * 3);
  margin-right: calc(var(--spacing-unit) * 3);
}

.mx-4 {
  margin-left: calc(var(--spacing-unit) * 4);
  margin-right: calc(var(--spacing-unit) * 4);
}

.mx-5 {
  margin-left: calc(var(--spacing-unit) * 5);
  margin-right: calc(var(--spacing-unit) * 5);
}

.mx-6 {
  margin-left: calc(var(--spacing-unit) * 6);
  margin-right: calc(var(--spacing-unit) * 6);
}

.mx-7 {
  margin-left: calc(var(--spacing-unit) * 7);
  margin-right: calc(var(--spacing-unit) * 7);
}

.mx-8 {
  margin-left: calc(var(--spacing-unit) * 8);
  margin-right: calc(var(--spacing-unit) * 8);
}

.mx-9 {
  margin-left: calc(var(--spacing-unit) * 9);
  margin-right: calc(var(--spacing-unit) * 9);
}

.mx-10 {
  margin-left: calc(var(--spacing-unit) * 10);
  margin-right: calc(var(--spacing-unit) * 10);
}

.mx-11 {
  margin-left: calc(var(--spacing-unit) * 11);
  margin-right: calc(var(--spacing-unit) * 11);
}

.mx-12 {
  margin-left: calc(var(--spacing-unit) * 12);
  margin-right: calc(var(--spacing-unit) * 12);
}

.mx-13 {
  margin-left: calc(var(--spacing-unit) * 13);
  margin-right: calc(var(--spacing-unit) * 13);
}

.mx-14 {
  margin-left: calc(var(--spacing-unit) * 14);
  margin-right: calc(var(--spacing-unit) * 14);
}

.mx-15 {
  margin-left: calc(var(--spacing-unit) * 15);
  margin-right: calc(var(--spacing-unit) * 15);
}

.mx-16 {
  margin-left: calc(var(--spacing-unit) * 16);
  margin-right: calc(var(--spacing-unit) * 16);
}

.mx-17 {
  margin-left: calc(var(--spacing-unit) * 17);
  margin-right: calc(var(--spacing-unit) * 17);
}

.mx-18 {
  margin-left: calc(var(--spacing-unit) * 18);
  margin-right: calc(var(--spacing-unit) * 18);
}

.mx-19 {
  margin-left: calc(var(--spacing-unit) * 19);
  margin-right: calc(var(--spacing-unit) * 19);
}

.mx-20 {
  margin-left: calc(var(--spacing-unit) * 20);
  margin-right: calc(var(--spacing-unit) * 20);
}

.mx-none {
  margin-left: calc(var(--spacing-unit) * 0);
  margin-right: calc(var(--spacing-unit) * 0);
}

.mx-xxs {
  margin-left: calc(var(--spacing-unit) * 2);
  margin-right: calc(var(--spacing-unit) * 2);
}

.mx-xs {
  margin-left: calc(var(--spacing-unit) * 3);
  margin-right: calc(var(--spacing-unit) * 3);
}

.mx-sm {
  margin-left: calc(var(--spacing-unit) * 4);
  margin-right: calc(var(--spacing-unit) * 4);
}

.mx-md {
  margin-left: calc(var(--spacing-unit) * 6);
  margin-right: calc(var(--spacing-unit) * 6);
}

.mx-lg {
  margin-left: calc(var(--spacing-unit) * 8);
  margin-right: calc(var(--spacing-unit) * 8);
}

.mx-xl {
  margin-left: calc(var(--spacing-unit) * 12);
  margin-right: calc(var(--spacing-unit) * 12);
}

.mx-xxl {
  margin-left: calc(var(--spacing-unit) * 16);
  margin-right: calc(var(--spacing-unit) * 16);
}

.mx-xxxl {
  margin-left: calc(var(--spacing-unit) * 20);
  margin-right: calc(var(--spacing-unit) * 20);
}

.my-1 {
  margin-top: calc(var(--spacing-unit) * 1);
  margin-bottom: calc(var(--spacing-unit) * 1);
}

.my-2 {
  margin-top: calc(var(--spacing-unit) * 2);
  margin-bottom: calc(var(--spacing-unit) * 2);
}

.my-3 {
  margin-top: calc(var(--spacing-unit) * 3);
  margin-bottom: calc(var(--spacing-unit) * 3);
}

.my-4 {
  margin-top: calc(var(--spacing-unit) * 4);
  margin-bottom: calc(var(--spacing-unit) * 4);
}

.my-5 {
  margin-top: calc(var(--spacing-unit) * 5);
  margin-bottom: calc(var(--spacing-unit) * 5);
}

.my-6 {
  margin-top: calc(var(--spacing-unit) * 6);
  margin-bottom: calc(var(--spacing-unit) * 6);
}

.my-7 {
  margin-top: calc(var(--spacing-unit) * 7);
  margin-bottom: calc(var(--spacing-unit) * 7);
}

.my-8 {
  margin-top: calc(var(--spacing-unit) * 8);
  margin-bottom: calc(var(--spacing-unit) * 8);
}

.my-9 {
  margin-top: calc(var(--spacing-unit) * 9);
  margin-bottom: calc(var(--spacing-unit) * 9);
}

.my-10 {
  margin-top: calc(var(--spacing-unit) * 10);
  margin-bottom: calc(var(--spacing-unit) * 10);
}

.my-11 {
  margin-top: calc(var(--spacing-unit) * 11);
  margin-bottom: calc(var(--spacing-unit) * 11);
}

.my-12 {
  margin-top: calc(var(--spacing-unit) * 12);
  margin-bottom: calc(var(--spacing-unit) * 12);
}

.my-13 {
  margin-top: calc(var(--spacing-unit) * 13);
  margin-bottom: calc(var(--spacing-unit) * 13);
}

.my-14 {
  margin-top: calc(var(--spacing-unit) * 14);
  margin-bottom: calc(var(--spacing-unit) * 14);
}

.my-15 {
  margin-top: calc(var(--spacing-unit) * 15);
  margin-bottom: calc(var(--spacing-unit) * 15);
}

.my-16 {
  margin-top: calc(var(--spacing-unit) * 16);
  margin-bottom: calc(var(--spacing-unit) * 16);
}

.my-17 {
  margin-top: calc(var(--spacing-unit) * 17);
  margin-bottom: calc(var(--spacing-unit) * 17);
}

.my-18 {
  margin-top: calc(var(--spacing-unit) * 18);
  margin-bottom: calc(var(--spacing-unit) * 18);
}

.my-19 {
  margin-top: calc(var(--spacing-unit) * 19);
  margin-bottom: calc(var(--spacing-unit) * 19);
}

.my-20 {
  margin-top: calc(var(--spacing-unit) * 20);
  margin-bottom: calc(var(--spacing-unit) * 20);
}

.my-none {
  margin-top: calc(var(--spacing-unit) * 0);
  margin-bottom: calc(var(--spacing-unit) * 0);
}

.my-xxs {
  margin-top: calc(var(--spacing-unit) * 2);
  margin-bottom: calc(var(--spacing-unit) * 2);
}

.my-xs {
  margin-top: calc(var(--spacing-unit) * 3);
  margin-bottom: calc(var(--spacing-unit) * 3);
}

.my-sm {
  margin-top: calc(var(--spacing-unit) * 4);
  margin-bottom: calc(var(--spacing-unit) * 4);
}

.my-md {
  margin-top: calc(var(--spacing-unit) * 6);
  margin-bottom: calc(var(--spacing-unit) * 6);
}

.my-lg {
  margin-top: calc(var(--spacing-unit) * 8);
  margin-bottom: calc(var(--spacing-unit) * 8);
}

.my-xl {
  margin-top: calc(var(--spacing-unit) * 12);
  margin-bottom: calc(var(--spacing-unit) * 12);
}

.my-xxl {
  margin-top: calc(var(--spacing-unit) * 16);
  margin-bottom: calc(var(--spacing-unit) * 16);
}

.my-xxxl {
  margin-top: calc(var(--spacing-unit) * 20);
  margin-bottom: calc(var(--spacing-unit) * 20);
}

.m-1 {
  margin-top: calc(var(--spacing-unit) * 1);
  margin-bottom: calc(var(--spacing-unit) * 1);
  margin-left: calc(var(--spacing-unit) * 1);
  margin-right: calc(var(--spacing-unit) * 1);
}

.m-2 {
  margin-top: calc(var(--spacing-unit) * 2);
  margin-bottom: calc(var(--spacing-unit) * 2);
  margin-left: calc(var(--spacing-unit) * 2);
  margin-right: calc(var(--spacing-unit) * 2);
}

.m-3 {
  margin-top: calc(var(--spacing-unit) * 3);
  margin-bottom: calc(var(--spacing-unit) * 3);
  margin-left: calc(var(--spacing-unit) * 3);
  margin-right: calc(var(--spacing-unit) * 3);
}

.m-4 {
  margin-top: calc(var(--spacing-unit) * 4);
  margin-bottom: calc(var(--spacing-unit) * 4);
  margin-left: calc(var(--spacing-unit) * 4);
  margin-right: calc(var(--spacing-unit) * 4);
}

.m-5 {
  margin-top: calc(var(--spacing-unit) * 5);
  margin-bottom: calc(var(--spacing-unit) * 5);
  margin-left: calc(var(--spacing-unit) * 5);
  margin-right: calc(var(--spacing-unit) * 5);
}

.m-6 {
  margin-top: calc(var(--spacing-unit) * 6);
  margin-bottom: calc(var(--spacing-unit) * 6);
  margin-left: calc(var(--spacing-unit) * 6);
  margin-right: calc(var(--spacing-unit) * 6);
}

.m-7 {
  margin-top: calc(var(--spacing-unit) * 7);
  margin-bottom: calc(var(--spacing-unit) * 7);
  margin-left: calc(var(--spacing-unit) * 7);
  margin-right: calc(var(--spacing-unit) * 7);
}

.m-8 {
  margin-top: calc(var(--spacing-unit) * 8);
  margin-bottom: calc(var(--spacing-unit) * 8);
  margin-left: calc(var(--spacing-unit) * 8);
  margin-right: calc(var(--spacing-unit) * 8);
}

.m-9 {
  margin-top: calc(var(--spacing-unit) * 9);
  margin-bottom: calc(var(--spacing-unit) * 9);
  margin-left: calc(var(--spacing-unit) * 9);
  margin-right: calc(var(--spacing-unit) * 9);
}

.m-10 {
  margin-top: calc(var(--spacing-unit) * 10);
  margin-bottom: calc(var(--spacing-unit) * 10);
  margin-left: calc(var(--spacing-unit) * 10);
  margin-right: calc(var(--spacing-unit) * 10);
}

.m-11 {
  margin-top: calc(var(--spacing-unit) * 11);
  margin-bottom: calc(var(--spacing-unit) * 11);
  margin-left: calc(var(--spacing-unit) * 11);
  margin-right: calc(var(--spacing-unit) * 11);
}

.m-12 {
  margin-top: calc(var(--spacing-unit) * 12);
  margin-bottom: calc(var(--spacing-unit) * 12);
  margin-left: calc(var(--spacing-unit) * 12);
  margin-right: calc(var(--spacing-unit) * 12);
}

.m-13 {
  margin-top: calc(var(--spacing-unit) * 13);
  margin-bottom: calc(var(--spacing-unit) * 13);
  margin-left: calc(var(--spacing-unit) * 13);
  margin-right: calc(var(--spacing-unit) * 13);
}

.m-14 {
  margin-top: calc(var(--spacing-unit) * 14);
  margin-bottom: calc(var(--spacing-unit) * 14);
  margin-left: calc(var(--spacing-unit) * 14);
  margin-right: calc(var(--spacing-unit) * 14);
}

.m-15 {
  margin-top: calc(var(--spacing-unit) * 15);
  margin-bottom: calc(var(--spacing-unit) * 15);
  margin-left: calc(var(--spacing-unit) * 15);
  margin-right: calc(var(--spacing-unit) * 15);
}

.m-16 {
  margin-top: calc(var(--spacing-unit) * 16);
  margin-bottom: calc(var(--spacing-unit) * 16);
  margin-left: calc(var(--spacing-unit) * 16);
  margin-right: calc(var(--spacing-unit) * 16);
}

.m-17 {
  margin-top: calc(var(--spacing-unit) * 17);
  margin-bottom: calc(var(--spacing-unit) * 17);
  margin-left: calc(var(--spacing-unit) * 17);
  margin-right: calc(var(--spacing-unit) * 17);
}

.m-18 {
  margin-top: calc(var(--spacing-unit) * 18);
  margin-bottom: calc(var(--spacing-unit) * 18);
  margin-left: calc(var(--spacing-unit) * 18);
  margin-right: calc(var(--spacing-unit) * 18);
}

.m-19 {
  margin-top: calc(var(--spacing-unit) * 19);
  margin-bottom: calc(var(--spacing-unit) * 19);
  margin-left: calc(var(--spacing-unit) * 19);
  margin-right: calc(var(--spacing-unit) * 19);
}

.m-20 {
  margin-top: calc(var(--spacing-unit) * 20);
  margin-bottom: calc(var(--spacing-unit) * 20);
  margin-left: calc(var(--spacing-unit) * 20);
  margin-right: calc(var(--spacing-unit) * 20);
}

.m-none {
  margin-top: calc(var(--spacing-unit) * 0);
  margin-bottom: calc(var(--spacing-unit) * 0);
  margin-left: calc(var(--spacing-unit) * 0);
  margin-right: calc(var(--spacing-unit) * 0);
}

.m-xxs {
  margin-top: calc(var(--spacing-unit) * 2);
  margin-bottom: calc(var(--spacing-unit) * 2);
  margin-left: calc(var(--spacing-unit) * 2);
  margin-right: calc(var(--spacing-unit) * 2);
}

.m-xs {
  margin-top: calc(var(--spacing-unit) * 3);
  margin-bottom: calc(var(--spacing-unit) * 3);
  margin-left: calc(var(--spacing-unit) * 3);
  margin-right: calc(var(--spacing-unit) * 3);
}

.m-sm {
  margin-top: calc(var(--spacing-unit) * 4);
  margin-bottom: calc(var(--spacing-unit) * 4);
  margin-left: calc(var(--spacing-unit) * 4);
  margin-right: calc(var(--spacing-unit) * 4);
}

.m-md {
  margin-top: calc(var(--spacing-unit) * 6);
  margin-bottom: calc(var(--spacing-unit) * 6);
  margin-left: calc(var(--spacing-unit) * 6);
  margin-right: calc(var(--spacing-unit) * 6);
}

.m-lg {
  margin-top: calc(var(--spacing-unit) * 8);
  margin-bottom: calc(var(--spacing-unit) * 8);
  margin-left: calc(var(--spacing-unit) * 8);
  margin-right: calc(var(--spacing-unit) * 8);
}

.m-xl {
  margin-top: calc(var(--spacing-unit) * 12);
  margin-bottom: calc(var(--spacing-unit) * 12);
  margin-left: calc(var(--spacing-unit) * 12);
  margin-right: calc(var(--spacing-unit) * 12);
}

.m-xxl {
  margin-top: calc(var(--spacing-unit) * 16);
  margin-bottom: calc(var(--spacing-unit) * 16);
  margin-left: calc(var(--spacing-unit) * 16);
  margin-right: calc(var(--spacing-unit) * 16);
}

.m-xxxl {
  margin-top: calc(var(--spacing-unit) * 20);
  margin-bottom: calc(var(--spacing-unit) * 20);
  margin-left: calc(var(--spacing-unit) * 20);
  margin-right: calc(var(--spacing-unit) * 20);
}

.pt-1 {
  padding-top: calc(var(--spacing-unit) * 1);
}

.pt-2 {
  padding-top: calc(var(--spacing-unit) * 2);
}

.pt-3 {
  padding-top: calc(var(--spacing-unit) * 3);
}

.pt-4 {
  padding-top: calc(var(--spacing-unit) * 4);
}

.pt-5 {
  padding-top: calc(var(--spacing-unit) * 5);
}

.pt-6 {
  padding-top: calc(var(--spacing-unit) * 6);
}

.pt-7 {
  padding-top: calc(var(--spacing-unit) * 7);
}

.pt-8 {
  padding-top: calc(var(--spacing-unit) * 8);
}

.pt-9 {
  padding-top: calc(var(--spacing-unit) * 9);
}

.pt-10 {
  padding-top: calc(var(--spacing-unit) * 10);
}

.pt-11 {
  padding-top: calc(var(--spacing-unit) * 11);
}

.pt-12 {
  padding-top: calc(var(--spacing-unit) * 12);
}

.pt-13 {
  padding-top: calc(var(--spacing-unit) * 13);
}

.pt-14 {
  padding-top: calc(var(--spacing-unit) * 14);
}

.pt-15 {
  padding-top: calc(var(--spacing-unit) * 15);
}

.pt-16 {
  padding-top: calc(var(--spacing-unit) * 16);
}

.pt-17 {
  padding-top: calc(var(--spacing-unit) * 17);
}

.pt-18 {
  padding-top: calc(var(--spacing-unit) * 18);
}

.pt-19 {
  padding-top: calc(var(--spacing-unit) * 19);
}

.pt-20 {
  padding-top: calc(var(--spacing-unit) * 20);
}

.pt-none {
  padding-top: calc(var(--spacing-unit) * 0);
}

.pt-xxs {
  padding-top: calc(var(--spacing-unit) * 2);
}

.pt-xs {
  padding-top: calc(var(--spacing-unit) * 3);
}

.pt-sm {
  padding-top: calc(var(--spacing-unit) * 4);
}

.pt-md {
  padding-top: calc(var(--spacing-unit) * 6);
}

.pt-lg {
  padding-top: calc(var(--spacing-unit) * 8);
}

.pt-xl {
  padding-top: calc(var(--spacing-unit) * 12);
}

.pt-xxl {
  padding-top: calc(var(--spacing-unit) * 16);
}

.pt-xxxl {
  padding-top: calc(var(--spacing-unit) * 20);
}

.pb-1 {
  padding-bottom: calc(var(--spacing-unit) * 1);
}

.pb-2 {
  padding-bottom: calc(var(--spacing-unit) * 2);
}

.pb-3 {
  padding-bottom: calc(var(--spacing-unit) * 3);
}

.pb-4 {
  padding-bottom: calc(var(--spacing-unit) * 4);
}

.pb-5 {
  padding-bottom: calc(var(--spacing-unit) * 5);
}

.pb-6 {
  padding-bottom: calc(var(--spacing-unit) * 6);
}

.pb-7 {
  padding-bottom: calc(var(--spacing-unit) * 7);
}

.pb-8 {
  padding-bottom: calc(var(--spacing-unit) * 8);
}

.pb-9 {
  padding-bottom: calc(var(--spacing-unit) * 9);
}

.pb-10 {
  padding-bottom: calc(var(--spacing-unit) * 10);
}

.pb-11 {
  padding-bottom: calc(var(--spacing-unit) * 11);
}

.pb-12 {
  padding-bottom: calc(var(--spacing-unit) * 12);
}

.pb-13 {
  padding-bottom: calc(var(--spacing-unit) * 13);
}

.pb-14 {
  padding-bottom: calc(var(--spacing-unit) * 14);
}

.pb-15 {
  padding-bottom: calc(var(--spacing-unit) * 15);
}

.pb-16 {
  padding-bottom: calc(var(--spacing-unit) * 16);
}

.pb-17 {
  padding-bottom: calc(var(--spacing-unit) * 17);
}

.pb-18 {
  padding-bottom: calc(var(--spacing-unit) * 18);
}

.pb-19 {
  padding-bottom: calc(var(--spacing-unit) * 19);
}

.pb-20 {
  padding-bottom: calc(var(--spacing-unit) * 20);
}

.pb-none {
  padding-bottom: calc(var(--spacing-unit) * 0);
}

.pb-xxs {
  padding-bottom: calc(var(--spacing-unit) * 2);
}

.pb-xs {
  padding-bottom: calc(var(--spacing-unit) * 3);
}

.pb-sm {
  padding-bottom: calc(var(--spacing-unit) * 4);
}

.pb-md {
  padding-bottom: calc(var(--spacing-unit) * 6);
}

.pb-lg {
  padding-bottom: calc(var(--spacing-unit) * 8);
}

.pb-xl {
  padding-bottom: calc(var(--spacing-unit) * 12);
}

.pb-xxl {
  padding-bottom: calc(var(--spacing-unit) * 16);
}

.pb-xxxl {
  padding-bottom: calc(var(--spacing-unit) * 20);
}

.pl-1 {
  padding-left: calc(var(--spacing-unit) * 1);
}

.pl-2 {
  padding-left: calc(var(--spacing-unit) * 2);
}

.pl-3 {
  padding-left: calc(var(--spacing-unit) * 3);
}

.pl-4 {
  padding-left: calc(var(--spacing-unit) * 4);
}

.pl-5 {
  padding-left: calc(var(--spacing-unit) * 5);
}

.pl-6 {
  padding-left: calc(var(--spacing-unit) * 6);
}

.pl-7 {
  padding-left: calc(var(--spacing-unit) * 7);
}

.pl-8 {
  padding-left: calc(var(--spacing-unit) * 8);
}

.pl-9 {
  padding-left: calc(var(--spacing-unit) * 9);
}

.pl-10 {
  padding-left: calc(var(--spacing-unit) * 10);
}

.pl-11 {
  padding-left: calc(var(--spacing-unit) * 11);
}

.pl-12 {
  padding-left: calc(var(--spacing-unit) * 12);
}

.pl-13 {
  padding-left: calc(var(--spacing-unit) * 13);
}

.pl-14 {
  padding-left: calc(var(--spacing-unit) * 14);
}

.pl-15 {
  padding-left: calc(var(--spacing-unit) * 15);
}

.pl-16 {
  padding-left: calc(var(--spacing-unit) * 16);
}

.pl-17 {
  padding-left: calc(var(--spacing-unit) * 17);
}

.pl-18 {
  padding-left: calc(var(--spacing-unit) * 18);
}

.pl-19 {
  padding-left: calc(var(--spacing-unit) * 19);
}

.pl-20 {
  padding-left: calc(var(--spacing-unit) * 20);
}

.pl-none {
  padding-left: calc(var(--spacing-unit) * 0);
}

.pl-xxs {
  padding-left: calc(var(--spacing-unit) * 2);
}

.pl-xs {
  padding-left: calc(var(--spacing-unit) * 3);
}

.pl-sm {
  padding-left: calc(var(--spacing-unit) * 4);
}

.pl-md {
  padding-left: calc(var(--spacing-unit) * 6);
}

.pl-lg {
  padding-left: calc(var(--spacing-unit) * 8);
}

.pl-xl {
  padding-left: calc(var(--spacing-unit) * 12);
}

.pl-xxl {
  padding-left: calc(var(--spacing-unit) * 16);
}

.pl-xxxl {
  padding-left: calc(var(--spacing-unit) * 20);
}

.pr-1 {
  padding-right: calc(var(--spacing-unit) * 1);
}

.pr-2 {
  padding-right: calc(var(--spacing-unit) * 2);
}

.pr-3 {
  padding-right: calc(var(--spacing-unit) * 3);
}

.pr-4 {
  padding-right: calc(var(--spacing-unit) * 4);
}

.pr-5 {
  padding-right: calc(var(--spacing-unit) * 5);
}

.pr-6 {
  padding-right: calc(var(--spacing-unit) * 6);
}

.pr-7 {
  padding-right: calc(var(--spacing-unit) * 7);
}

.pr-8 {
  padding-right: calc(var(--spacing-unit) * 8);
}

.pr-9 {
  padding-right: calc(var(--spacing-unit) * 9);
}

.pr-10 {
  padding-right: calc(var(--spacing-unit) * 10);
}

.pr-11 {
  padding-right: calc(var(--spacing-unit) * 11);
}

.pr-12 {
  padding-right: calc(var(--spacing-unit) * 12);
}

.pr-13 {
  padding-right: calc(var(--spacing-unit) * 13);
}

.pr-14 {
  padding-right: calc(var(--spacing-unit) * 14);
}

.pr-15 {
  padding-right: calc(var(--spacing-unit) * 15);
}

.pr-16 {
  padding-right: calc(var(--spacing-unit) * 16);
}

.pr-17 {
  padding-right: calc(var(--spacing-unit) * 17);
}

.pr-18 {
  padding-right: calc(var(--spacing-unit) * 18);
}

.pr-19 {
  padding-right: calc(var(--spacing-unit) * 19);
}

.pr-20 {
  padding-right: calc(var(--spacing-unit) * 20);
}

.pr-none {
  padding-right: calc(var(--spacing-unit) * 0);
}

.pr-xxs {
  padding-right: calc(var(--spacing-unit) * 2);
}

.pr-xs {
  padding-right: calc(var(--spacing-unit) * 3);
}

.pr-sm {
  padding-right: calc(var(--spacing-unit) * 4);
}

.pr-md {
  padding-right: calc(var(--spacing-unit) * 6);
}

.pr-lg {
  padding-right: calc(var(--spacing-unit) * 8);
}

.pr-xl {
  padding-right: calc(var(--spacing-unit) * 12);
}

.pr-xxl {
  padding-right: calc(var(--spacing-unit) * 16);
}

.pr-xxxl {
  padding-right: calc(var(--spacing-unit) * 20);
}

.px-1 {
  padding-left: calc(var(--spacing-unit) * 1);
  padding-right: calc(var(--spacing-unit) * 1);
}

.px-2 {
  padding-left: calc(var(--spacing-unit) * 2);
  padding-right: calc(var(--spacing-unit) * 2);
}

.px-3 {
  padding-left: calc(var(--spacing-unit) * 3);
  padding-right: calc(var(--spacing-unit) * 3);
}

.px-4 {
  padding-left: calc(var(--spacing-unit) * 4);
  padding-right: calc(var(--spacing-unit) * 4);
}

.px-5 {
  padding-left: calc(var(--spacing-unit) * 5);
  padding-right: calc(var(--spacing-unit) * 5);
}

.px-6 {
  padding-left: calc(var(--spacing-unit) * 6);
  padding-right: calc(var(--spacing-unit) * 6);
}

.px-7 {
  padding-left: calc(var(--spacing-unit) * 7);
  padding-right: calc(var(--spacing-unit) * 7);
}

.px-8 {
  padding-left: calc(var(--spacing-unit) * 8);
  padding-right: calc(var(--spacing-unit) * 8);
}

.px-9 {
  padding-left: calc(var(--spacing-unit) * 9);
  padding-right: calc(var(--spacing-unit) * 9);
}

.px-10 {
  padding-left: calc(var(--spacing-unit) * 10);
  padding-right: calc(var(--spacing-unit) * 10);
}

.px-11 {
  padding-left: calc(var(--spacing-unit) * 11);
  padding-right: calc(var(--spacing-unit) * 11);
}

.px-12 {
  padding-left: calc(var(--spacing-unit) * 12);
  padding-right: calc(var(--spacing-unit) * 12);
}

.px-13 {
  padding-left: calc(var(--spacing-unit) * 13);
  padding-right: calc(var(--spacing-unit) * 13);
}

.px-14 {
  padding-left: calc(var(--spacing-unit) * 14);
  padding-right: calc(var(--spacing-unit) * 14);
}

.px-15 {
  padding-left: calc(var(--spacing-unit) * 15);
  padding-right: calc(var(--spacing-unit) * 15);
}

.px-16 {
  padding-left: calc(var(--spacing-unit) * 16);
  padding-right: calc(var(--spacing-unit) * 16);
}

.px-17 {
  padding-left: calc(var(--spacing-unit) * 17);
  padding-right: calc(var(--spacing-unit) * 17);
}

.px-18 {
  padding-left: calc(var(--spacing-unit) * 18);
  padding-right: calc(var(--spacing-unit) * 18);
}

.px-19 {
  padding-left: calc(var(--spacing-unit) * 19);
  padding-right: calc(var(--spacing-unit) * 19);
}

.px-20 {
  padding-left: calc(var(--spacing-unit) * 20);
  padding-right: calc(var(--spacing-unit) * 20);
}

.px-none {
  padding-left: calc(var(--spacing-unit) * 0);
  padding-right: calc(var(--spacing-unit) * 0);
}

.px-xxs {
  padding-left: calc(var(--spacing-unit) * 2);
  padding-right: calc(var(--spacing-unit) * 2);
}

.px-xs {
  padding-left: calc(var(--spacing-unit) * 3);
  padding-right: calc(var(--spacing-unit) * 3);
}

.px-sm {
  padding-left: calc(var(--spacing-unit) * 4);
  padding-right: calc(var(--spacing-unit) * 4);
}

.px-md {
  padding-left: calc(var(--spacing-unit) * 6);
  padding-right: calc(var(--spacing-unit) * 6);
}

.px-lg {
  padding-left: calc(var(--spacing-unit) * 8);
  padding-right: calc(var(--spacing-unit) * 8);
}

.px-xl {
  padding-left: calc(var(--spacing-unit) * 12);
  padding-right: calc(var(--spacing-unit) * 12);
}

.px-xxl {
  padding-left: calc(var(--spacing-unit) * 16);
  padding-right: calc(var(--spacing-unit) * 16);
}

.px-xxxl {
  padding-left: calc(var(--spacing-unit) * 20);
  padding-right: calc(var(--spacing-unit) * 20);
}

.py-1 {
  padding-top: calc(var(--spacing-unit) * 1);
  padding-bottom: calc(var(--spacing-unit) * 1);
}

.py-2 {
  padding-top: calc(var(--spacing-unit) * 2);
  padding-bottom: calc(var(--spacing-unit) * 2);
}

.py-3 {
  padding-top: calc(var(--spacing-unit) * 3);
  padding-bottom: calc(var(--spacing-unit) * 3);
}

.py-4 {
  padding-top: calc(var(--spacing-unit) * 4);
  padding-bottom: calc(var(--spacing-unit) * 4);
}

.py-5 {
  padding-top: calc(var(--spacing-unit) * 5);
  padding-bottom: calc(var(--spacing-unit) * 5);
}

.py-6 {
  padding-top: calc(var(--spacing-unit) * 6);
  padding-bottom: calc(var(--spacing-unit) * 6);
}

.py-7 {
  padding-top: calc(var(--spacing-unit) * 7);
  padding-bottom: calc(var(--spacing-unit) * 7);
}

.py-8 {
  padding-top: calc(var(--spacing-unit) * 8);
  padding-bottom: calc(var(--spacing-unit) * 8);
}

.py-9 {
  padding-top: calc(var(--spacing-unit) * 9);
  padding-bottom: calc(var(--spacing-unit) * 9);
}

.py-10 {
  padding-top: calc(var(--spacing-unit) * 10);
  padding-bottom: calc(var(--spacing-unit) * 10);
}

.py-11 {
  padding-top: calc(var(--spacing-unit) * 11);
  padding-bottom: calc(var(--spacing-unit) * 11);
}

.py-12 {
  padding-top: calc(var(--spacing-unit) * 12);
  padding-bottom: calc(var(--spacing-unit) * 12);
}

.py-13 {
  padding-top: calc(var(--spacing-unit) * 13);
  padding-bottom: calc(var(--spacing-unit) * 13);
}

.py-14 {
  padding-top: calc(var(--spacing-unit) * 14);
  padding-bottom: calc(var(--spacing-unit) * 14);
}

.py-15 {
  padding-top: calc(var(--spacing-unit) * 15);
  padding-bottom: calc(var(--spacing-unit) * 15);
}

.py-16 {
  padding-top: calc(var(--spacing-unit) * 16);
  padding-bottom: calc(var(--spacing-unit) * 16);
}

.py-17 {
  padding-top: calc(var(--spacing-unit) * 17);
  padding-bottom: calc(var(--spacing-unit) * 17);
}

.py-18 {
  padding-top: calc(var(--spacing-unit) * 18);
  padding-bottom: calc(var(--spacing-unit) * 18);
}

.py-19 {
  padding-top: calc(var(--spacing-unit) * 19);
  padding-bottom: calc(var(--spacing-unit) * 19);
}

.py-20 {
  padding-top: calc(var(--spacing-unit) * 20);
  padding-bottom: calc(var(--spacing-unit) * 20);
}

.py-none {
  padding-top: calc(var(--spacing-unit) * 0);
  padding-bottom: calc(var(--spacing-unit) * 0);
}

.py-xxs {
  padding-top: calc(var(--spacing-unit) * 2);
  padding-bottom: calc(var(--spacing-unit) * 2);
}

.py-xs {
  padding-top: calc(var(--spacing-unit) * 3);
  padding-bottom: calc(var(--spacing-unit) * 3);
}

.py-sm {
  padding-top: calc(var(--spacing-unit) * 4);
  padding-bottom: calc(var(--spacing-unit) * 4);
}

.py-md {
  padding-top: calc(var(--spacing-unit) * 6);
  padding-bottom: calc(var(--spacing-unit) * 6);
}

.py-lg {
  padding-top: calc(var(--spacing-unit) * 8);
  padding-bottom: calc(var(--spacing-unit) * 8);
}

.py-xl {
  padding-top: calc(var(--spacing-unit) * 12);
  padding-bottom: calc(var(--spacing-unit) * 12);
}

.py-xxl {
  padding-top: calc(var(--spacing-unit) * 16);
  padding-bottom: calc(var(--spacing-unit) * 16);
}

.py-xxxl {
  padding-top: calc(var(--spacing-unit) * 20);
  padding-bottom: calc(var(--spacing-unit) * 20);
}

.p-1 {
  padding-top: calc(var(--spacing-unit) * 1);
  padding-bottom: calc(var(--spacing-unit) * 1);
  padding-left: calc(var(--spacing-unit) * 1);
  padding-right: calc(var(--spacing-unit) * 1);
}

.p-2 {
  padding-top: calc(var(--spacing-unit) * 2);
  padding-bottom: calc(var(--spacing-unit) * 2);
  padding-left: calc(var(--spacing-unit) * 2);
  padding-right: calc(var(--spacing-unit) * 2);
}

.p-3 {
  padding-top: calc(var(--spacing-unit) * 3);
  padding-bottom: calc(var(--spacing-unit) * 3);
  padding-left: calc(var(--spacing-unit) * 3);
  padding-right: calc(var(--spacing-unit) * 3);
}

.p-4 {
  padding-top: calc(var(--spacing-unit) * 4);
  padding-bottom: calc(var(--spacing-unit) * 4);
  padding-left: calc(var(--spacing-unit) * 4);
  padding-right: calc(var(--spacing-unit) * 4);
}

.p-5 {
  padding-top: calc(var(--spacing-unit) * 5);
  padding-bottom: calc(var(--spacing-unit) * 5);
  padding-left: calc(var(--spacing-unit) * 5);
  padding-right: calc(var(--spacing-unit) * 5);
}

.p-6 {
  padding-top: calc(var(--spacing-unit) * 6);
  padding-bottom: calc(var(--spacing-unit) * 6);
  padding-left: calc(var(--spacing-unit) * 6);
  padding-right: calc(var(--spacing-unit) * 6);
}

.p-7 {
  padding-top: calc(var(--spacing-unit) * 7);
  padding-bottom: calc(var(--spacing-unit) * 7);
  padding-left: calc(var(--spacing-unit) * 7);
  padding-right: calc(var(--spacing-unit) * 7);
}

.p-8 {
  padding-top: calc(var(--spacing-unit) * 8);
  padding-bottom: calc(var(--spacing-unit) * 8);
  padding-left: calc(var(--spacing-unit) * 8);
  padding-right: calc(var(--spacing-unit) * 8);
}

.p-9 {
  padding-top: calc(var(--spacing-unit) * 9);
  padding-bottom: calc(var(--spacing-unit) * 9);
  padding-left: calc(var(--spacing-unit) * 9);
  padding-right: calc(var(--spacing-unit) * 9);
}

.p-10 {
  padding-top: calc(var(--spacing-unit) * 10);
  padding-bottom: calc(var(--spacing-unit) * 10);
  padding-left: calc(var(--spacing-unit) * 10);
  padding-right: calc(var(--spacing-unit) * 10);
}

.p-11 {
  padding-top: calc(var(--spacing-unit) * 11);
  padding-bottom: calc(var(--spacing-unit) * 11);
  padding-left: calc(var(--spacing-unit) * 11);
  padding-right: calc(var(--spacing-unit) * 11);
}

.p-12 {
  padding-top: calc(var(--spacing-unit) * 12);
  padding-bottom: calc(var(--spacing-unit) * 12);
  padding-left: calc(var(--spacing-unit) * 12);
  padding-right: calc(var(--spacing-unit) * 12);
}

.p-13 {
  padding-top: calc(var(--spacing-unit) * 13);
  padding-bottom: calc(var(--spacing-unit) * 13);
  padding-left: calc(var(--spacing-unit) * 13);
  padding-right: calc(var(--spacing-unit) * 13);
}

.p-14 {
  padding-top: calc(var(--spacing-unit) * 14);
  padding-bottom: calc(var(--spacing-unit) * 14);
  padding-left: calc(var(--spacing-unit) * 14);
  padding-right: calc(var(--spacing-unit) * 14);
}

.p-15 {
  padding-top: calc(var(--spacing-unit) * 15);
  padding-bottom: calc(var(--spacing-unit) * 15);
  padding-left: calc(var(--spacing-unit) * 15);
  padding-right: calc(var(--spacing-unit) * 15);
}

.p-16 {
  padding-top: calc(var(--spacing-unit) * 16);
  padding-bottom: calc(var(--spacing-unit) * 16);
  padding-left: calc(var(--spacing-unit) * 16);
  padding-right: calc(var(--spacing-unit) * 16);
}

.p-17 {
  padding-top: calc(var(--spacing-unit) * 17);
  padding-bottom: calc(var(--spacing-unit) * 17);
  padding-left: calc(var(--spacing-unit) * 17);
  padding-right: calc(var(--spacing-unit) * 17);
}

.p-18 {
  padding-top: calc(var(--spacing-unit) * 18);
  padding-bottom: calc(var(--spacing-unit) * 18);
  padding-left: calc(var(--spacing-unit) * 18);
  padding-right: calc(var(--spacing-unit) * 18);
}

.p-19 {
  padding-top: calc(var(--spacing-unit) * 19);
  padding-bottom: calc(var(--spacing-unit) * 19);
  padding-left: calc(var(--spacing-unit) * 19);
  padding-right: calc(var(--spacing-unit) * 19);
}

.p-20 {
  padding-top: calc(var(--spacing-unit) * 20);
  padding-bottom: calc(var(--spacing-unit) * 20);
  padding-left: calc(var(--spacing-unit) * 20);
  padding-right: calc(var(--spacing-unit) * 20);
}

.p-none {
  padding-top: calc(var(--spacing-unit) * 0);
  padding-bottom: calc(var(--spacing-unit) * 0);
  padding-left: calc(var(--spacing-unit) * 0);
  padding-right: calc(var(--spacing-unit) * 0);
}

.p-xxs {
  padding-top: calc(var(--spacing-unit) * 2);
  padding-bottom: calc(var(--spacing-unit) * 2);
  padding-left: calc(var(--spacing-unit) * 2);
  padding-right: calc(var(--spacing-unit) * 2);
}

.p-xs {
  padding-top: calc(var(--spacing-unit) * 3);
  padding-bottom: calc(var(--spacing-unit) * 3);
  padding-left: calc(var(--spacing-unit) * 3);
  padding-right: calc(var(--spacing-unit) * 3);
}

.p-sm {
  padding-top: calc(var(--spacing-unit) * 4);
  padding-bottom: calc(var(--spacing-unit) * 4);
  padding-left: calc(var(--spacing-unit) * 4);
  padding-right: calc(var(--spacing-unit) * 4);
}

.p-md {
  padding-top: calc(var(--spacing-unit) * 6);
  padding-bottom: calc(var(--spacing-unit) * 6);
  padding-left: calc(var(--spacing-unit) * 6);
  padding-right: calc(var(--spacing-unit) * 6);
}

.p-lg {
  padding-top: calc(var(--spacing-unit) * 8);
  padding-bottom: calc(var(--spacing-unit) * 8);
  padding-left: calc(var(--spacing-unit) * 8);
  padding-right: calc(var(--spacing-unit) * 8);
}

.p-xl {
  padding-top: calc(var(--spacing-unit) * 12);
  padding-bottom: calc(var(--spacing-unit) * 12);
  padding-left: calc(var(--spacing-unit) * 12);
  padding-right: calc(var(--spacing-unit) * 12);
}

.p-xxl {
  padding-top: calc(var(--spacing-unit) * 16);
  padding-bottom: calc(var(--spacing-unit) * 16);
  padding-left: calc(var(--spacing-unit) * 16);
  padding-right: calc(var(--spacing-unit) * 16);
}

.p-xxxl {
  padding-top: calc(var(--spacing-unit) * 20);
  padding-bottom: calc(var(--spacing-unit) * 20);
  padding-left: calc(var(--spacing-unit) * 20);
  padding-right: calc(var(--spacing-unit) * 20);
}

.typog-d1 {
  font-family: var(--typog-d1-family);
  font-weight: var(--typog-d1-weight);
  font-style: var(--typog-d1-style);
  font-size: var(--typog-d1-size);
  line-height: var(--typog-d1-line-height);
  letter-spacing: var(--typog-d1-letter-spacing);
  -webkit-text-decoration: var(--typog-d1-text-decoration);
          text-decoration: var(--typog-d1-text-decoration);
  text-transform: var(--typog-d1-text-transform);
}

.typog-d2 {
  font-family: var(--typog-d2-family);
  font-weight: var(--typog-d2-weight);
  font-style: var(--typog-d2-style);
  font-size: var(--typog-d2-size);
  line-height: var(--typog-d2-line-height);
  letter-spacing: var(--typog-d2-letter-spacing);
  -webkit-text-decoration: var(--typog-d2-text-decoration);
          text-decoration: var(--typog-d2-text-decoration);
  text-transform: var(--typog-d2-text-transform);
}

.typog-h1, body h1 {
  font-family: var(--typog-h1-family);
  font-weight: var(--typog-h1-weight);
  font-style: var(--typog-h1-style);
  font-size: var(--typog-h1-size);
  line-height: var(--typog-h1-line-height);
  letter-spacing: var(--typog-h1-letter-spacing);
  -webkit-text-decoration: var(--typog-h1-text-decoration);
          text-decoration: var(--typog-h1-text-decoration);
  text-transform: var(--typog-h1-text-transform);
}

.typog-h2, body h2 {
  font-family: var(--typog-h2-family);
  font-weight: var(--typog-h2-weight);
  font-style: var(--typog-h2-style);
  font-size: var(--typog-h2-size);
  line-height: var(--typog-h2-line-height);
  letter-spacing: var(--typog-h2-letter-spacing);
  -webkit-text-decoration: var(--typog-h2-text-decoration);
          text-decoration: var(--typog-h2-text-decoration);
  text-transform: var(--typog-h2-text-transform);
}

.typog-h3, body h3 {
  font-family: var(--typog-h3-family);
  font-weight: var(--typog-h3-weight);
  font-style: var(--typog-h3-style);
  font-size: var(--typog-h3-size);
  line-height: var(--typog-h3-line-height);
  letter-spacing: var(--typog-h3-letter-spacing);
  -webkit-text-decoration: var(--typog-h3-text-decoration);
          text-decoration: var(--typog-h3-text-decoration);
  text-transform: var(--typog-h3-text-transform);
}

.typog-h4, body h4 {
  font-family: var(--typog-h4-family);
  font-weight: var(--typog-h4-weight);
  font-style: var(--typog-h4-style);
  font-size: var(--typog-h4-size);
  line-height: var(--typog-h4-line-height);
  letter-spacing: var(--typog-h4-letter-spacing);
  -webkit-text-decoration: var(--typog-h4-text-decoration);
          text-decoration: var(--typog-h4-text-decoration);
  text-transform: var(--typog-h4-text-transform);
}

.typog-h5, body h5 {
  font-family: var(--typog-h5-family);
  font-weight: var(--typog-h5-weight);
  font-style: var(--typog-h5-style);
  font-size: var(--typog-h5-size);
  line-height: var(--typog-h5-line-height);
  letter-spacing: var(--typog-h5-letter-spacing);
  -webkit-text-decoration: var(--typog-h5-text-decoration);
          text-decoration: var(--typog-h5-text-decoration);
  text-transform: var(--typog-h5-text-transform);
}

.typog-h6, body h6 {
  font-family: var(--typog-h6-family);
  font-weight: var(--typog-h6-weight);
  font-style: var(--typog-h6-style);
  font-size: var(--typog-h6-size);
  line-height: var(--typog-h6-line-height);
  letter-spacing: var(--typog-h6-letter-spacing);
  -webkit-text-decoration: var(--typog-h6-text-decoration);
          text-decoration: var(--typog-h6-text-decoration);
  text-transform: var(--typog-h6-text-transform);
}

.typog-button {
  font-family: var(--typog-button-family);
  font-weight: var(--typog-button-weight);
  font-style: var(--typog-button-style);
  font-size: var(--typog-button-size);
  line-height: var(--typog-button-line-height);
  letter-spacing: var(--typog-button-letter-spacing);
  -webkit-text-decoration: var(--typog-button-text-decoration);
          text-decoration: var(--typog-button-text-decoration);
  text-transform: var(--typog-button-text-transform);
}

.typog-body-regular, .typog-body, body,
body p,
body li {
  font-family: var(--typog-body-regular-family);
  font-weight: var(--typog-body-regular-weight);
  font-style: var(--typog-body-regular-style);
  font-size: var(--typog-body-regular-size);
  line-height: var(--typog-body-regular-line-height);
  letter-spacing: var(--typog-body-regular-letter-spacing);
  -webkit-text-decoration: var(--typog-body-regular-text-decoration);
          text-decoration: var(--typog-body-regular-text-decoration);
  text-transform: var(--typog-body-regular-text-transform);
}

.typog-body-large-link, .typog-body-large a {
  font-family: var(--typog-body-large-link-family);
  font-weight: var(--typog-body-large-link-weight);
  font-style: var(--typog-body-large-link-style);
  font-size: var(--typog-body-large-link-size);
  line-height: var(--typog-body-large-link-line-height);
  letter-spacing: var(--typog-body-large-link-letter-spacing);
  -webkit-text-decoration: var(--typog-body-large-link-text-decoration);
          text-decoration: var(--typog-body-large-link-text-decoration);
  text-transform: var(--typog-body-large-link-text-transform);
}

.typog-body-large-bold, .typog-body-large strong {
  font-family: var(--typog-body-large-bold-family);
  font-weight: var(--typog-body-large-bold-weight);
  font-style: var(--typog-body-large-bold-style);
  font-size: var(--typog-body-large-bold-size);
  line-height: var(--typog-body-large-bold-line-height);
  letter-spacing: var(--typog-body-large-bold-letter-spacing);
  -webkit-text-decoration: var(--typog-body-large-bold-text-decoration);
          text-decoration: var(--typog-body-large-bold-text-decoration);
  text-transform: var(--typog-body-large-bold-text-transform);
}

.typog-body-large-regular, .typog-body-large {
  font-family: var(--typog-body-large-family);
  font-weight: var(--typog-body-large-weight);
  font-style: var(--typog-body-large-style);
  font-size: var(--typog-body-large-size);
  line-height: var(--typog-body-large-line-height);
  letter-spacing: var(--typog-body-large-letter-spacing);
  -webkit-text-decoration: var(--typog-body-large-text-decoration);
          text-decoration: var(--typog-body-large-text-decoration);
  text-transform: var(--typog-body-large-text-transform);
}

.typog-body-bold, .typog-body strong, body strong,
body p strong,
body li strong {
  font-family: var(--typog-body-bold-family);
  font-weight: var(--typog-body-bold-weight);
  font-style: var(--typog-body-bold-style);
  font-size: var(--typog-body-bold-size);
  line-height: var(--typog-body-bold-line-height);
  letter-spacing: var(--typog-body-bold-letter-spacing);
  -webkit-text-decoration: var(--typog-body-bold-text-decoration);
          text-decoration: var(--typog-body-bold-text-decoration);
  text-transform: var(--typog-body-bold-text-transform);
}

.typog-body-link, .typog-body a, body a,
body p a,
body li a {
  font-family: var(--typog-body-link-family);
  font-weight: var(--typog-body-link-weight);
  font-style: var(--typog-body-link-style);
  font-size: var(--typog-body-link-size);
  line-height: var(--typog-body-link-line-height);
  letter-spacing: var(--typog-body-link-letter-spacing);
  -webkit-text-decoration: var(--typog-body-link-text-decoration);
          text-decoration: var(--typog-body-link-text-decoration);
  text-transform: var(--typog-body-link-text-transform);
}
.typog-body-link:hover, .typog-body a:hover, body a:hover {
  -webkit-text-decoration: var(--typog-body-link-hover-text-decoration, none);
          text-decoration: var(--typog-body-link-hover-text-decoration, none);
}

.typog-fact {
  font-family: var(--typog-fact-family);
  font-weight: var(--typog-fact-weight);
  font-style: var(--typog-fact-style);
  font-size: var(--typog-fact-size);
  line-height: var(--typog-fact-line-height);
  letter-spacing: var(--typog-fact-letter-spacing);
  -webkit-text-decoration: var(--typog-fact-text-decoration);
          text-decoration: var(--typog-fact-text-decoration);
  text-transform: var(--typog-fact-text-transform);
}

.typog-fact-detail {
  font-family: var(--typog-fact-detail-family);
  font-weight: var(--typog-fact-detail-weight);
  font-style: var(--typog-fact-detail-style);
  font-size: var(--typog-fact-detail-size);
  line-height: var(--typog-fact-detail-line-height);
  letter-spacing: var(--typog-fact-detail-letter-spacing);
  -webkit-text-decoration: var(--typog-fact-detail-text-decoration);
          text-decoration: var(--typog-fact-detail-text-decoration);
  text-transform: var(--typog-fact-detail-text-transform);
}

.typog-caption-regular, .typog-caption {
  font-family: var(--typog-caption-regular-family);
  font-weight: var(--typog-caption-regular-weight);
  font-style: var(--typog-caption-regular-style);
  font-size: var(--typog-caption-regular-size);
  line-height: var(--typog-caption-regular-line-height);
  letter-spacing: var(--typog-caption-regular-letter-spacing);
  -webkit-text-decoration: var(--typog-caption-regular-text-decoration);
          text-decoration: var(--typog-caption-regular-text-decoration);
  text-transform: var(--typog-caption-regular-text-transform);
}

.typog-caption-bold, .typog-caption strong {
  font-family: var(--typog-caption-bold-family);
  font-weight: var(--typog-caption-bold-weight);
  font-style: var(--typog-caption-bold-style);
  font-size: var(--typog-caption-bold-size);
  line-height: var(--typog-caption-bold-line-height);
  letter-spacing: var(--typog-caption-bold-letter-spacing);
  -webkit-text-decoration: var(--typog-caption-bold-text-decoration);
          text-decoration: var(--typog-caption-bold-text-decoration);
  text-transform: var(--typog-caption-bold-text-transform);
}

.typog-caption-link, .typog-caption a {
  font-family: var(--typog-caption-link-family);
  font-weight: var(--typog-caption-link-weight);
  font-style: var(--typog-caption-link-style);
  font-size: var(--typog-caption-link-size);
  line-height: var(--typog-caption-link-line-height);
  letter-spacing: var(--typog-caption-link-letter-spacing);
  -webkit-text-decoration: var(--typog-caption-link-text-decoration);
          text-decoration: var(--typog-caption-link-text-decoration);
  text-transform: var(--typog-caption-link-text-transform);
}
.typog-caption-link:hover, .typog-caption a:hover {
  -webkit-text-decoration: var(--typog-caption-link-hover-text-decoration, none);
          text-decoration: var(--typog-caption-link-hover-text-decoration, none);
}

.typog-menu-link {
  font-family: var(--typog-menu-link-family);
  font-weight: var(--typog-menu-link-weight);
  font-style: var(--typog-menu-link-style);
  font-size: var(--typog-menu-link-size);
  line-height: var(--typog-menu-link-line-height);
  letter-spacing: var(--typog-menu-link-letter-spacing);
  -webkit-text-decoration: var(--typog-menu-link-text-decoration);
          text-decoration: var(--typog-menu-link-text-decoration);
  text-transform: var(--typog-menu-link-text-transform);
}
.typog-menu-link:hover {
  -webkit-text-decoration: var(--typog-menu-link-hover-text-decoration, none);
          text-decoration: var(--typog-menu-link-hover-text-decoration, none);
}

.typog-menu-link-bold {
  font-family: var(--typog-menu-link-bold-family);
  font-weight: var(--typog-menu-link-bold-weight);
  font-style: var(--typog-menu-link-bold-style);
  font-size: var(--typog-menu-link-bold-size);
  line-height: var(--typog-menu-link-bold-line-height);
  letter-spacing: var(--typog-menu-link-bold-letter-spacing);
  -webkit-text-decoration: var(--typog-menu-link-bold-text-decoration);
          text-decoration: var(--typog-menu-link-bold-text-decoration);
  text-transform: var(--typog-menu-link-bold-text-transform);
}
.typog-menu-link-bold:hover {
  -webkit-text-decoration: var(--typog-menu-link-bold-hover-text-decoration, none);
          text-decoration: var(--typog-menu-link-bold-hover-text-decoration, none);
}

.typog-secondary-menu-link {
  font-family: var(--typog-secondary-menu-link-family);
  font-weight: var(--typog-secondary-menu-link-weight);
  font-style: var(--typog-secondary-menu-link-style);
  font-size: var(--typog-secondary-menu-link-size);
  line-height: var(--typog-secondary-menu-link-line-height);
  letter-spacing: var(--typog-secondary-menu-link-letter-spacing);
  -webkit-text-decoration: var(--typog-secondary-menu-link-text-decoration);
          text-decoration: var(--typog-secondary-menu-link-text-decoration);
  text-transform: var(--typog-secondary-menu-link-text-transform);
}
.typog-secondary-menu-link:hover {
  -webkit-text-decoration: var(--typog-secondary-menu-link-hover-text-decoration, none);
          text-decoration: var(--typog-secondary-menu-link-hover-text-decoration, none);
}

.typog-header-link {
  font-family: var(--typog-header-link-family);
  font-weight: var(--typog-header-link-weight);
  font-style: var(--typog-header-link-style);
  font-size: var(--typog-header-link-size);
  line-height: var(--typog-header-link-line-height);
  letter-spacing: var(--typog-header-link-letter-spacing);
  -webkit-text-decoration: var(--typog-header-link-text-decoration);
          text-decoration: var(--typog-header-link-text-decoration);
  text-transform: var(--typog-header-link-text-transform);
}
.typog-header-link:hover {
  -webkit-text-decoration: var(--typog-header-link-hover-text-decoration, none);
          text-decoration: var(--typog-header-link-hover-text-decoration, none);
}

body {
  overflow-x: hidden;
  color: var(--neutral-800);
  -webkit-font-smoothing: antialiased;
}
body span {
  font-size: inherit;
}
body .link {
  color: var(--dg-primary-700);
  cursor: pointer;
}
body a,
body .link {
  color: var(--dg-primary-700);
  word-break: break-word;
}
body a, body a:focus, body a:active,
body .link,
body .link:focus,
body .link:active {
  text-decoration: underline;
}
body a:hover,
body .link:hover {
  text-decoration: none;
}
body a.link--standalone {
  text-decoration: underline;
}
body a.link--standalone:hover, body a.link--standalone:focus, body a.link--standalone:active {
  text-decoration: none;
}
body .font--standard {
  font-family: var(--typog-body-regular-family);
  font-weight: var(--typog-body-regular-weight);
  font-style: var(--typog-body-regular-style);
  font-size: var(--typog-body-regular-size);
  line-height: var(--typog-body-regular-line-height);
  letter-spacing: var(--typog-body-regular-letter-spacing);
  -webkit-text-decoration: var(--typog-body-regular-text-decoration);
          text-decoration: var(--typog-body-regular-text-decoration);
  text-transform: var(--typog-body-regular-text-transform);
}
body .font--bold, body strong {
  font-family: var(--typog-body-bold-family);
  font-weight: var(--typog-body-bold-weight);
  font-style: var(--typog-body-bold-style);
  font-size: var(--typog-body-bold-size);
  line-height: var(--typog-body-bold-line-height);
  letter-spacing: var(--typog-body-bold-letter-spacing);
  -webkit-text-decoration: var(--typog-body-bold-text-decoration);
          text-decoration: var(--typog-body-bold-text-decoration);
  text-transform: var(--typog-body-bold-text-transform);
}
body .font--sm, body small {
  font-family: var(--typog-caption-regular-family);
  font-weight: var(--typog-caption-regular-weight);
  font-style: var(--typog-caption-regular-style);
  font-size: var(--typog-caption-regular-size);
  line-height: var(--typog-caption-regular-line-height);
  letter-spacing: var(--typog-caption-regular-letter-spacing);
  -webkit-text-decoration: var(--typog-caption-regular-text-decoration);
          text-decoration: var(--typog-caption-regular-text-decoration);
  text-transform: var(--typog-caption-regular-text-transform);
}
body em {
  font-style: italic;
}
body.body--locked {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

@media only screen and (min-width: 1024px) {
  body.body--locked {
    height: auto;
    overflow: visible;
    position: static;
  }
}
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified

   - small screen variables fallback to medium, then large screen equivalent
   - medium screen variables fallback to large screen equivalent


   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog-[sm|md|lg]-{style}-{property}

   e.g.:

    --typog-lg-h4-family
    --typog-lg-h4-weight
    --typog-lg-h4-style
    --typog-lg-h4-size
    --typog-lg-h4-line-height
    --typog-lg-h4-letter-spacing
    --typog-lg-h4-text-decoration
    --typog-lg-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
body {
  --typog-d1-family: var(--typog-sm-d1-family, var(--typog-md-d1-family, var(--typog-lg-d1-family, var(--typog-default-heading-family))));
  --typog-d1-weight: var(--typog-sm-d1-weight, var(--typog-md-d1-weight, var(--typog-lg-d1-weight, normal)));
  --typog-d1-style: var(--typog-sm-d1-style, var(--typog-md-d1-style, var(--typog-lg-d1-style, normal)));
  --typog-d1-size: var(--typog-sm-d1-size, var(--typog-md-d1-size, var(--typog-lg-d1-size)));
  --typog-d1-line-height: var(--typog-sm-d1-line-height, var(--typog-md-d1-line-height, var(--typog-lg-d1-line-height)));
  --typog-d1-letter-spacing: var(--typog-sm-d1-letter-spacing, var(--typog-md-d1-letter-spacing, var(--typog-lg-d1-letter-spacing, 0)));
  --typog-d1-text-decoration: var(--typog-sm-d1-text-decoration, var(--typog-md-d1-text-decoration, var(--typog-lg-d1-text-decoration, none)));
  --typog-d1-text-transform: var(--typog-sm-d1-text-transform, var(--typog-md-d1-text-transform, var(--typog-lg-d1-text-transform, none)));
  --typog-d2-family: var(--typog-sm-d2-family, var(--typog-md-d2-family, var(--typog-lg-d2-family, var(--typog-default-heading-family))));
  --typog-d2-weight: var(--typog-sm-d2-weight, var(--typog-md-d2-weight, var(--typog-lg-d2-weight, normal)));
  --typog-d2-style: var(--typog-sm-d2-style, var(--typog-md-d2-style, var(--typog-lg-d2-style, normal)));
  --typog-d2-size: var(--typog-sm-d2-size, var(--typog-md-d2-size, var(--typog-lg-d2-size)));
  --typog-d2-line-height: var(--typog-sm-d2-line-height, var(--typog-md-d2-line-height, var(--typog-lg-d2-line-height)));
  --typog-d2-letter-spacing: var(--typog-sm-d2-letter-spacing, var(--typog-md-d2-letter-spacing, var(--typog-lg-d2-letter-spacing, 0)));
  --typog-d2-text-decoration: var(--typog-sm-d2-text-decoration, var(--typog-md-d2-text-decoration, var(--typog-lg-d2-text-decoration, none)));
  --typog-d2-text-transform: var(--typog-sm-d2-text-transform, var(--typog-md-d2-text-transform, var(--typog-lg-d2-text-transform, none)));
  --typog-h1-family: var(--typog-sm-h1-family, var(--typog-md-h1-family, var(--typog-lg-h1-family, var(--typog-default-heading-family))));
  --typog-h1-weight: var(--typog-sm-h1-weight, var(--typog-md-h1-weight, var(--typog-lg-h1-weight, normal)));
  --typog-h1-style: var(--typog-sm-h1-style, var(--typog-md-h1-style, var(--typog-lg-h1-style, normal)));
  --typog-h1-size: var(--typog-sm-h1-size, var(--typog-md-h1-size, var(--typog-lg-h1-size)));
  --typog-h1-line-height: var(--typog-sm-h1-line-height, var(--typog-md-h1-line-height, var(--typog-lg-h1-line-height)));
  --typog-h1-letter-spacing: var(--typog-sm-h1-letter-spacing, var(--typog-md-h1-letter-spacing, var(--typog-lg-h1-letter-spacing, 0)));
  --typog-h1-text-decoration: var(--typog-sm-h1-text-decoration, var(--typog-md-h1-text-decoration, var(--typog-lg-h1-text-decoration, none)));
  --typog-h1-text-transform: var(--typog-sm-h1-text-transform, var(--typog-md-h1-text-transform, var(--typog-lg-h1-text-transform, none)));
  --typog-h2-family: var(--typog-sm-h2-family, var(--typog-md-h2-family, var(--typog-lg-h2-family, var(--typog-default-heading-family))));
  --typog-h2-weight: var(--typog-sm-h2-weight, var(--typog-md-h2-weight, var(--typog-lg-h2-weight, normal)));
  --typog-h2-style: var(--typog-sm-h2-style, var(--typog-md-h2-style, var(--typog-lg-h2-style, normal)));
  --typog-h2-size: var(--typog-sm-h2-size, var(--typog-md-h2-size, var(--typog-lg-h2-size)));
  --typog-h2-line-height: var(--typog-sm-h2-line-height, var(--typog-md-h2-line-height, var(--typog-lg-h2-line-height)));
  --typog-h2-letter-spacing: var(--typog-sm-h2-letter-spacing, var(--typog-md-h2-letter-spacing, var(--typog-lg-h2-letter-spacing, 0)));
  --typog-h2-text-decoration: var(--typog-sm-h2-text-decoration, var(--typog-md-h2-text-decoration, var(--typog-lg-h2-text-decoration, none)));
  --typog-h2-text-transform: var(--typog-sm-h2-text-transform, var(--typog-md-h2-text-transform, var(--typog-lg-h2-text-transform, none)));
  --typog-h3-family: var(--typog-sm-h3-family, var(--typog-md-h3-family, var(--typog-lg-h3-family, var(--typog-default-heading-family))));
  --typog-h3-weight: var(--typog-sm-h3-weight, var(--typog-md-h3-weight, var(--typog-lg-h3-weight, normal)));
  --typog-h3-style: var(--typog-sm-h3-style, var(--typog-md-h3-style, var(--typog-lg-h3-style, normal)));
  --typog-h3-size: var(--typog-sm-h3-size, var(--typog-md-h3-size, var(--typog-lg-h3-size)));
  --typog-h3-line-height: var(--typog-sm-h3-line-height, var(--typog-md-h3-line-height, var(--typog-lg-h3-line-height)));
  --typog-h3-letter-spacing: var(--typog-sm-h3-letter-spacing, var(--typog-md-h3-letter-spacing, var(--typog-lg-h3-letter-spacing, 0)));
  --typog-h3-text-decoration: var(--typog-sm-h3-text-decoration, var(--typog-md-h3-text-decoration, var(--typog-lg-h3-text-decoration, none)));
  --typog-h3-text-transform: var(--typog-sm-h3-text-transform, var(--typog-md-h3-text-transform, var(--typog-lg-h3-text-transform, none)));
  --typog-h4-family: var(--typog-sm-h4-family, var(--typog-md-h4-family, var(--typog-lg-h4-family, var(--typog-default-heading-family))));
  --typog-h4-weight: var(--typog-sm-h4-weight, var(--typog-md-h4-weight, var(--typog-lg-h4-weight, normal)));
  --typog-h4-style: var(--typog-sm-h4-style, var(--typog-md-h4-style, var(--typog-lg-h4-style, normal)));
  --typog-h4-size: var(--typog-sm-h4-size, var(--typog-md-h4-size, var(--typog-lg-h4-size)));
  --typog-h4-line-height: var(--typog-sm-h4-line-height, var(--typog-md-h4-line-height, var(--typog-lg-h4-line-height)));
  --typog-h4-letter-spacing: var(--typog-sm-h4-letter-spacing, var(--typog-md-h4-letter-spacing, var(--typog-lg-h4-letter-spacing, 0)));
  --typog-h4-text-decoration: var(--typog-sm-h4-text-decoration, var(--typog-md-h4-text-decoration, var(--typog-lg-h4-text-decoration, none)));
  --typog-h4-text-transform: var(--typog-sm-h4-text-transform, var(--typog-md-h4-text-transform, var(--typog-lg-h4-text-transform, none)));
  --typog-h5-family: var(--typog-sm-h5-family, var(--typog-md-h5-family, var(--typog-lg-h5-family, var(--typog-default-heading-family))));
  --typog-h5-weight: var(--typog-sm-h5-weight, var(--typog-md-h5-weight, var(--typog-lg-h5-weight, normal)));
  --typog-h5-style: var(--typog-sm-h5-style, var(--typog-md-h5-style, var(--typog-lg-h5-style, normal)));
  --typog-h5-size: var(--typog-sm-h5-size, var(--typog-md-h5-size, var(--typog-lg-h5-size)));
  --typog-h5-line-height: var(--typog-sm-h5-line-height, var(--typog-md-h5-line-height, var(--typog-lg-h5-line-height)));
  --typog-h5-letter-spacing: var(--typog-sm-h5-letter-spacing, var(--typog-md-h5-letter-spacing, var(--typog-lg-h5-letter-spacing, 0)));
  --typog-h5-text-decoration: var(--typog-sm-h5-text-decoration, var(--typog-md-h5-text-decoration, var(--typog-lg-h5-text-decoration, none)));
  --typog-h5-text-transform: var(--typog-sm-h5-text-transform, var(--typog-md-h5-text-transform, var(--typog-lg-h5-text-transform, none)));
  --typog-h6-family: var(--typog-sm-h6-family, var(--typog-md-h6-family, var(--typog-lg-h6-family, var(--typog-default-heading-family))));
  --typog-h6-weight: var(--typog-sm-h6-weight, var(--typog-md-h6-weight, var(--typog-lg-h6-weight, normal)));
  --typog-h6-style: var(--typog-sm-h6-style, var(--typog-md-h6-style, var(--typog-lg-h6-style, normal)));
  --typog-h6-size: var(--typog-sm-h6-size, var(--typog-md-h6-size, var(--typog-lg-h6-size)));
  --typog-h6-line-height: var(--typog-sm-h6-line-height, var(--typog-md-h6-line-height, var(--typog-lg-h6-line-height)));
  --typog-h6-letter-spacing: var(--typog-sm-h6-letter-spacing, var(--typog-md-h6-letter-spacing, var(--typog-lg-h6-letter-spacing, 0)));
  --typog-h6-text-decoration: var(--typog-sm-h6-text-decoration, var(--typog-md-h6-text-decoration, var(--typog-lg-h6-text-decoration, none)));
  --typog-h6-text-transform: var(--typog-sm-h6-text-transform, var(--typog-md-h6-text-transform, var(--typog-lg-h6-text-transform, none)));
  --typog-button-family: var(--typog-sm-button-family, var(--typog-md-button-family, var(--typog-lg-button-family, var(--typog-default-body-family))));
  --typog-button-weight: var(--typog-sm-button-weight, var(--typog-md-button-weight, var(--typog-lg-button-weight, normal)));
  --typog-button-style: var(--typog-sm-button-style, var(--typog-md-button-style, var(--typog-lg-button-style, normal)));
  --typog-button-size: var(--typog-sm-button-size, var(--typog-md-button-size, var(--typog-lg-button-size)));
  --typog-button-line-height: var(--typog-sm-button-line-height, var(--typog-md-button-line-height, var(--typog-lg-button-line-height)));
  --typog-button-letter-spacing: var(--typog-sm-button-letter-spacing, var(--typog-md-button-letter-spacing, var(--typog-lg-button-letter-spacing, 0)));
  --typog-button-text-decoration: var(--typog-sm-button-text-decoration, var(--typog-md-button-text-decoration, var(--typog-lg-button-text-decoration, none)));
  --typog-button-text-transform: var(--typog-sm-button-text-transform, var(--typog-md-button-text-transform, var(--typog-lg-button-text-transform, none)));
  --typog-body-regular-family: var(--typog-sm-body-regular-family, var(--typog-md-body-regular-family, var(--typog-lg-body-regular-family, var(--typog-default-body-family))));
  --typog-body-regular-weight: var(--typog-sm-body-regular-weight, var(--typog-md-body-regular-weight, var(--typog-lg-body-regular-weight, normal)));
  --typog-body-regular-style: var(--typog-sm-body-regular-style, var(--typog-md-body-regular-style, var(--typog-lg-body-regular-style, normal)));
  --typog-body-regular-size: var(--typog-sm-body-regular-size, var(--typog-md-body-regular-size, var(--typog-lg-body-regular-size)));
  --typog-body-regular-line-height: var(--typog-sm-body-regular-line-height, var(--typog-md-body-regular-line-height, var(--typog-lg-body-regular-line-height)));
  --typog-body-regular-letter-spacing: var(--typog-sm-body-regular-letter-spacing, var(--typog-md-body-regular-letter-spacing, var(--typog-lg-body-regular-letter-spacing, 0)));
  --typog-body-regular-text-decoration: var(--typog-sm-body-regular-text-decoration, var(--typog-md-body-regular-text-decoration, var(--typog-lg-body-regular-text-decoration, none)));
  --typog-body-regular-text-transform: var(--typog-sm-body-regular-text-transform, var(--typog-md-body-regular-text-transform, var(--typog-lg-body-regular-text-transform, none)));
  --typog-body-bold-family: var(--typog-sm-body-bold-family, var(--typog-md-body-bold-family, var(--typog-lg-body-bold-family, var(--typog-default-body-family))));
  --typog-body-bold-weight: var(--typog-sm-body-bold-weight, var(--typog-md-body-bold-weight, var(--typog-lg-body-bold-weight, normal)));
  --typog-body-bold-style: var(--typog-sm-body-bold-style, var(--typog-md-body-bold-style, var(--typog-lg-body-bold-style, normal)));
  --typog-body-bold-size: var(--typog-sm-body-bold-size, var(--typog-md-body-bold-size, var(--typog-lg-body-bold-size)));
  --typog-body-bold-line-height: var(--typog-sm-body-bold-line-height, var(--typog-md-body-bold-line-height, var(--typog-lg-body-bold-line-height)));
  --typog-body-bold-letter-spacing: var(--typog-sm-body-bold-letter-spacing, var(--typog-md-body-bold-letter-spacing, var(--typog-lg-body-bold-letter-spacing, 0)));
  --typog-body-bold-text-decoration: var(--typog-sm-body-bold-text-decoration, var(--typog-md-body-bold-text-decoration, var(--typog-lg-body-bold-text-decoration, none)));
  --typog-body-bold-text-transform: var(--typog-sm-body-bold-text-transform, var(--typog-md-body-bold-text-transform, var(--typog-lg-body-bold-text-transform, none)));
  --typog-body-link-family: var(--typog-sm-body-link-family, var(--typog-md-body-link-family, var(--typog-lg-body-link-family, var(--typog-default-body-family))));
  --typog-body-link-weight: var(--typog-sm-body-link-weight, var(--typog-md-body-link-weight, var(--typog-lg-body-link-weight, normal)));
  --typog-body-link-style: var(--typog-sm-body-link-style, var(--typog-md-body-link-style, var(--typog-lg-body-link-style, normal)));
  --typog-body-link-size: var(--typog-sm-body-link-size, var(--typog-md-body-link-size, var(--typog-lg-body-link-size)));
  --typog-body-link-line-height: var(--typog-sm-body-link-line-height, var(--typog-md-body-link-line-height, var(--typog-lg-body-link-line-height)));
  --typog-body-link-letter-spacing: var(--typog-sm-body-link-letter-spacing, var(--typog-md-body-link-letter-spacing, var(--typog-lg-body-link-letter-spacing, 0)));
  --typog-body-link-text-decoration: var(--typog-sm-body-link-text-decoration, var(--typog-md-body-link-text-decoration, var(--typog-lg-body-link-text-decoration, none)));
  --typog-body-link-text-transform: var(--typog-sm-body-link-text-transform, var(--typog-md-body-link-text-transform, var(--typog-lg-body-link-text-transform, none)));
  --typog-body-large-family: var(--typog-sm-body-large-family, var(--typog-md-body-large-family, var(--typog-lg-body-large-family, var(--typog-default-body-family))));
  --typog-body-large-weight: var(--typog-sm-body-large-weight, var(--typog-md-body-large-weight, var(--typog-lg-body-large-weight, normal)));
  --typog-body-large-style: var(--typog-sm-body-large-style, var(--typog-md-body-large-style, var(--typog-lg-body-large-style, normal)));
  --typog-body-large-size: var(--typog-sm-body-large-size, var(--typog-md-body-large-size, var(--typog-lg-body-large-size)));
  --typog-body-large-line-height: var(--typog-sm-body-large-line-height, var(--typog-md-body-large-line-height, var(--typog-lg-body-large-line-height)));
  --typog-body-large-letter-spacing: var(--typog-sm-body-large-letter-spacing, var(--typog-md-body-large-letter-spacing, var(--typog-lg-body-large-letter-spacing, 0)));
  --typog-body-large-text-decoration: var(--typog-sm-body-large-text-decoration, var(--typog-md-body-large-text-decoration, var(--typog-lg-body-large-text-decoration, none)));
  --typog-body-large-text-transform: var(--typog-sm-body-large-text-transform, var(--typog-md-body-large-text-transform, var(--typog-lg-body-large-text-transform, none)));
  --typog-body-large-bold-family: var(--typog-sm-body-large-bold-family, var(--typog-md-body-large-bold-family, var(--typog-lg-body-large-bold-family, var(--typog-default-body-family))));
  --typog-body-large-bold-weight: var(--typog-sm-body-large-bold-weight, var(--typog-md-body-large-bold-weight, var(--typog-lg-body-large-bold-weight, normal)));
  --typog-body-large-bold-style: var(--typog-sm-body-large-bold-style, var(--typog-md-body-large-bold-style, var(--typog-lg-body-large-bold-style, normal)));
  --typog-body-large-bold-size: var(--typog-sm-body-large-bold-size, var(--typog-md-body-large-bold-size, var(--typog-lg-body-large-bold-size)));
  --typog-body-large-bold-line-height: var(--typog-sm-body-large-bold-line-height, var(--typog-md-body-large-bold-line-height, var(--typog-lg-body-large-bold-line-height)));
  --typog-body-large-bold-letter-spacing: var(--typog-sm-body-large-bold-letter-spacing, var(--typog-md-body-large-bold-letter-spacing, var(--typog-lg-body-large-bold-letter-spacing, 0)));
  --typog-body-large-bold-text-decoration: var(--typog-sm-body-large-bold-text-decoration, var(--typog-md-body-large-bold-text-decoration, var(--typog-lg-body-large-bold-text-decoration, none)));
  --typog-body-large-bold-text-transform: var(--typog-sm-body-large-bold-text-transform, var(--typog-md-body-large-bold-text-transform, var(--typog-lg-body-large-bold-text-transform, none)));
  --typog-body-large-link-family: var(--typog-sm-body-large-link-family, var(--typog-md-body-large-link-family, var(--typog-lg-body-large-link-family, var(--typog-default-body-family))));
  --typog-body-large-link-weight: var(--typog-sm-body-large-link-weight, var(--typog-md-body-large-link-weight, var(--typog-lg-body-large-link-weight, normal)));
  --typog-body-large-link-style: var(--typog-sm-body-large-link-style, var(--typog-md-body-large-link-style, var(--typog-lg-body-large-link-style, normal)));
  --typog-body-large-link-size: var(--typog-sm-body-large-link-size, var(--typog-md-body-large-link-size, var(--typog-lg-body-large-link-size)));
  --typog-body-large-link-line-height: var(--typog-sm-body-large-link-line-height, var(--typog-md-body-large-link-line-height, var(--typog-lg-body-large-link-line-height)));
  --typog-body-large-link-letter-spacing: var(--typog-sm-body-large-link-letter-spacing, var(--typog-md-body-large-link-letter-spacing, var(--typog-lg-body-large-link-letter-spacing, 0)));
  --typog-body-large-link-text-decoration: var(--typog-sm-body-large-link-text-decoration, var(--typog-md-body-large-link-text-decoration, var(--typog-lg-body-large-link-text-decoration, none)));
  --typog-body-large-link-text-transform: var(--typog-sm-body-large-link-text-transform, var(--typog-md-body-large-link-text-transform, var(--typog-lg-body-large-link-text-transform, none)));
  --typog-caption-regular-family: var(--typog-sm-caption-regular-family, var(--typog-md-caption-regular-family, var(--typog-lg-caption-regular-family, var(--typog-default-body-family))));
  --typog-caption-regular-weight: var(--typog-sm-caption-regular-weight, var(--typog-md-caption-regular-weight, var(--typog-lg-caption-regular-weight, normal)));
  --typog-caption-regular-style: var(--typog-sm-caption-regular-style, var(--typog-md-caption-regular-style, var(--typog-lg-caption-regular-style, normal)));
  --typog-caption-regular-size: var(--typog-sm-caption-regular-size, var(--typog-md-caption-regular-size, var(--typog-lg-caption-regular-size)));
  --typog-caption-regular-line-height: var(--typog-sm-caption-regular-line-height, var(--typog-md-caption-regular-line-height, var(--typog-lg-caption-regular-line-height)));
  --typog-caption-regular-letter-spacing: var(--typog-sm-caption-regular-letter-spacing, var(--typog-md-caption-regular-letter-spacing, var(--typog-lg-caption-regular-letter-spacing, 0)));
  --typog-caption-regular-text-decoration: var(--typog-sm-caption-regular-text-decoration, var(--typog-md-caption-regular-text-decoration, var(--typog-lg-caption-regular-text-decoration, none)));
  --typog-caption-regular-text-transform: var(--typog-sm-caption-regular-text-transform, var(--typog-md-caption-regular-text-transform, var(--typog-lg-caption-regular-text-transform, none)));
  --typog-caption-bold-family: var(--typog-sm-caption-bold-family, var(--typog-md-caption-bold-family, var(--typog-lg-caption-bold-family, var(--typog-default-body-family))));
  --typog-caption-bold-weight: var(--typog-sm-caption-bold-weight, var(--typog-md-caption-bold-weight, var(--typog-lg-caption-bold-weight, normal)));
  --typog-caption-bold-style: var(--typog-sm-caption-bold-style, var(--typog-md-caption-bold-style, var(--typog-lg-caption-bold-style, normal)));
  --typog-caption-bold-size: var(--typog-sm-caption-bold-size, var(--typog-md-caption-bold-size, var(--typog-lg-caption-bold-size)));
  --typog-caption-bold-line-height: var(--typog-sm-caption-bold-line-height, var(--typog-md-caption-bold-line-height, var(--typog-lg-caption-bold-line-height)));
  --typog-caption-bold-letter-spacing: var(--typog-sm-caption-bold-letter-spacing, var(--typog-md-caption-bold-letter-spacing, var(--typog-lg-caption-bold-letter-spacing, 0)));
  --typog-caption-bold-text-decoration: var(--typog-sm-caption-bold-text-decoration, var(--typog-md-caption-bold-text-decoration, var(--typog-lg-caption-bold-text-decoration, none)));
  --typog-caption-bold-text-transform: var(--typog-sm-caption-bold-text-transform, var(--typog-md-caption-bold-text-transform, var(--typog-lg-caption-bold-text-transform, none)));
  --typog-caption-link-family: var(--typog-sm-caption-link-family, var(--typog-md-caption-link-family, var(--typog-lg-caption-link-family, var(--typog-default-body-family))));
  --typog-caption-link-weight: var(--typog-sm-caption-link-weight, var(--typog-md-caption-link-weight, var(--typog-lg-caption-link-weight, normal)));
  --typog-caption-link-style: var(--typog-sm-caption-link-style, var(--typog-md-caption-link-style, var(--typog-lg-caption-link-style, normal)));
  --typog-caption-link-size: var(--typog-sm-caption-link-size, var(--typog-md-caption-link-size, var(--typog-lg-caption-link-size)));
  --typog-caption-link-line-height: var(--typog-sm-caption-link-line-height, var(--typog-md-caption-link-line-height, var(--typog-lg-caption-link-line-height)));
  --typog-caption-link-letter-spacing: var(--typog-sm-caption-link-letter-spacing, var(--typog-md-caption-link-letter-spacing, var(--typog-lg-caption-link-letter-spacing, 0)));
  --typog-caption-link-text-decoration: var(--typog-sm-caption-link-text-decoration, var(--typog-md-caption-link-text-decoration, var(--typog-lg-caption-link-text-decoration, none)));
  --typog-caption-link-text-transform: var(--typog-sm-caption-link-text-transform, var(--typog-md-caption-link-text-transform, var(--typog-lg-caption-link-text-transform, none)));
  --typog-menu-link-family: var(--typog-sm-menu-link-family, var(--typog-md-menu-link-family, var(--typog-lg-menu-link-family, var(--typog-default-body-family))));
  --typog-menu-link-weight: var(--typog-sm-menu-link-weight, var(--typog-md-menu-link-weight, var(--typog-lg-menu-link-weight, normal)));
  --typog-menu-link-style: var(--typog-sm-menu-link-style, var(--typog-md-menu-link-style, var(--typog-lg-menu-link-style, normal)));
  --typog-menu-link-size: var(--typog-sm-menu-link-size, var(--typog-md-menu-link-size, var(--typog-lg-menu-link-size)));
  --typog-menu-link-line-height: var(--typog-sm-menu-link-line-height, var(--typog-md-menu-link-line-height, var(--typog-lg-menu-link-line-height)));
  --typog-menu-link-letter-spacing: var(--typog-sm-menu-link-letter-spacing, var(--typog-md-menu-link-letter-spacing, var(--typog-lg-menu-link-letter-spacing, 0)));
  --typog-menu-link-text-decoration: var(--typog-sm-menu-link-text-decoration, var(--typog-md-menu-link-text-decoration, var(--typog-lg-menu-link-text-decoration, none)));
  --typog-menu-link-text-transform: var(--typog-sm-menu-link-text-transform, var(--typog-md-menu-link-text-transform, var(--typog-lg-menu-link-text-transform, none)));
  --typog-header-link-family: var(--typog-sm-header-link-family, var(--typog-md-header-link-family, var(--typog-lg-header-link-family, var(--typog-default-body-family))));
  --typog-header-link-weight: var(--typog-sm-header-link-weight, var(--typog-md-header-link-weight, var(--typog-lg-header-link-weight, normal)));
  --typog-header-link-style: var(--typog-sm-header-link-style, var(--typog-md-header-link-style, var(--typog-lg-header-link-style, normal)));
  --typog-header-link-size: var(--typog-sm-header-link-size, var(--typog-md-header-link-size, var(--typog-lg-header-link-size)));
  --typog-header-link-line-height: var(--typog-sm-header-link-line-height, var(--typog-md-header-link-line-height, var(--typog-lg-header-link-line-height)));
  --typog-header-link-letter-spacing: var(--typog-sm-header-link-letter-spacing, var(--typog-md-header-link-letter-spacing, var(--typog-lg-header-link-letter-spacing, 0)));
  --typog-header-link-text-decoration: var(--typog-sm-header-link-text-decoration, var(--typog-md-header-link-text-decoration, var(--typog-lg-header-link-text-decoration, none)));
  --typog-header-link-text-transform: var(--typog-sm-header-link-text-transform, var(--typog-md-header-link-text-transform, var(--typog-lg-header-link-text-transform, none)));
}
@media only screen and (min-width: 768px) {
  body {
    --typog-d1-family: var(--typog-md-d1-family, var(--typog-lg-d1-family, var(--typog-default-heading-family)));
    --typog-d1-weight: var(--typog-md-d1-weight, var(--typog-lg-d1-weight, normal));
    --typog-d1-style: var(--typog-md-d1-style, var(--typog-lg-d1-style, normal));
    --typog-d1-size: var(--typog-md-d1-size, var(--typog-lg-d1-size));
    --typog-d1-line-height: var(--typog-md-d1-line-height, var(--typog-lg-d1-line-height));
    --typog-d1-letter-spacing: var(--typog-md-d1-letter-spacing, var(--typog-lg-d1-letter-spacing, 0));
    --typog-d1-text-decoration: var(--typog-md-d1-text-decoration, var(--typog-lg-d1-text-decoration, none));
    --typog-d1-text-transform: var(--typog-md-d1-text-transform, var(--typog-lg-d1-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-d1-family: var(--typog-lg-d1-family, var(--typog-default-heading-family));
    --typog-d1-weight: var(--typog-lg-d1-weight, normal);
    --typog-d1-style: var(--typog-lg-d1-style, normal);
    --typog-d1-size: var(--typog-lg-d1-size);
    --typog-d1-line-height: var(--typog-lg-d1-line-height);
    --typog-d1-letter-spacing: var(--typog-lg-d1-letter-spacing, 0);
    --typog-d1-text-decoration: var(--typog-lg-d1-text-decoration, none);
    --typog-d1-text-transform: var(--typog-lg-d1-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-d2-family: var(--typog-md-d2-family, var(--typog-lg-d2-family, var(--typog-default-heading-family)));
    --typog-d2-weight: var(--typog-md-d2-weight, var(--typog-lg-d2-weight, normal));
    --typog-d2-style: var(--typog-md-d2-style, var(--typog-lg-d2-style, normal));
    --typog-d2-size: var(--typog-md-d2-size, var(--typog-lg-d2-size));
    --typog-d2-line-height: var(--typog-md-d2-line-height, var(--typog-lg-d2-line-height));
    --typog-d2-letter-spacing: var(--typog-md-d2-letter-spacing, var(--typog-lg-d2-letter-spacing, 0));
    --typog-d2-text-decoration: var(--typog-md-d2-text-decoration, var(--typog-lg-d2-text-decoration, none));
    --typog-d2-text-transform: var(--typog-md-d2-text-transform, var(--typog-lg-d2-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-d2-family: var(--typog-lg-d2-family, var(--typog-default-heading-family));
    --typog-d2-weight: var(--typog-lg-d2-weight, normal);
    --typog-d2-style: var(--typog-lg-d2-style, normal);
    --typog-d2-size: var(--typog-lg-d2-size);
    --typog-d2-line-height: var(--typog-lg-d2-line-height);
    --typog-d2-letter-spacing: var(--typog-lg-d2-letter-spacing, 0);
    --typog-d2-text-decoration: var(--typog-lg-d2-text-decoration, none);
    --typog-d2-text-transform: var(--typog-lg-d2-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-h1-family: var(--typog-md-h1-family, var(--typog-lg-h1-family, var(--typog-default-heading-family)));
    --typog-h1-weight: var(--typog-md-h1-weight, var(--typog-lg-h1-weight, normal));
    --typog-h1-style: var(--typog-md-h1-style, var(--typog-lg-h1-style, normal));
    --typog-h1-size: var(--typog-md-h1-size, var(--typog-lg-h1-size));
    --typog-h1-line-height: var(--typog-md-h1-line-height, var(--typog-lg-h1-line-height));
    --typog-h1-letter-spacing: var(--typog-md-h1-letter-spacing, var(--typog-lg-h1-letter-spacing, 0));
    --typog-h1-text-decoration: var(--typog-md-h1-text-decoration, var(--typog-lg-h1-text-decoration, none));
    --typog-h1-text-transform: var(--typog-md-h1-text-transform, var(--typog-lg-h1-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-h1-family: var(--typog-lg-h1-family, var(--typog-default-heading-family));
    --typog-h1-weight: var(--typog-lg-h1-weight, normal);
    --typog-h1-style: var(--typog-lg-h1-style, normal);
    --typog-h1-size: var(--typog-lg-h1-size);
    --typog-h1-line-height: var(--typog-lg-h1-line-height);
    --typog-h1-letter-spacing: var(--typog-lg-h1-letter-spacing, 0);
    --typog-h1-text-decoration: var(--typog-lg-h1-text-decoration, none);
    --typog-h1-text-transform: var(--typog-lg-h1-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-h2-family: var(--typog-md-h2-family, var(--typog-lg-h2-family, var(--typog-default-heading-family)));
    --typog-h2-weight: var(--typog-md-h2-weight, var(--typog-lg-h2-weight, normal));
    --typog-h2-style: var(--typog-md-h2-style, var(--typog-lg-h2-style, normal));
    --typog-h2-size: var(--typog-md-h2-size, var(--typog-lg-h2-size));
    --typog-h2-line-height: var(--typog-md-h2-line-height, var(--typog-lg-h2-line-height));
    --typog-h2-letter-spacing: var(--typog-md-h2-letter-spacing, var(--typog-lg-h2-letter-spacing, 0));
    --typog-h2-text-decoration: var(--typog-md-h2-text-decoration, var(--typog-lg-h2-text-decoration, none));
    --typog-h2-text-transform: var(--typog-md-h2-text-transform, var(--typog-lg-h2-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-h2-family: var(--typog-lg-h2-family, var(--typog-default-heading-family));
    --typog-h2-weight: var(--typog-lg-h2-weight, normal);
    --typog-h2-style: var(--typog-lg-h2-style, normal);
    --typog-h2-size: var(--typog-lg-h2-size);
    --typog-h2-line-height: var(--typog-lg-h2-line-height);
    --typog-h2-letter-spacing: var(--typog-lg-h2-letter-spacing, 0);
    --typog-h2-text-decoration: var(--typog-lg-h2-text-decoration, none);
    --typog-h2-text-transform: var(--typog-lg-h2-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-h3-family: var(--typog-md-h3-family, var(--typog-lg-h3-family, var(--typog-default-heading-family)));
    --typog-h3-weight: var(--typog-md-h3-weight, var(--typog-lg-h3-weight, normal));
    --typog-h3-style: var(--typog-md-h3-style, var(--typog-lg-h3-style, normal));
    --typog-h3-size: var(--typog-md-h3-size, var(--typog-lg-h3-size));
    --typog-h3-line-height: var(--typog-md-h3-line-height, var(--typog-lg-h3-line-height));
    --typog-h3-letter-spacing: var(--typog-md-h3-letter-spacing, var(--typog-lg-h3-letter-spacing, 0));
    --typog-h3-text-decoration: var(--typog-md-h3-text-decoration, var(--typog-lg-h3-text-decoration, none));
    --typog-h3-text-transform: var(--typog-md-h3-text-transform, var(--typog-lg-h3-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-h3-family: var(--typog-lg-h3-family, var(--typog-default-heading-family));
    --typog-h3-weight: var(--typog-lg-h3-weight, normal);
    --typog-h3-style: var(--typog-lg-h3-style, normal);
    --typog-h3-size: var(--typog-lg-h3-size);
    --typog-h3-line-height: var(--typog-lg-h3-line-height);
    --typog-h3-letter-spacing: var(--typog-lg-h3-letter-spacing, 0);
    --typog-h3-text-decoration: var(--typog-lg-h3-text-decoration, none);
    --typog-h3-text-transform: var(--typog-lg-h3-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-h4-family: var(--typog-md-h4-family, var(--typog-lg-h4-family, var(--typog-default-heading-family)));
    --typog-h4-weight: var(--typog-md-h4-weight, var(--typog-lg-h4-weight, normal));
    --typog-h4-style: var(--typog-md-h4-style, var(--typog-lg-h4-style, normal));
    --typog-h4-size: var(--typog-md-h4-size, var(--typog-lg-h4-size));
    --typog-h4-line-height: var(--typog-md-h4-line-height, var(--typog-lg-h4-line-height));
    --typog-h4-letter-spacing: var(--typog-md-h4-letter-spacing, var(--typog-lg-h4-letter-spacing, 0));
    --typog-h4-text-decoration: var(--typog-md-h4-text-decoration, var(--typog-lg-h4-text-decoration, none));
    --typog-h4-text-transform: var(--typog-md-h4-text-transform, var(--typog-lg-h4-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-h4-family: var(--typog-lg-h4-family, var(--typog-default-heading-family));
    --typog-h4-weight: var(--typog-lg-h4-weight, normal);
    --typog-h4-style: var(--typog-lg-h4-style, normal);
    --typog-h4-size: var(--typog-lg-h4-size);
    --typog-h4-line-height: var(--typog-lg-h4-line-height);
    --typog-h4-letter-spacing: var(--typog-lg-h4-letter-spacing, 0);
    --typog-h4-text-decoration: var(--typog-lg-h4-text-decoration, none);
    --typog-h4-text-transform: var(--typog-lg-h4-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-h5-family: var(--typog-md-h5-family, var(--typog-lg-h5-family, var(--typog-default-heading-family)));
    --typog-h5-weight: var(--typog-md-h5-weight, var(--typog-lg-h5-weight, normal));
    --typog-h5-style: var(--typog-md-h5-style, var(--typog-lg-h5-style, normal));
    --typog-h5-size: var(--typog-md-h5-size, var(--typog-lg-h5-size));
    --typog-h5-line-height: var(--typog-md-h5-line-height, var(--typog-lg-h5-line-height));
    --typog-h5-letter-spacing: var(--typog-md-h5-letter-spacing, var(--typog-lg-h5-letter-spacing, 0));
    --typog-h5-text-decoration: var(--typog-md-h5-text-decoration, var(--typog-lg-h5-text-decoration, none));
    --typog-h5-text-transform: var(--typog-md-h5-text-transform, var(--typog-lg-h5-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-h5-family: var(--typog-lg-h5-family, var(--typog-default-heading-family));
    --typog-h5-weight: var(--typog-lg-h5-weight, normal);
    --typog-h5-style: var(--typog-lg-h5-style, normal);
    --typog-h5-size: var(--typog-lg-h5-size);
    --typog-h5-line-height: var(--typog-lg-h5-line-height);
    --typog-h5-letter-spacing: var(--typog-lg-h5-letter-spacing, 0);
    --typog-h5-text-decoration: var(--typog-lg-h5-text-decoration, none);
    --typog-h5-text-transform: var(--typog-lg-h5-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-h6-family: var(--typog-md-h6-family, var(--typog-lg-h6-family, var(--typog-default-heading-family)));
    --typog-h6-weight: var(--typog-md-h6-weight, var(--typog-lg-h6-weight, normal));
    --typog-h6-style: var(--typog-md-h6-style, var(--typog-lg-h6-style, normal));
    --typog-h6-size: var(--typog-md-h6-size, var(--typog-lg-h6-size));
    --typog-h6-line-height: var(--typog-md-h6-line-height, var(--typog-lg-h6-line-height));
    --typog-h6-letter-spacing: var(--typog-md-h6-letter-spacing, var(--typog-lg-h6-letter-spacing, 0));
    --typog-h6-text-decoration: var(--typog-md-h6-text-decoration, var(--typog-lg-h6-text-decoration, none));
    --typog-h6-text-transform: var(--typog-md-h6-text-transform, var(--typog-lg-h6-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-h6-family: var(--typog-lg-h6-family, var(--typog-default-heading-family));
    --typog-h6-weight: var(--typog-lg-h6-weight, normal);
    --typog-h6-style: var(--typog-lg-h6-style, normal);
    --typog-h6-size: var(--typog-lg-h6-size);
    --typog-h6-line-height: var(--typog-lg-h6-line-height);
    --typog-h6-letter-spacing: var(--typog-lg-h6-letter-spacing, 0);
    --typog-h6-text-decoration: var(--typog-lg-h6-text-decoration, none);
    --typog-h6-text-transform: var(--typog-lg-h6-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-button-family: var(--typog-md-button-family, var(--typog-lg-button-family, var(--typog-default-body-family)));
    --typog-button-weight: var(--typog-md-button-weight, var(--typog-lg-button-weight, normal));
    --typog-button-style: var(--typog-md-button-style, var(--typog-lg-button-style, normal));
    --typog-button-size: var(--typog-md-button-size, var(--typog-lg-button-size));
    --typog-button-line-height: var(--typog-md-button-line-height, var(--typog-lg-button-line-height));
    --typog-button-letter-spacing: var(--typog-md-button-letter-spacing, var(--typog-lg-button-letter-spacing, 0));
    --typog-button-text-decoration: var(--typog-md-button-text-decoration, var(--typog-lg-button-text-decoration, none));
    --typog-button-text-transform: var(--typog-md-button-text-transform, var(--typog-lg-button-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-button-family: var(--typog-lg-button-family, var(--typog-default-body-family));
    --typog-button-weight: var(--typog-lg-button-weight, normal);
    --typog-button-style: var(--typog-lg-button-style, normal);
    --typog-button-size: var(--typog-lg-button-size);
    --typog-button-line-height: var(--typog-lg-button-line-height);
    --typog-button-letter-spacing: var(--typog-lg-button-letter-spacing, 0);
    --typog-button-text-decoration: var(--typog-lg-button-text-decoration, none);
    --typog-button-text-transform: var(--typog-lg-button-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-body-regular-family: var(--typog-md-body-regular-family, var(--typog-lg-body-regular-family, var(--typog-default-body-family)));
    --typog-body-regular-weight: var(--typog-md-body-regular-weight, var(--typog-lg-body-regular-weight, normal));
    --typog-body-regular-style: var(--typog-md-body-regular-style, var(--typog-lg-body-regular-style, normal));
    --typog-body-regular-size: var(--typog-md-body-regular-size, var(--typog-lg-body-regular-size));
    --typog-body-regular-line-height: var(--typog-md-body-regular-line-height, var(--typog-lg-body-regular-line-height));
    --typog-body-regular-letter-spacing: var(--typog-md-body-regular-letter-spacing, var(--typog-lg-body-regular-letter-spacing, 0));
    --typog-body-regular-text-decoration: var(--typog-md-body-regular-text-decoration, var(--typog-lg-body-regular-text-decoration, none));
    --typog-body-regular-text-transform: var(--typog-md-body-regular-text-transform, var(--typog-lg-body-regular-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-body-regular-family: var(--typog-lg-body-regular-family, var(--typog-default-body-family));
    --typog-body-regular-weight: var(--typog-lg-body-regular-weight, normal);
    --typog-body-regular-style: var(--typog-lg-body-regular-style, normal);
    --typog-body-regular-size: var(--typog-lg-body-regular-size);
    --typog-body-regular-line-height: var(--typog-lg-body-regular-line-height);
    --typog-body-regular-letter-spacing: var(--typog-lg-body-regular-letter-spacing, 0);
    --typog-body-regular-text-decoration: var(--typog-lg-body-regular-text-decoration, none);
    --typog-body-regular-text-transform: var(--typog-lg-body-regular-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-body-bold-family: var(--typog-md-body-bold-family, var(--typog-lg-body-bold-family, var(--typog-default-body-family)));
    --typog-body-bold-weight: var(--typog-md-body-bold-weight, var(--typog-lg-body-bold-weight, normal));
    --typog-body-bold-style: var(--typog-md-body-bold-style, var(--typog-lg-body-bold-style, normal));
    --typog-body-bold-size: var(--typog-md-body-bold-size, var(--typog-lg-body-bold-size));
    --typog-body-bold-line-height: var(--typog-md-body-bold-line-height, var(--typog-lg-body-bold-line-height));
    --typog-body-bold-letter-spacing: var(--typog-md-body-bold-letter-spacing, var(--typog-lg-body-bold-letter-spacing, 0));
    --typog-body-bold-text-decoration: var(--typog-md-body-bold-text-decoration, var(--typog-lg-body-bold-text-decoration, none));
    --typog-body-bold-text-transform: var(--typog-md-body-bold-text-transform, var(--typog-lg-body-bold-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-body-bold-family: var(--typog-lg-body-bold-family, var(--typog-default-body-family));
    --typog-body-bold-weight: var(--typog-lg-body-bold-weight, normal);
    --typog-body-bold-style: var(--typog-lg-body-bold-style, normal);
    --typog-body-bold-size: var(--typog-lg-body-bold-size);
    --typog-body-bold-line-height: var(--typog-lg-body-bold-line-height);
    --typog-body-bold-letter-spacing: var(--typog-lg-body-bold-letter-spacing, 0);
    --typog-body-bold-text-decoration: var(--typog-lg-body-bold-text-decoration, none);
    --typog-body-bold-text-transform: var(--typog-lg-body-bold-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-body-link-family: var(--typog-md-body-link-family, var(--typog-lg-body-link-family, var(--typog-default-body-family)));
    --typog-body-link-weight: var(--typog-md-body-link-weight, var(--typog-lg-body-link-weight, normal));
    --typog-body-link-style: var(--typog-md-body-link-style, var(--typog-lg-body-link-style, normal));
    --typog-body-link-size: var(--typog-md-body-link-size, var(--typog-lg-body-link-size));
    --typog-body-link-line-height: var(--typog-md-body-link-line-height, var(--typog-lg-body-link-line-height));
    --typog-body-link-letter-spacing: var(--typog-md-body-link-letter-spacing, var(--typog-lg-body-link-letter-spacing, 0));
    --typog-body-link-text-decoration: var(--typog-md-body-link-text-decoration, var(--typog-lg-body-link-text-decoration, none));
    --typog-body-link-text-transform: var(--typog-md-body-link-text-transform, var(--typog-lg-body-link-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-body-link-family: var(--typog-lg-body-link-family, var(--typog-default-body-family));
    --typog-body-link-weight: var(--typog-lg-body-link-weight, normal);
    --typog-body-link-style: var(--typog-lg-body-link-style, normal);
    --typog-body-link-size: var(--typog-lg-body-link-size);
    --typog-body-link-line-height: var(--typog-lg-body-link-line-height);
    --typog-body-link-letter-spacing: var(--typog-lg-body-link-letter-spacing, 0);
    --typog-body-link-text-decoration: var(--typog-lg-body-link-text-decoration, none);
    --typog-body-link-text-transform: var(--typog-lg-body-link-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-body-large-family: var(--typog-md-body-large-family, var(--typog-lg-body-large-family, var(--typog-default-body-family)));
    --typog-body-large-weight: var(--typog-md-body-large-weight, var(--typog-lg-body-large-weight, normal));
    --typog-body-large-style: var(--typog-md-body-large-style, var(--typog-lg-body-large-style, normal));
    --typog-body-large-size: var(--typog-md-body-large-size, var(--typog-lg-body-large-size));
    --typog-body-large-line-height: var(--typog-md-body-large-line-height, var(--typog-lg-body-large-line-height));
    --typog-body-large-letter-spacing: var(--typog-md-body-large-letter-spacing, var(--typog-lg-body-large-letter-spacing, 0));
    --typog-body-large-text-decoration: var(--typog-md-body-large-text-decoration, var(--typog-lg-body-large-text-decoration, none));
    --typog-body-large-text-transform: var(--typog-md-body-large-text-transform, var(--typog-lg-body-large-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-body-large-family: var(--typog-lg-body-large-family, var(--typog-default-body-family));
    --typog-body-large-weight: var(--typog-lg-body-large-weight, normal);
    --typog-body-large-style: var(--typog-lg-body-large-style, normal);
    --typog-body-large-size: var(--typog-lg-body-large-size);
    --typog-body-large-line-height: var(--typog-lg-body-large-line-height);
    --typog-body-large-letter-spacing: var(--typog-lg-body-large-letter-spacing, 0);
    --typog-body-large-text-decoration: var(--typog-lg-body-large-text-decoration, none);
    --typog-body-large-text-transform: var(--typog-lg-body-large-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-body-large-bold-family: var(--typog-md-body-large-bold-family, var(--typog-lg-body-large-bold-family, var(--typog-default-body-family)));
    --typog-body-large-bold-weight: var(--typog-md-body-large-bold-weight, var(--typog-lg-body-large-bold-weight, normal));
    --typog-body-large-bold-style: var(--typog-md-body-large-bold-style, var(--typog-lg-body-large-bold-style, normal));
    --typog-body-large-bold-size: var(--typog-md-body-large-bold-size, var(--typog-lg-body-large-bold-size));
    --typog-body-large-bold-line-height: var(--typog-md-body-large-bold-line-height, var(--typog-lg-body-large-bold-line-height));
    --typog-body-large-bold-letter-spacing: var(--typog-md-body-large-bold-letter-spacing, var(--typog-lg-body-large-bold-letter-spacing, 0));
    --typog-body-large-bold-text-decoration: var(--typog-md-body-large-bold-text-decoration, var(--typog-lg-body-large-bold-text-decoration, none));
    --typog-body-large-bold-text-transform: var(--typog-md-body-large-bold-text-transform, var(--typog-lg-body-large-bold-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-body-large-bold-family: var(--typog-lg-body-large-bold-family, var(--typog-default-body-family));
    --typog-body-large-bold-weight: var(--typog-lg-body-large-bold-weight, normal);
    --typog-body-large-bold-style: var(--typog-lg-body-large-bold-style, normal);
    --typog-body-large-bold-size: var(--typog-lg-body-large-bold-size);
    --typog-body-large-bold-line-height: var(--typog-lg-body-large-bold-line-height);
    --typog-body-large-bold-letter-spacing: var(--typog-lg-body-large-bold-letter-spacing, 0);
    --typog-body-large-bold-text-decoration: var(--typog-lg-body-large-bold-text-decoration, none);
    --typog-body-large-bold-text-transform: var(--typog-lg-body-large-bold-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-body-large-link-family: var(--typog-md-body-large-link-family, var(--typog-lg-body-large-link-family, var(--typog-default-body-family)));
    --typog-body-large-link-weight: var(--typog-md-body-large-link-weight, var(--typog-lg-body-large-link-weight, normal));
    --typog-body-large-link-style: var(--typog-md-body-large-link-style, var(--typog-lg-body-large-link-style, normal));
    --typog-body-large-link-size: var(--typog-md-body-large-link-size, var(--typog-lg-body-large-link-size));
    --typog-body-large-link-line-height: var(--typog-md-body-large-link-line-height, var(--typog-lg-body-large-link-line-height));
    --typog-body-large-link-letter-spacing: var(--typog-md-body-large-link-letter-spacing, var(--typog-lg-body-large-link-letter-spacing, 0));
    --typog-body-large-link-text-decoration: var(--typog-md-body-large-link-text-decoration, var(--typog-lg-body-large-link-text-decoration, none));
    --typog-body-large-link-text-transform: var(--typog-md-body-large-link-text-transform, var(--typog-lg-body-large-link-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-body-large-link-family: var(--typog-lg-body-large-link-family, var(--typog-default-body-family));
    --typog-body-large-link-weight: var(--typog-lg-body-large-link-weight, normal);
    --typog-body-large-link-style: var(--typog-lg-body-large-link-style, normal);
    --typog-body-large-link-size: var(--typog-lg-body-large-link-size);
    --typog-body-large-link-line-height: var(--typog-lg-body-large-link-line-height);
    --typog-body-large-link-letter-spacing: var(--typog-lg-body-large-link-letter-spacing, 0);
    --typog-body-large-link-text-decoration: var(--typog-lg-body-large-link-text-decoration, none);
    --typog-body-large-link-text-transform: var(--typog-lg-body-large-link-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-caption-regular-family: var(--typog-md-caption-regular-family, var(--typog-lg-caption-regular-family, var(--typog-default-body-family)));
    --typog-caption-regular-weight: var(--typog-md-caption-regular-weight, var(--typog-lg-caption-regular-weight, normal));
    --typog-caption-regular-style: var(--typog-md-caption-regular-style, var(--typog-lg-caption-regular-style, normal));
    --typog-caption-regular-size: var(--typog-md-caption-regular-size, var(--typog-lg-caption-regular-size));
    --typog-caption-regular-line-height: var(--typog-md-caption-regular-line-height, var(--typog-lg-caption-regular-line-height));
    --typog-caption-regular-letter-spacing: var(--typog-md-caption-regular-letter-spacing, var(--typog-lg-caption-regular-letter-spacing, 0));
    --typog-caption-regular-text-decoration: var(--typog-md-caption-regular-text-decoration, var(--typog-lg-caption-regular-text-decoration, none));
    --typog-caption-regular-text-transform: var(--typog-md-caption-regular-text-transform, var(--typog-lg-caption-regular-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-caption-regular-family: var(--typog-lg-caption-regular-family, var(--typog-default-body-family));
    --typog-caption-regular-weight: var(--typog-lg-caption-regular-weight, normal);
    --typog-caption-regular-style: var(--typog-lg-caption-regular-style, normal);
    --typog-caption-regular-size: var(--typog-lg-caption-regular-size);
    --typog-caption-regular-line-height: var(--typog-lg-caption-regular-line-height);
    --typog-caption-regular-letter-spacing: var(--typog-lg-caption-regular-letter-spacing, 0);
    --typog-caption-regular-text-decoration: var(--typog-lg-caption-regular-text-decoration, none);
    --typog-caption-regular-text-transform: var(--typog-lg-caption-regular-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-caption-bold-family: var(--typog-md-caption-bold-family, var(--typog-lg-caption-bold-family, var(--typog-default-body-family)));
    --typog-caption-bold-weight: var(--typog-md-caption-bold-weight, var(--typog-lg-caption-bold-weight, normal));
    --typog-caption-bold-style: var(--typog-md-caption-bold-style, var(--typog-lg-caption-bold-style, normal));
    --typog-caption-bold-size: var(--typog-md-caption-bold-size, var(--typog-lg-caption-bold-size));
    --typog-caption-bold-line-height: var(--typog-md-caption-bold-line-height, var(--typog-lg-caption-bold-line-height));
    --typog-caption-bold-letter-spacing: var(--typog-md-caption-bold-letter-spacing, var(--typog-lg-caption-bold-letter-spacing, 0));
    --typog-caption-bold-text-decoration: var(--typog-md-caption-bold-text-decoration, var(--typog-lg-caption-bold-text-decoration, none));
    --typog-caption-bold-text-transform: var(--typog-md-caption-bold-text-transform, var(--typog-lg-caption-bold-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-caption-bold-family: var(--typog-lg-caption-bold-family, var(--typog-default-body-family));
    --typog-caption-bold-weight: var(--typog-lg-caption-bold-weight, normal);
    --typog-caption-bold-style: var(--typog-lg-caption-bold-style, normal);
    --typog-caption-bold-size: var(--typog-lg-caption-bold-size);
    --typog-caption-bold-line-height: var(--typog-lg-caption-bold-line-height);
    --typog-caption-bold-letter-spacing: var(--typog-lg-caption-bold-letter-spacing, 0);
    --typog-caption-bold-text-decoration: var(--typog-lg-caption-bold-text-decoration, none);
    --typog-caption-bold-text-transform: var(--typog-lg-caption-bold-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-caption-link-family: var(--typog-md-caption-link-family, var(--typog-lg-caption-link-family, var(--typog-default-body-family)));
    --typog-caption-link-weight: var(--typog-md-caption-link-weight, var(--typog-lg-caption-link-weight, normal));
    --typog-caption-link-style: var(--typog-md-caption-link-style, var(--typog-lg-caption-link-style, normal));
    --typog-caption-link-size: var(--typog-md-caption-link-size, var(--typog-lg-caption-link-size));
    --typog-caption-link-line-height: var(--typog-md-caption-link-line-height, var(--typog-lg-caption-link-line-height));
    --typog-caption-link-letter-spacing: var(--typog-md-caption-link-letter-spacing, var(--typog-lg-caption-link-letter-spacing, 0));
    --typog-caption-link-text-decoration: var(--typog-md-caption-link-text-decoration, var(--typog-lg-caption-link-text-decoration, none));
    --typog-caption-link-text-transform: var(--typog-md-caption-link-text-transform, var(--typog-lg-caption-link-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-caption-link-family: var(--typog-lg-caption-link-family, var(--typog-default-body-family));
    --typog-caption-link-weight: var(--typog-lg-caption-link-weight, normal);
    --typog-caption-link-style: var(--typog-lg-caption-link-style, normal);
    --typog-caption-link-size: var(--typog-lg-caption-link-size);
    --typog-caption-link-line-height: var(--typog-lg-caption-link-line-height);
    --typog-caption-link-letter-spacing: var(--typog-lg-caption-link-letter-spacing, 0);
    --typog-caption-link-text-decoration: var(--typog-lg-caption-link-text-decoration, none);
    --typog-caption-link-text-transform: var(--typog-lg-caption-link-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-menu-link-family: var(--typog-md-menu-link-family, var(--typog-lg-menu-link-family, var(--typog-default-body-family)));
    --typog-menu-link-weight: var(--typog-md-menu-link-weight, var(--typog-lg-menu-link-weight, normal));
    --typog-menu-link-style: var(--typog-md-menu-link-style, var(--typog-lg-menu-link-style, normal));
    --typog-menu-link-size: var(--typog-md-menu-link-size, var(--typog-lg-menu-link-size));
    --typog-menu-link-line-height: var(--typog-md-menu-link-line-height, var(--typog-lg-menu-link-line-height));
    --typog-menu-link-letter-spacing: var(--typog-md-menu-link-letter-spacing, var(--typog-lg-menu-link-letter-spacing, 0));
    --typog-menu-link-text-decoration: var(--typog-md-menu-link-text-decoration, var(--typog-lg-menu-link-text-decoration, none));
    --typog-menu-link-text-transform: var(--typog-md-menu-link-text-transform, var(--typog-lg-menu-link-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-menu-link-family: var(--typog-lg-menu-link-family, var(--typog-default-body-family));
    --typog-menu-link-weight: var(--typog-lg-menu-link-weight, normal);
    --typog-menu-link-style: var(--typog-lg-menu-link-style, normal);
    --typog-menu-link-size: var(--typog-lg-menu-link-size);
    --typog-menu-link-line-height: var(--typog-lg-menu-link-line-height);
    --typog-menu-link-letter-spacing: var(--typog-lg-menu-link-letter-spacing, 0);
    --typog-menu-link-text-decoration: var(--typog-lg-menu-link-text-decoration, none);
    --typog-menu-link-text-transform: var(--typog-lg-menu-link-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-header-link-family: var(--typog-md-header-link-family, var(--typog-lg-header-link-family, var(--typog-default-body-family)));
    --typog-header-link-weight: var(--typog-md-header-link-weight, var(--typog-lg-header-link-weight, normal));
    --typog-header-link-style: var(--typog-md-header-link-style, var(--typog-lg-header-link-style, normal));
    --typog-header-link-size: var(--typog-md-header-link-size, var(--typog-lg-header-link-size));
    --typog-header-link-line-height: var(--typog-md-header-link-line-height, var(--typog-lg-header-link-line-height));
    --typog-header-link-letter-spacing: var(--typog-md-header-link-letter-spacing, var(--typog-lg-header-link-letter-spacing, 0));
    --typog-header-link-text-decoration: var(--typog-md-header-link-text-decoration, var(--typog-lg-header-link-text-decoration, none));
    --typog-header-link-text-transform: var(--typog-md-header-link-text-transform, var(--typog-lg-header-link-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-header-link-family: var(--typog-lg-header-link-family, var(--typog-default-body-family));
    --typog-header-link-weight: var(--typog-lg-header-link-weight, normal);
    --typog-header-link-style: var(--typog-lg-header-link-style, normal);
    --typog-header-link-size: var(--typog-lg-header-link-size);
    --typog-header-link-line-height: var(--typog-lg-header-link-line-height);
    --typog-header-link-letter-spacing: var(--typog-lg-header-link-letter-spacing, 0);
    --typog-header-link-text-decoration: var(--typog-lg-header-link-text-decoration, none);
    --typog-header-link-text-transform: var(--typog-lg-header-link-text-transform, none);
  }
}

@font-face {
  font-family: "VAG Rounded LT Pro Bold";
  src: url('VAGRoundedLTPro-Bold.eot');
  src: url('VAGRoundedLTPro-Bold.eot?#iefix') format("embedded-opentype"), url('VAGRoundedLTPro-Bold.woff2') format("woff2"), url('VAGRoundedLTPro-Bold.woff') format("woff"), url('VAGRoundedLTPro-Bold.ttf') format("truetype"), url('VAGRoundedLTPro-Bold.svg#VAGRoundedLTPro-Bold') format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded LT Pro Thin";
  src: url('VAGRoundedLTPro-Thin.eot');
  src: url('VAGRoundedLTPro-Thin.eot?#iefix') format("embedded-opentype"), url('VAGRoundedLTPro-Thin.woff2') format("woff2"), url('VAGRoundedLTPro-Thin.woff') format("woff"), url('VAGRoundedLTPro-Thin.ttf') format("truetype"), url('VAGRoundedLTPro-Thin.svg#VAGRoundedLTPro-Thin') format("svg");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded LT Pro Light";
  src: url('VAGRoundedLTPro-Light.eot');
  src: url('VAGRoundedLTPro-Light.eot?#iefix') format("embedded-opentype"), url('VAGRoundedLTPro-Light.woff2') format("woff2"), url('VAGRoundedLTPro-Light.woff') format("woff"), url('VAGRoundedLTPro-Light.ttf') format("truetype"), url('VAGRoundedLTPro-Light.svg#VAGRoundedLTPro-Light') format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded LT Pro Black";
  src: url('VAGRoundedLTPro-Black.eot');
  src: url('VAGRoundedLTPro-Black.eot?#iefix') format("embedded-opentype"), url('VAGRoundedLTPro-Black.woff2') format("woff2"), url('VAGRoundedLTPro-Black.woff') format("woff"), url('VAGRoundedLTPro-Black.ttf') format("truetype"), url('VAGRoundedLTPro-Black.svg#VAGRoundedLTPro-Black') format("svg");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded W01 Light";
  src: url('VAGRoundedW01-Light.eot');
  src: url('VAGRoundedW01-Light.eot?#iefix') format("embedded-opentype"), url('VAGRoundedW01-Light.woff2') format("woff2"), url('VAGRoundedW01-Light.woff') format("woff"), url('VAGRoundedW01-Light.ttf') format("truetype"), url('VAGRoundedW01-Light.svg#VAGRoundedW01-Light') format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded W01 Bold";
  src: url('VAGRoundedW01-Bold.eot');
  src: url('VAGRoundedW01-Bold.eot?#iefix') format("embedded-opentype"), url('VAGRoundedW01-Bold.woff2') format("woff2"), url('VAGRoundedW01-Bold.woff') format("woff"), url('VAGRoundedW01-Bold.ttf') format("truetype"), url('VAGRoundedW01-Bold.svg#VAGRoundedW01-Bold') format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans Light";
  src: url('MuseoSans-Light.eot');
  src: url('MuseoSans-Light.eot?#iefix') format("embedded-opentype"), url('MuseoSans-Light.woff2') format("woff2"), url('MuseoSans-Light.woff') format("woff"), url('MuseoSans-Light.ttf') format("truetype"), url('MuseoSans-Light.svg#MuseoSans-Light') format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans Regular";
  src: url('MuseoSans-Regular.eot');
  src: url('MuseoSans-Regular.eot?#iefix') format("embedded-opentype"), url('MuseoSans-Regular.woff2') format("woff2"), url('MuseoSans-Regular.woff') format("woff"), url('MuseoSans-Regular.ttf') format("truetype"), url('MuseoSans-Regular.svg#MuseoSans-Regular') format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans Bold";
  src: url('MuseoSans-Bold.eot');
  src: url('MuseoSans-Bold.eot?#iefix') format("embedded-opentype"), url('MuseoSans-Bold.woff2') format("woff2"), url('MuseoSans-Bold.woff') format("woff"), url('MuseoSans-Bold.ttf') format("truetype"), url('MuseoSans-Bold.svg#MuseoSans-Bold') format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro SemiBold";
  src: url('SourceSansPro-SemiBold.eot');
  src: url('SourceSansPro-SemiBold.eot?#iefix') format("embedded-opentype"), url('SourceSansPro-SemiBold.woff2') format("woff2"), url('SourceSansPro-SemiBold.woff') format("woff"), url('SourceSansPro-SemiBold.ttf') format("truetype"), url('SourceSansPro-SemiBold.svg#SourceSansPro-SemiBold') format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro Regular";
  src: url('SourceSansPro-Regular.eot');
  src: url('SourceSansPro-Regular.eot?#iefix') format("embedded-opentype"), url('SourceSansPro-Regular.woff2') format("woff2"), url('SourceSansPro-Regular.woff') format("woff"), url('SourceSansPro-Regular.ttf') format("truetype"), url('SourceSansPro-Regular.svg#SourceSansPro-Regular') format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SkyTextMedium";
  src: url('sky-medium-webfont.woff2') format("woff2"), url('sky-medium-webfont.woff') format("woff");
  font-display: swap;
}
@font-face {
  font-family: "SkyTextRegular";
  src: url('sky-regular-webfont.woff2') format("woff2"), url('sky-regular-webfont.woff') format("woff");
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded LT Pro";
  src: url('VAGRoundedLTPro-Bold.eot');
  src: url('VAGRoundedLTPro-Bold.eot?#iefix') format("embedded-opentype"), url('VAGRoundedLTPro-Bold.woff2') format("woff2"), url('VAGRoundedLTPro-Bold.woff') format("woff"), url('VAGRoundedLTPro-Bold.ttf') format("truetype"), url('VAGRoundedLTPro-Bold.svg#VAGRoundedLTPro-Bold') format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded LT Pro";
  src: url('VAGRoundedLTPro-Thin.eot');
  src: url('VAGRoundedLTPro-Thin.eot?#iefix') format("embedded-opentype"), url('VAGRoundedLTPro-Thin.woff2') format("woff2"), url('VAGRoundedLTPro-Thin.woff') format("woff"), url('VAGRoundedLTPro-Thin.ttf') format("truetype"), url('VAGRoundedLTPro-Thin.svg#VAGRoundedLTPro-Thin') format("svg");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded LT Pro";
  src: url('VAGRoundedLTPro-Light.eot');
  src: url('VAGRoundedLTPro-Light.eot?#iefix') format("embedded-opentype"), url('VAGRoundedLTPro-Light.woff2') format("woff2"), url('VAGRoundedLTPro-Light.woff') format("woff"), url('VAGRoundedLTPro-Light.ttf') format("truetype"), url('VAGRoundedLTPro-Light.svg#VAGRoundedLTPro-Light') format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded LT Pro";
  src: url('VAGRoundedLTPro-Black.eot');
  src: url('VAGRoundedLTPro-Black.eot?#iefix') format("embedded-opentype"), url('VAGRoundedLTPro-Black.woff2') format("woff2"), url('VAGRoundedLTPro-Black.woff') format("woff"), url('VAGRoundedLTPro-Black.ttf') format("truetype"), url('VAGRoundedLTPro-Black.svg#VAGRoundedLTPro-Black') format("svg");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded W01";
  src: url('VAGRoundedW01-Bold.eot');
  src: url('VAGRoundedW01-Bold.eot?#iefix') format("embedded-opentype"), url('VAGRoundedW01-Bold.woff2') format("woff2"), url('VAGRoundedW01-Bold.woff') format("woff"), url('VAGRoundedW01-Bold.ttf') format("truetype"), url('VAGRoundedW01-Bold.svg#VAGRoundedW01-Bold') format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded W01";
  src: url('VAGRoundedW01-Light.eot');
  src: url('VAGRoundedW01-Light.eot?#iefix') format("embedded-opentype"), url('VAGRoundedW01-Light.woff2') format("woff2"), url('VAGRoundedW01-Light.woff') format("woff"), url('VAGRoundedW01-Light.ttf') format("truetype"), url('VAGRoundedW01-Light.svg#VAGRoundedW01-Light') format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans";
  src: url('MuseoSans-Light.eot');
  src: url('MuseoSans-Light.eot?#iefix') format("embedded-opentype"), url('MuseoSans-Light.woff2') format("woff2"), url('MuseoSans-Light.woff') format("woff"), url('MuseoSans-Light.ttf') format("truetype"), url('MuseoSans-Light.svg#MuseoSans-Light') format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans";
  src: url('MuseoSans-Regular.eot');
  src: url('MuseoSans-Regular.eot?#iefix') format("embedded-opentype"), url('MuseoSans-Regular.woff2') format("woff2"), url('MuseoSans-Regular.woff') format("woff"), url('MuseoSans-Regular.ttf') format("truetype"), url('MuseoSans-Regular.svg#MuseoSans-Regular') format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans";
  src: url('MuseoSans-Bold.eot');
  src: url('MuseoSans-Bold.eot?#iefix') format("embedded-opentype"), url('MuseoSans-Bold.woff2') format("woff2"), url('MuseoSans-Bold.woff') format("woff"), url('MuseoSans-Bold.ttf') format("truetype"), url('MuseoSans-Bold.svg#MuseoSans-Bold') format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans";
  src: url('MuseoSans-Bold.eot');
  src: url('MuseoSans-Bold.eot?#iefix') format("embedded-opentype"), url('MuseoSans-Bold.woff2') format("woff2"), url('MuseoSans-Bold.woff') format("woff"), url('MuseoSans-Bold.ttf') format("truetype"), url('MuseoSans-Bold.svg#MuseoSans-Bold') format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url('SourceSansPro-SemiBold.eot');
  src: url('SourceSansPro-SemiBold.eot?#iefix') format("embedded-opentype"), url('SourceSansPro-SemiBold.woff2') format("woff2"), url('SourceSansPro-SemiBold.woff') format("woff"), url('SourceSansPro-SemiBold.ttf') format("truetype"), url('SourceSansPro-SemiBold.svg#SourceSansPro-SemiBold') format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url('SourceSansPro-Regular.eot');
  src: url('SourceSansPro-Regular.eot?#iefix') format("embedded-opentype"), url('SourceSansPro-Regular.woff2') format("woff2"), url('SourceSansPro-Regular.woff') format("woff"), url('SourceSansPro-Regular.ttf') format("truetype"), url('SourceSansPro-Regular.svg#SourceSansPro-Regular') format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url('SourceSansPro-Bold.eot');
  src: local(""), url('SourceSansPro-Bold.eot?#iefix') format("embedded-opentype"), url('SourceSansPro-Bold.woff2') format("woff2"), url('SourceSansPro-Bold.woff') format("woff"), url('SourceSansPro-Bold.ttf') format("truetype"), url('SourceSansPro-Bold.svg#SourceSansPro') format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('open-sans-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(""), url('open-sans-v18-latin-regular.eot?#iefix') format("embedded-opentype"), url('open-sans-v18-latin-regular.woff2') format("woff2"), url('open-sans-v18-latin-regular.woff') format("woff"), url('open-sans-v18-latin-regular.ttf') format("truetype"), url('open-sans-v18-latin-regular.svg#OpenSans') format("svg"); /* Legacy iOS */
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('open-sans-v18-latin-600.eot'); /* IE9 Compat Modes */
  src: local(""), url('open-sans-v18-latin-600.eot?#iefix') format("embedded-opentype"), url('open-sans-v18-latin-600.woff2') format("woff2"), url('open-sans-v18-latin-600.woff') format("woff"), url('open-sans-v18-latin-600.ttf') format("truetype"), url('open-sans-v18-latin-600.svg#OpenSans') format("svg"); /* Legacy iOS */
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('open-sans-v18-latin-700.eot'); /* IE9 Compat Modes */
  src: local(""), url('open-sans-v18-latin-700.eot?#iefix') format("embedded-opentype"), url('open-sans-v18-latin-700.woff2') format("woff2"), url('open-sans-v18-latin-700.woff') format("woff"), url('open-sans-v18-latin-700.ttf') format("truetype"), url('open-sans-v18-latin-700.svg#OpenSans') format("svg"); /* Legacy iOS */
}
@font-face {
  font-family: "smileyface";
  src: url('smileyface-regularitalic-webfont.eot');
  src: url('smileyface-regularitalic-webfont.eot?#iefix') format("embedded-opentype"), url('smileyface-regularitalic-webfont.woff2') format("woff2"), url('smileyface-regularitalic-webfont.woff') format("woff"), url('smileyface-regularitalic-webfont.ttf') format("truetype"), url('smileyface-regularitalic-webfont.svg#smiley_faceitalic') format("svg");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "smileyface";
  src: url('smileyface-regular-webfont.eot');
  src: url('smileyface-regular-webfont.eot?#iefix') format("embedded-opentype"), url('smileyface-regular-webfont.woff2') format("woff2"), url('smileyface-regular-webfont.woff') format("woff"), url('smileyface-regular-webfont.ttf') format("truetype"), url('smileyface-regular-webfont.svg#smiley_faceregular') format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "smileyface";
  src: url('smileyface-mediumitalic-webfont.eot');
  src: url('smileyface-mediumitalic-webfont.eot?#iefix') format("embedded-opentype"), url('smileyface-mediumitalic-webfont.woff2') format("woff2"), url('smileyface-mediumitalic-webfont.woff') format("woff"), url('smileyface-mediumitalic-webfont.ttf') format("truetype"), url('smileyface-mediumitalic-webfont.svg#smiley_facemedium_italic') format("svg");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "smileyface";
  src: url('smileyface-lightitalic-webfont.eot');
  src: url('smileyface-lightitalic-webfont.eot?#iefix') format("embedded-opentype"), url('smileyface-lightitalic-webfont.woff2') format("woff2"), url('smileyface-lightitalic-webfont.woff') format("woff"), url('smileyface-lightitalic-webfont.ttf') format("truetype"), url('smileyface-lightitalic-webfont.svg#smiley_facelight_italic') format("svg");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "smileyface";
  src: url('smileyface-medium-webfont.eot');
  src: url('smileyface-medium-webfont.eot?#iefix') format("embedded-opentype"), url('smileyface-medium-webfont.woff2') format("woff2"), url('smileyface-medium-webfont.woff') format("woff"), url('smileyface-medium-webfont.ttf') format("truetype"), url('smileyface-medium-webfont.svg#smiley_facemedium') format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "smileyface";
  src: url('smileyface-light-webfont.eot');
  src: url('smileyface-light-webfont.eot?#iefix') format("embedded-opentype"), url('smileyface-light-webfont.woff2') format("woff2"), url('smileyface-light-webfont.woff') format("woff"), url('smileyface-light-webfont.ttf') format("truetype"), url('smileyface-light-webfont.svg#smiley_facelight') format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "smileyface";
  src: url('smileyface-bolditalic-webfont.eot');
  src: url('smileyface-bolditalic-webfont.eot?#iefix') format("embedded-opentype"), url('smileyface-bolditalic-webfont.woff2') format("woff2"), url('smileyface-bolditalic-webfont.woff') format("woff"), url('smileyface-bolditalic-webfont.ttf') format("truetype"), url('smileyface-bolditalic-webfont.svg#smiley_facebold_italic') format("svg");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "smileyface";
  src: url('smileyface-bold-webfont.eot');
  src: url('smileyface-bold-webfont.eot?#iefix') format("embedded-opentype"), url('smileyface-bold-webfont.woff2') format("woff2"), url('smileyface-bold-webfont.woff') format("woff"), url('smileyface-bold-webfont.ttf') format("truetype"), url('smileyface-bold-webfont.svg#smiley_facebold') format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "smileyface_headline";
  src: url('smileyface-headline-webfont.eot');
  src: url('smileyface-headline-webfont.eot?#iefix') format("embedded-opentype"), url('smileyface-headline-webfont.woff2') format("woff2"), url('smileyface-headline-webfont.woff') format("woff"), url('smileyface-headline-webfont.ttf') format("truetype"), url('smileyface-headline-webfont.svg#smiley_faceheadline') format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('inter-v3-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(""), url('inter-v3-latin-regular.eot?#iefix') format("embedded-opentype"), url('inter-v3-latin-regular.woff2') format("woff2"), url('inter-v3-latin-regular.woff') format("woff"), url('inter-v3-latin-regular.ttf') format("truetype"), url('inter-v3-latin-regular.svg#Inter') format("svg"); /* Legacy iOS */
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('inter-v3-latin-700.eot'); /* IE9 Compat Modes */
  src: local(""), url('inter-v3-latin-700.eot?#iefix') format("embedded-opentype"), url('inter-v3-latin-700.woff2') format("woff2"), url('inter-v3-latin-700.woff') format("woff"), url('inter-v3-latin-700.ttf') format("truetype"), url('inter-v3-latin-700.svg#Inter') format("svg"); /* Legacy iOS */
}
.is-hidden {
  display: none;
}

.is-visible {
  display: block;
}

.is-invisible {
  visibility: hidden;
}

.margin--none {
  margin: 0 !important;
}

.padding--none {
  padding: 0 !important;
}

.fit-parent {
  min-height: 100%;
  min-width: 100%;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.d-block {
  display: block;
}

.align--start {
  align-items: flex-start;
  align-content: flex-start;
}
.align--center {
  align-items: center;
  align-content: center;
}
.align--end {
  align-items: flex-end;
  align-content: flex-end;
}
.align--space-between {
  align-items: flex-start;
  align-content: space-between;
}
.align--space-around {
  align-items: flex-start;
  align-content: space-around;
}
.align--stretch {
  align-items: stretch;
  align-content: stretch;
}

.justify--start {
  justify-content: flex-start;
}
.justify--center {
  justify-content: center;
}
.justify--end {
  justify-content: flex-end;
}
.justify--space-between {
  justify-content: space-between;
}
.justify--space-around {
  justify-content: space-around;
}

.text--center {
  text-align: center;
}
.text--left {
  text-align: left;
}
.text--right {
  text-align: right;
}
.text--ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.sr-only--focusable:active, .sr-only--focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

:export {
  icons: contact-us, more-info, arrow-down, arrow-left, arrow-right, arrow-up, close, delivery, faq, hamburger, satisfaction, tick, plan, calendar, generic-appliance, disposal, installation, download, large-cross, large-tick, protection, repair, search, my-account, basket, payment-direct-debit, facebook, twitter, instagram, linkedin, alert, direct-debit-slim, lock, plus, minus, question-mark, eye, eye-blocked;
}

@font-face {
  font-family: "icomoon";
  src: url('icons.ttf?c3zd62') format("truetype"), url('icons.woff?c3zd62') format("woff"), url('icons.svg?c3zd62#icomoon') format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.icon {
  /* import !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--icon-size);
}
.icon--xxs {
  font-size: var(--icon-size-xxs);
}
.icon--xs {
  font-size: var(--icon-size-xs);
}
.icon--sm {
  font-size: var(--icon-size-sm);
}
.icon--md {
  font-size: var(--icon-size-md);
}
.icon--lg {
  font-size: var(--icon-size-lg);
}
.icon--xl {
  font-size: var(--icon-size-xl);
}

.icon-contact-us:before {
  content: "\e910";
}

.icon-more-info:before {
  content: "\e900";
}

.icon-arrow-down:before {
  content: "\e906";
}

.icon-arrow-left:before {
  content: "\e907";
}

.icon-arrow-right:before {
  content: "\e908";
}

.icon-arrow-up:before {
  content: "\e909";
}

.icon-close:before, .icon-error-circle:before {
  content: "\e90a";
}

.icon-delivery:before {
  content: "\e90b";
}

.icon-faq:before {
  content: "\e90c";
}

.icon-hamburger:before {
  content: "\e90d";
}

.icon-satisfaction:before {
  content: "\e90e";
}

.icon-tick:before, .icon-tick-circle:before {
  content: "\e90f";
}

.icon-plan:before {
  content: "\e971";
}

.icon-calendar:before {
  content: "\e972";
}

.icon-generic-appliance:before {
  content: "\e911";
}

.icon-disposal:before {
  content: "\e912";
}

.icon-installation:before {
  content: "\e913";
}

.icon-download:before {
  content: "\e973";
}

.icon-large-cross:before {
  content: "\e974";
}

.icon-large-tick:before {
  content: "\e975";
}

.icon-protection:before {
  content: "\e979";
}

.icon-repair:before {
  content: "\e97a";
}

.icon-search:before {
  content: "\e97b";
}

.icon-my-account:before {
  content: "\e97c";
}

.icon-basket:before {
  content: "\e97d";
}

.icon-payment-direct-debit:before {
  content: "\e970";
}

.icon-facebook:before {
  content: "\e97e";
}

.icon-twitter:before {
  content: "\e97f";
}

.icon-instagram:before {
  content: "\e981";
}

.icon-linkedin:before {
  content: "\e982";
}

.icon-alert:before {
  content: "\e914";
}

.icon-direct-debit-slim:before {
  content: "\e915";
}

.icon-lock:before {
  content: "\e916";
}

.icon-plus:before {
  content: "\e918";
}

.icon-minus:before {
  content: "\e919";
}

.icon-question-mark:before {
  content: "\e91a";
}

.icon-eye:before {
  content: "\e91b";
}

.icon-eye-blocked:before {
  content: "\e91c";
}

.icon-unavailable .path1:before {
  content: "\e901";
  color: var(--neutral-800);
}

.icon-unavailable .path2:before {
  content: "\e902";
  margin-left: -1em;
  color: var(--primary-contrast);
}

.icon-unavailable .path3:before {
  content: "\e903";
  margin-left: -1em;
  color: var(--primary-contrast);
}

.icon-info .path1:before {
  content: "\e904";
  color: var(--neutral-800);
}

.icon-info .path2:before {
  content: "\e905";
  margin-left: -1em;
  color: var(--primary-contrast);
}

.icon-more-info-fill .path1:before {
  content: "\e976";
  color: var(--primary-500);
}

.icon-more-info-fill .path2:before {
  content: "\e977";
  margin-left: -1em;
  color: var(--primary-contrast);
}

.icon-more-info-fill .path3:before {
  content: "\e978";
  margin-left: -1em;
  color: var(--primary-contrast);
}

/**
 * Box mixin is used to style an element as a "box like" input field - i.e. input, select, textarea etc.
 * Anything with a border that wants to be consistent
 * Adds Borders, Padding, Shadow, Constrains width - all dependent on theme variables
 */
/**
 * Use with box mixin to adjust to show focused style
 */
/**
 * Use with box mixin to adjust to show valid style
 */
/**
 * Use with box mixin to adjust to show invalid style
 */
/**
 * Use with box mixin to adjust to support a trigger being shown
 * It adds additional padding to make room for an absolutely positioned trigger.
 * Should be used on an element within an element using box-wrapper,
 * and the trigger mixin should be used on the trigger element itself
 */
/**
 * Use with box mixin to automatically add valid and invalid states based on angular forms automatic classes:
 *  - ng-touched
 *  - ng-valid
 *  - ng-invalid
 *
 * Should be added to the form control element
 * (usually :host{} on your component when implementing control value accessor)
 * $selector argument allows you to pass in the child selector for the actual component you want styles applied to
 * (i.e. the one you have added box mixin to)
 */
/**
 * Used to wrap around fields to allow triggers and validation icons to be positioned
 */
/**
 * Use on input fields and selects to combine box mixin, with focus state and placeholder pseudo element styles
 */
/**
 * Used to style icon to be used as a trigger (e.g. search, clear or down arrow)
 * Place inside an element with box-wrapper()
 * Combine with an element using box--with-trigger() to position correctly
 */
/**
 * Standard input text (i.e. input field or select)
 */
/**
 * Placeholder text used on input fields (can also be used on selects with custom implementation to emulate placeholder)
 */
/**
 * Field label
 */
/**
 * Hint text to appear next to the field
 */
/**
 * Error message text
 */
/**
 * Base mixin for validation icon (tick/cross top/right of fields)
 */
/**
 * Use with validation-icon mixin to show valid state
 */
/**
 * Use with validation-icon mixin to show invalid state
 */
/**
 * Card of tooltip in expanded state
 */
/**
 * Icon of tooltip to be shown next to field label
 */
/**
 * Radio field, no specific markup needed - use on standard <input type="radio"/>
 */
/**
 * This is a reusable select style that relies on a particular dom tree:
 *   <div class="select-wrapper">
 *     <select>...</select>
 *     <i class="icon-arrow-down"></i>
 *   </div>
 */
/**
 * This is a reusable checkbox style that relies on a particular dom tree:
 *   <${label-selector}>       <!-- i.e. <label> -->
 *     <${input-selector}/>    <!-- i.e. <input type="checkbox"/> -->
 *     <{$box-selector}>
 *       <{$icon-selector|svg-selector}/>
 *     </{$box-selector}>
 *     <{$text-selector}/>
 *   </${label-selector}>
 *
 * svg for use with this mixin:
 *    <svg width="12px" height="9px" viewBox="0 0 12 9">
 *      <polyline points="1 5 4 8 11 1"></polyline>
 *    </svg>
 *
 * box must follow input element
 *
 * "text" element can either be first or last child (before or after input for left/right align)
 *  - todo: this could be a modifier and use order
 *
 * defaults to square pass always matching selector e.g. ".checkbox" to $round-modifier to make always round
 */
/**
 * This mixin is for styling just a checkbox input - it should be applied directly to the element:
 * i.e.:
 *     input {
 *       @include checkboxfield-input(
 *         $size-large-modifier: '.checkbox_input--large',
 *         $round-modifier: '.checkbox_input--round',
 *         $invalid-modifier: '.checkbox_input--invalid',
 *         $disabled-modifier: '.checkbox_input--readonly, .checkbox_input--disabled',
 *       );
 *     }
 */
/**
 * These are some new utility classes where basic form fields are needed
 *
 * Note that these do not add validation icons or states at present
 *
 * All the files in these classes should not rely on a particular DOM structure
 * and be applied directly to individual elements.
 *
 * Please use components from the form builder library where more complete form elements are needed
 *
 */
.dg-form__label {
  color: var(--text-color--supporting);
  font-family: var(--typog-body-bold-family);
  font-weight: var(--typog-body-bold-weight);
  font-style: var(--typog-body-bold-style);
  font-size: var(--typog-body-bold-size);
  line-height: var(--typog-body-bold-line-height);
  letter-spacing: var(--typog-body-bold-letter-spacing);
  -webkit-text-decoration: var(--typog-body-bold-text-decoration);
          text-decoration: var(--typog-body-bold-text-decoration);
  text-transform: var(--typog-body-bold-text-transform);
}

.dg-form__field--text {
  height: auto;
  width: 100%;
  max-width: var(--max-input-width, auto);
  background: var(--input-background-color);
  border-radius: var(--input-border-radius);
  border: solid var(--input-border-width) var(--input-border-color);
  padding: var(--input-padding);
  box-shadow: var(--input-shadow);
  transition: all var(--ease-transition);
  color: var(--text-color);
  font-family: var(--typog-body-bold-family);
  font-weight: var(--typog-body-bold-weight);
  font-style: var(--typog-body-bold-style);
  font-size: var(--typog-body-bold-size);
  line-height: var(--typog-body-bold-line-height);
  letter-spacing: var(--typog-body-bold-letter-spacing);
  -webkit-text-decoration: var(--typog-body-bold-text-decoration);
          text-decoration: var(--typog-body-bold-text-decoration);
  text-transform: var(--typog-body-bold-text-transform);
  /* placeholders */
}
.dg-form__field--text:focus {
  outline-width: 2px;
  outline-color: var(--input-border-color--focus);
}
.dg-form__field--text::placeholder {
  opacity: 1; /* Firefox */
  color: var(--input-placeholder-color);
  font-family: var(--typog-body-regular-family);
  font-weight: var(--typog-body-regular-weight);
  font-style: var(--typog-body-regular-style);
  font-size: var(--typog-body-regular-size);
  line-height: var(--typog-body-regular-line-height);
  letter-spacing: var(--typog-body-regular-letter-spacing);
  -webkit-text-decoration: var(--typog-body-regular-text-decoration);
          text-decoration: var(--typog-body-regular-text-decoration);
  text-transform: var(--typog-body-regular-text-transform);
}
.dg-form__field--text::-webkit-input-placeholder {
  color: var(--input-placeholder-color);
  font-family: var(--typog-body-regular-family);
  font-weight: var(--typog-body-regular-weight);
  font-style: var(--typog-body-regular-style);
  font-size: var(--typog-body-regular-size);
  line-height: var(--typog-body-regular-line-height);
  letter-spacing: var(--typog-body-regular-letter-spacing);
  -webkit-text-decoration: var(--typog-body-regular-text-decoration);
          text-decoration: var(--typog-body-regular-text-decoration);
  text-transform: var(--typog-body-regular-text-transform);
}
.dg-form__field--text:-ms-input-placeholder {
  color: var(--input-placeholder-color);
  font-family: var(--typog-body-regular-family);
  font-weight: var(--typog-body-regular-weight);
  font-style: var(--typog-body-regular-style);
  font-size: var(--typog-body-regular-size);
  line-height: var(--typog-body-regular-line-height);
  letter-spacing: var(--typog-body-regular-letter-spacing);
  text-decoration: var(--typog-body-regular-text-decoration);
  text-transform: var(--typog-body-regular-text-transform);
}

.dg-form__field--radio {
  --radio-size: 24px;
  --radio-dot-size: calc(var(--radio-size) / 2);
  --border: var(--neutral-600);
  --dot-transition: 0.3s ease;
  --dot-opacity: 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: var(--radio-size);
  width: var(--radio-size);
  min-width: var(--radio-size);
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: var(--border-width) solid var(--border);
  background: var(--user-input-selected-contrast-color);
  border-radius: 50%;
}
.dg-form__field--radio:after {
  content: "";
  display: flex;
  transition: transform var(--dot-transition), opacity var(--dot-opacity, 0.2s);
  width: var(--radio-dot-size);
  height: var(--radio-dot-size);
  border-radius: 50%;
  background: var(--user-input-selected-color);
  opacity: 0;
  transform: scale(0);
}
.dg-form__field--radio:checked {
  border-color: var(--user-input-selected-color);
}
.dg-form__field--radio:checked:after {
  --dot-opacity: 0.3s ease;
  --dot-transition: 0.6s cubic-bezier(0.2, 0.85, 0.32, 1.2);
  opacity: 1;
  transform: scale(1);
}
.dg-form__field--radio:disabled {
  border-color: var(--border);
  opacity: 0.9;
}
.dg-form__field--radio:disabled:after {
  background-color: var(--neutral-600);
}
.dg-form__field--radio:disabled, .dg-form__field--radio:disabled + label {
  cursor: not-allowed;
}
.dg-form__field--radio:focus {
  border-color: var(--user-input-selected-color);
  outline: 3px solid transparent; /* For Windows high contrast mode. */
}

/*
* Static: background-color | border-color | color | text-decoration
* Hover (optional): background-color | border-color | color | text-decoration
* Active (optional): background-color | border-color | color | text-decoration
* Focus (optional):  border-color | text-decoration
* Usage
    @include _btn(
      var(--primary-contrast),
      var(--primary-500),
      var(--primary-500),
      var(--primary-contrast),
      var(--primary-700),
      var(--primary-700)
    );
*/
.btn {
  display: flex;
  font-family: var(--typog-button-family);
  font-weight: var(--typog-button-weight);
  font-style: var(--typog-button-style);
  font-size: var(--typog-button-size);
  line-height: var(--typog-button-line-height);
  letter-spacing: var(--typog-button-letter-spacing);
  -webkit-text-decoration: var(--typog-button-text-decoration);
          text-decoration: var(--typog-button-text-decoration);
  text-transform: var(--typog-button-text-transform);
  align-items: center;
  justify-content: var(--btn-justify-content);
  text-align: var(--btn-text-align);
  border-radius: var(--btn-border-radius);
  border-style: solid;
  transition: var(--btn-transition);
  cursor: pointer;
  height: var(--btn-height);
  width: var(--btn-width, 100%);
  min-width: var(--btn-min-width-sm);
  max-width: var(--btn-max-width-sm);
  padding: var(--btn-padding);
  border-width: var(--btn-border-width);
}
@media only screen and (min-width: 576px) {
  .btn {
    min-width: var(--btn-min-width);
    max-width: var(--btn-max-width);
  }
}
.btn--small {
  height: 34px;
  max-width: 190px;
  padding: 5px 20px;
}
@media only screen and (min-width: 576px) {
  .btn--small {
    height: 44px;
  }
}
.btn--disabled, .btn:disabled {
  opacity: var(--btn-disabled-opacity);
}
.btn:disabled {
  cursor: default;
}
.btn:hover:not(.btn--disabled):not(:disabled) {
  box-shadow: var(--btn-hover-shadow);
}
.btn span.label + .icon {
  margin-left: var(--btn-icon-spacing);
}
.btn .icon + span.label {
  margin-left: var(--btn-icon-spacing);
}
.btn:active:not(:disabled) {
  transform: scale(var(--btn-active-scale));
}
.btn.btn--primary {
  color: var(--btn-primary-color);
  background-color: var(--btn-primary-background-color);
  border-color: var(--btn-primary-border-color);
  -webkit-text-decoration: var(--btn-primary-text-decoration);
          text-decoration: var(--btn-primary-text-decoration);
  --btn-text-decoration: var(--btn-primary-text-decoration);
}
.btn.btn--primary:hover:not(.btn--disabled):not(:disabled) {
  background-color: var(--btn-primary-hover-background-color);
  border-color: var(--btn-primary-hover-border-color);
  -webkit-text-decoration: var(--btn-primary-hover-text-decoration);
          text-decoration: var(--btn-primary-hover-text-decoration);
  --btn-text-decoration: var(--btn-primary-hover-text-decoration);
}
.btn.btn--primary.btn--selected, .btn.btn--primary:active {
  outline: none;
  color: var(--btn-primary-active-color);
  background-color: var(--btn-primary-active-background-color);
  border-color: var(--btn-primary-active-border-color);
  -webkit-text-decoration: var(--btn-primary-active-text-decoration);
          text-decoration: var(--btn-primary-active-text-decoration);
  --btn-text-decoration: var(--btn-primary-active-text-decoration);
}
.btn.btn--primary:focus:not(:focus-visible) {
  outline: none;
}
.btn.btn--primary:focus-visible:not(:active) {
  outline-color: var(--btn-primary-focus-border-color);
  -webkit-text-decoration: var(--btn-primary-focus-text-decoration);
          text-decoration: var(--btn-primary-focus-text-decoration);
  --btn-text-decoration: var(--btn-primary-focus-text-decoration);
}
.btn.btn--primary .btn--disabled, .btn.btn--primary:disabled {
  opacity: var(--btn-disabled-opacity);
  cursor: default;
}
.btn.btn--primary-inverted {
  color: var(--btn-primary-inverted-color);
  background-color: var(--btn-primary-inverted-background-color);
  border-color: var(--btn-primary-inverted-border-color);
  -webkit-text-decoration: var(--btn-primary-inverted-text-decoration);
          text-decoration: var(--btn-primary-inverted-text-decoration);
  --btn-text-decoration: var(--btn-primary-inverted-text-decoration);
}
.btn.btn--primary-inverted:hover:not(.btn.btn--primary-inverted.btn--disabled):not(:disabled) {
  color: var(--btn-primary-inverted-hover-color);
  background-color: var(--btn-primary-inverted-hover-background-color);
  border-color: var(--btn-primary-inverted-hover-border-color);
  -webkit-text-decoration: var(--btn-primary-inverted-hover-text-decoration);
          text-decoration: var(--btn-primary-inverted-hover-text-decoration);
  --btn-text-decoration: var(--btn-primary-inverted-hover-text-decoration);
}
.btn.btn--primary-inverted.btn--selected, .btn.btn--primary-inverted:active {
  outline: none;
  color: var(--btn-primary-inverted-active-color);
  background-color: var(--btn-primary-inverted-active-background-color);
  border-color: var(--btn-primary-inverted-active-border-color);
  -webkit-text-decoration: var(--btn-primary-inverted-active-text-decoration);
          text-decoration: var(--btn-primary-inverted-active-text-decoration);
  --btn-text-decoration: var(--btn-primary-inverted-active-text-decoration);
}
.btn.btn--primary-inverted:focus:not(:focus-visible) {
  outline: none;
}
.btn.btn--primary-inverted:focus-visible:not(:active) {
  outline-color: var(--btn-primary-inverted-focus-border-color);
  -webkit-text-decoration: var(--btn-primary-inverted-focus-text-decoration);
          text-decoration: var(--btn-primary-inverted-focus-text-decoration);
  --btn-text-decoration: var(--btn-primary-inverted-focus-text-decoration);
}
.btn.btn--primary-inverted.btn--disabled, .btn.btn--primary-inverted:disabled {
  opacity: var(--btn-disabled-opacity);
  cursor: default;
}
.btn.btn--secondary {
  color: var(--btn-secondary-color);
  background-color: var(--btn-secondary-background-color);
  border-color: var(--btn-secondary-border-color);
  -webkit-text-decoration: var(--btn-secondary-text-decoration);
          text-decoration: var(--btn-secondary-text-decoration);
  --btn-text-decoration: var(--btn-secondary-text-decoration);
}
.btn.btn--secondary:hover:not(.btn.btn--secondary.btn--disabled):not(:disabled) {
  color: var(--btn-secondary-hover-color);
  background-color: var(--btn-secondary-hover-background-color);
  border-color: var(--btn-secondary-hover-border-color);
  -webkit-text-decoration: var(--btn-secondary-hover-text-decoration);
          text-decoration: var(--btn-secondary-hover-text-decoration);
  --btn-text-decoration: var(--btn-secondary-hover-text-decoration);
}
.btn.btn--secondary.btn--selected, .btn.btn--secondary:active {
  outline: none;
  color: var(--btn-secondary-active-color);
  background-color: var(--btn-secondary-active-background-color);
  border-color: var(--btn-secondary-active-border-color);
  -webkit-text-decoration: var(--btn-secondary-active-text-decoration);
          text-decoration: var(--btn-secondary-active-text-decoration);
  --btn-text-decoration: var(--btn-secondary-active-text-decoration);
}
.btn.btn--secondary:focus:not(:focus-visible) {
  outline: none;
}
.btn.btn--secondary:focus-visible:not(:active) {
  outline-color: var(--btn-secondary-focus-border-color);
  -webkit-text-decoration: var(--btn-secondary-focus-text-decoration);
          text-decoration: var(--btn-secondary-focus-text-decoration);
  --btn-text-decoration: var(--btn-secondary-focus-text-decoration);
}
.btn.btn--secondary.btn--disabled, .btn.btn--secondary:disabled {
  opacity: var(--btn-disabled-opacity);
  cursor: default;
}
.btn.btn--secondary-inverted {
  color: var(--btn-secondary-inverted-color);
  background-color: var(--btn-secondary-inverted-background-color);
  border-color: var(--btn-secondary-inverted-border-color);
  -webkit-text-decoration: var(--btn-secondary-inverted-text-decoration);
          text-decoration: var(--btn-secondary-inverted-text-decoration);
  --btn-text-decoration: var(--btn-secondary-inverted-text-decoration);
}
.btn.btn--secondary-inverted:hover:not(.btn.btn--secondary-inverted.btn--disabled):not(:disabled) {
  color: var(--btn-secondary-inverted-hover-color);
  background-color: var(--btn-secondary-inverted-hover-background-color);
  border-color: var(--btn-secondary-inverted-hover-border-color);
  -webkit-text-decoration: var(--btn-secondary-inverted-hover-text-decoration);
          text-decoration: var(--btn-secondary-inverted-hover-text-decoration);
  --btn-text-decoration: var(--btn-secondary-inverted-hover-text-decoration);
}
.btn.btn--secondary-inverted.btn--selected, .btn.btn--secondary-inverted:active {
  outline: none;
  color: var(--btn-secondary-inverted-active-color);
  background-color: var(--btn-secondary-inverted-active-background-color);
  border-color: var(--btn-secondary-inverted-active-border-color);
  -webkit-text-decoration: var(--btn-secondary-inverted-active-text-decoration);
          text-decoration: var(--btn-secondary-inverted-active-text-decoration);
  --btn-text-decoration: var(--btn-secondary-inverted-active-text-decoration);
}
.btn.btn--secondary-inverted:focus:not(:focus-visible) {
  outline: none;
}
.btn.btn--secondary-inverted:focus-visible:not(:active) {
  outline-color: var(--btn-secondary-inverted-focus-border-color);
  -webkit-text-decoration: var(--btn-secondary-inverted-focus-text-decoration);
          text-decoration: var(--btn-secondary-inverted-focus-text-decoration);
  --btn-text-decoration: var(--btn-secondary-inverted-focus-text-decoration);
}
.btn.btn--secondary-inverted.btn--disabled, .btn.btn--secondary-inverted:disabled {
  opacity: var(--btn-disabled-opacity);
  cursor: default;
}
.btn.btn--tertiary {
  color: var(--btn-tertiary-color);
  background-color: var(--btn-tertiary-background-color);
  border-color: var(--btn-tertiary-border-color);
  -webkit-text-decoration: var(--btn-tertiary-text-decoration);
          text-decoration: var(--btn-tertiary-text-decoration);
  --btn-text-decoration: var(--btn-tertiary-text-decoration);
}
.btn.btn--tertiary:hover:not(.btn.btn--tertiary.btn--disabled):not(:disabled) {
  color: var(--btn-tertiary-hover-color);
  background-color: var(--btn-tertiary-hover-background-color);
  border-color: var(--btn-tertiary-hover-border-color);
  -webkit-text-decoration: var(--btn-tertiary-hover-text-decoration);
          text-decoration: var(--btn-tertiary-hover-text-decoration);
  --btn-text-decoration: var(--btn-tertiary-hover-text-decoration);
}
.btn.btn--tertiary.btn--selected, .btn.btn--tertiary:active {
  outline: none;
  color: var(--btn-tertiary-active-color);
  background-color: var(--btn-tertiary-active-background-color);
  border-color: var(--btn-tertiary-active-border-color);
  -webkit-text-decoration: var(--btn-tertiary-active-text-decoration);
          text-decoration: var(--btn-tertiary-active-text-decoration);
  --btn-text-decoration: var(--btn-tertiary-active-text-decoration);
}
.btn.btn--tertiary:focus:not(:focus-visible) {
  outline: none;
}
.btn.btn--tertiary:focus-visible:not(:active) {
  outline-color: var(--btn-tertiary-focus-border-color);
  -webkit-text-decoration: var(--btn-tertiary-focus-text-decoration);
          text-decoration: var(--btn-tertiary-focus-text-decoration);
  --btn-text-decoration: var(--btn-tertiary-focus-text-decoration);
}
.btn.btn--tertiary.btn--disabled, .btn.btn--tertiary:disabled {
  opacity: var(--btn-disabled-opacity);
  cursor: default;
}
.btn.btn--toggle {
  color: var(--btn-toggle-color);
  background-color: var(--btn-toggle-background-color);
  border-color: var(--btn-toggle-border-color);
  -webkit-text-decoration: var(--btn-toggle-text-decoration);
          text-decoration: var(--btn-toggle-text-decoration);
  --btn-text-decoration: var(--btn-toggle-text-decoration);
}
.btn.btn--toggle:hover:not(.btn.btn--toggle.btn--disabled):not(:disabled) {
  color: var(--btn-toggle-hover-color);
  background-color: var(--btn-toggle-hover-background-color);
  border-color: var(--btn-toggle-hover-border-color);
  -webkit-text-decoration: var(--btn-toggle-hover-text-decoration);
          text-decoration: var(--btn-toggle-hover-text-decoration);
  --btn-text-decoration: var(--btn-toggle-hover-text-decoration);
}
.btn.btn--toggle.btn--selected, .btn.btn--toggle:active {
  outline: none;
  color: var(--btn-toggle-active-color);
  background-color: var(--btn-toggle-active-background-color);
  border-color: var(--btn-toggle-active-border-color);
  -webkit-text-decoration: var(--btn-toggle-active-text-decoration);
          text-decoration: var(--btn-toggle-active-text-decoration);
  --btn-text-decoration: var(--btn-toggle-active-text-decoration);
}
.btn.btn--toggle:focus:not(:focus-visible) {
  outline: none;
}
.btn.btn--toggle:focus-visible:not(:active) {
  outline-color: var(--btn-toggle-focus-border-color);
  -webkit-text-decoration: var(--btn-toggle-focus-text-decoration);
          text-decoration: var(--btn-toggle-focus-text-decoration);
  --btn-text-decoration: var(--btn-toggle-focus-text-decoration);
}
.btn.btn--toggle.btn--disabled, .btn.btn--toggle:disabled {
  opacity: var(--btn-disabled-opacity);
  cursor: default;
}

a.btn {
  display: inline-flex;
}

.form-panel--border {
  border: var(--border-width) solid var(--panel-border-color);
  background: var(--panel-bg);
  border-radius: var(--border-radius-sm);
  padding: calc(var(--spacing-unit) * 8);
}
.form-panel__title {
  margin-bottom: calc(var(--spacing-unit) * 6);
  font-family: var(--typog-h2-family);
  font-weight: var(--typog-h2-weight);
  font-style: var(--typog-h2-style);
  font-size: var(--typog-h2-size);
  line-height: var(--typog-h2-line-height);
  letter-spacing: var(--typog-h2-letter-spacing);
  -webkit-text-decoration: var(--typog-h2-text-decoration);
          text-decoration: var(--typog-h2-text-decoration);
  text-transform: var(--typog-h2-text-transform);
}

.content-box--highlighted {
  padding: 20px;
  border: var(--border-width) solid var(--section-border-color);
  border-radius: var(--box-border-radius);
  background: var(--section-bg);
  color: var(--section-text);
}
@media only screen and (min-width: 768px) {
  .content-box--highlighted {
    padding: 30px 40px;
  }
}
.content-box--highlighted.highlighted {
  border-top: solid var(--card-highlight-width) var(--accent);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

body,
*[class*=theme-] {
  background: var(--theme-background);
  color: var(--theme-body);
}

h1,
h2 {
  color: var(--theme-heading);
}

.theme-background-alternative {
  --theme-background: var(--theme-background-alternative-background);
  --theme-body: var(--theme-background-alternative-body);
  --theme-heading: var(--theme-background-alternative-heading);
  --theme-icon: var(--theme-background-alternative-icon);
  --theme-emphasis: var(--theme-background-alternative-emphasis);
  --theme-border: var(--theme-background-alternative-border);
}

.theme-background {
  --theme-background: var(--theme-background-background);
  --theme-body: var(--theme-background-body);
  --theme-heading: var(--theme-background-heading);
  --theme-icon: var(--theme-background-icon);
  --theme-emphasis: var(--theme-background-emphasis);
  --theme-border: var(--theme-background-border);
}

.theme-branded-primary {
  --theme-background: var(--theme-branded-primary-background);
  --theme-body: var(--theme-branded-primary-body);
  --theme-heading: var(--theme-branded-primary-heading);
  --theme-icon: var(--theme-branded-primary-icon);
  --theme-emphasis: var(--theme-branded-primary-emphasis);
  --theme-border: var(--theme-branded-primary-border);
}

.theme-branded-secondary {
  --theme-background: var(--theme-branded-secondary-background);
  --theme-body: var(--theme-branded-secondary-body);
  --theme-heading: var(--theme-branded-secondary-heading);
  --theme-icon: var(--theme-branded-secondary-icon);
  --theme-emphasis: var(--theme-branded-secondary-emphasis);
  --theme-border: var(--theme-branded-secondary-border);
}

.theme-branded-decoration-color-1 {
  --theme-background: var(--theme-branded-decoration-color-1-background);
  --theme-body: var(--theme-branded-decoration-color-1-body);
  --theme-heading: var(--theme-branded-decoration-color-1-heading);
  --theme-icon: var(--theme-branded-decoration-color-1-icon);
  --theme-emphasis: var(--theme-branded-decoration-color-1-emphasis);
  --theme-border: var(--theme-branded-decoration-color-1-border);
}

.theme-decoration-color-1-gradient {
  --theme-background: var(--theme-decoration-color-1-gradient-background);
  --theme-body: var(--theme-decoration-color-1-gradient-body);
  --theme-heading: var(--theme-decoration-color-1-gradient-heading);
  --theme-icon: var(--theme-decoration-color-1-gradient-icon);
  --theme-emphasis: var(--theme-decoration-color-1-gradient-emphasis);
  --theme-border: var(--theme-decoration-color-1-gradient-border);
}

.theme-decoration-color-1 {
  --theme-background: var(--theme-decoration-color-1-background);
  --theme-body: var(--theme-decoration-color-1-body);
  --theme-heading: var(--theme-decoration-color-1-heading);
  --theme-icon: var(--theme-decoration-color-1-icon);
  --theme-emphasis: var(--theme-decoration-color-1-emphasis);
  --theme-border: var(--theme-decoration-color-1-border);
}

.theme-decoration-color-1-light {
  --theme-background: var(--theme-decoration-color-1-light-background);
  --theme-body: var(--theme-decoration-color-1-light-body);
  --theme-heading: var(--theme-decoration-color-1-light-heading);
  --theme-icon: var(--theme-decoration-color-1-light-icon);
  --theme-emphasis: var(--theme-decoration-color-1-light-emphasis);
  --theme-border: var(--theme-decoration-color-1-light-border);
}

.theme-decoration-color-2-gradient {
  --theme-background: var(--theme-decoration-color-2-gradient-background);
  --theme-body: var(--theme-decoration-color-2-gradient-body);
  --theme-heading: var(--theme-decoration-color-2-gradient-heading);
  --theme-icon: var(--theme-decoration-color-2-gradient-icon);
  --theme-emphasis: var(--theme-decoration-color-2-gradient-emphasis);
  --theme-border: var(--theme-decoration-color-2-gradient-border);
}

.theme-decoration-color-3 {
  --theme-background: var(--theme-decoration-color-3-background);
  --theme-body: var(--theme-decoration-color-3-body);
  --theme-heading: var(--theme-decoration-color-3-heading);
  --theme-icon: var(--theme-decoration-color-3-icon);
  --theme-emphasis: var(--theme-decoration-color-3-emphasis);
  --theme-border: var(--theme-decoration-color-3-border);
}

.theme-decoration-color-3-alternative {
  --theme-background: var(--theme-decoration-color-3-alternative-background);
  --theme-body: var(--theme-decoration-color-3-alternative-body);
  --theme-heading: var(--theme-decoration-color-3-alternative-heading);
  --theme-icon: var(--theme-decoration-color-3-alternative-icon);
  --theme-emphasis: var(--theme-decoration-color-3-alternative-emphasis);
  --theme-border: var(--theme-decoration-color-3-alternative-border);
}

.theme-decoration-color-3-gradient {
  --theme-background: var(--theme-decoration-color-3-gradient-background);
  --theme-body: var(--theme-decoration-color-3-gradient-body);
  --theme-heading: var(--theme-decoration-color-3-gradient-heading);
  --theme-icon: var(--theme-decoration-color-3-gradient-icon);
  --theme-emphasis: var(--theme-decoration-color-3-gradient-emphasis);
  --theme-border: var(--theme-decoration-color-3-gradient-border);
}

.theme-decoration-color-4 {
  --theme-background: var(--theme-decoration-color-4-background);
  --theme-body: var(--theme-decoration-color-4-body);
  --theme-heading: var(--theme-decoration-color-4-heading);
  --theme-icon: var(--theme-decoration-color-4-icon);
  --theme-emphasis: var(--theme-decoration-color-4-emphasis);
  --theme-border: var(--theme-decoration-color-4-border);
}

.theme-decoration-color-4-gradient {
  --theme-background: var(--theme-decoration-color-4-gradient-background);
  --theme-body: var(--theme-decoration-color-4-gradient-body);
  --theme-heading: var(--theme-decoration-color-4-gradient-heading);
  --theme-icon: var(--theme-decoration-color-4-gradient-icon);
  --theme-emphasis: var(--theme-decoration-color-4-gradient-emphasis);
  --theme-border: var(--theme-decoration-color-4-gradient-border);
}

.theme-decoration-color-5 {
  --theme-background: var(--theme-decoration-color-5-background);
  --theme-body: var(--theme-decoration-color-5-body);
  --theme-heading: var(--theme-decoration-color-5-heading);
  --theme-icon: var(--theme-decoration-color-5-icon);
  --theme-emphasis: var(--theme-decoration-color-5-emphasis);
  --theme-border: var(--theme-decoration-color-5-border);
}

.theme-decoration-color-5-alternative {
  --theme-background: var(--theme-decoration-color-5-alternative-background);
  --theme-body: var(--theme-decoration-color-5-alternative-body);
  --theme-heading: var(--theme-decoration-color-5-alternative-heading);
  --theme-icon: var(--theme-decoration-color-5-alternative-icon);
  --theme-emphasis: var(--theme-decoration-color-5-alternative-emphasis);
  --theme-border: var(--theme-decoration-color-5-alternative-border);
}

.theme-dg-primary {
  --theme-background: var(--theme-dg-primary-background);
  --theme-body: var(--theme-dg-primary-body);
  --theme-heading: var(--theme-dg-primary-heading);
  --theme-icon: var(--theme-dg-primary-icon);
  --theme-emphasis: var(--theme-dg-primary-emphasis);
  --theme-border: var(--theme-dg-primary-border);
}

.theme-dg-primary-alternative {
  --theme-background: var(--theme-dg-primary-alternative-background);
  --theme-body: var(--theme-dg-primary-alternative-body);
  --theme-heading: var(--theme-dg-primary-alternative-heading);
  --theme-icon: var(--theme-dg-primary-alternative-icon);
  --theme-emphasis: var(--theme-dg-primary-alternative-emphasis);
  --theme-border: var(--theme-dg-primary-alternative-border);
}

.theme-dg-primary-alternative-light {
  --theme-background: var(--theme-dg-primary-alternative-light-background);
  --theme-body: var(--theme-dg-primary-alternative-light-body);
  --theme-heading: var(--theme-dg-primary-alternative-light-heading);
  --theme-icon: var(--theme-dg-primary-alternative-light-icon);
  --theme-emphasis: var(--theme-dg-primary-alternative-light-emphasis);
  --theme-border: var(--theme-dg-primary-alternative-light-border);
}

.theme-dg-primary-alternative-neutral {
  --theme-background: var(--theme-dg-primary-alternative-neutral-background);
  --theme-body: var(--theme-dg-primary-alternative-neutral-body);
  --theme-heading: var(--theme-dg-primary-alternative-neutral-heading);
  --theme-icon: var(--theme-dg-primary-alternative-neutral-icon);
  --theme-emphasis: var(--theme-dg-primary-alternative-neutral-emphasis);
  --theme-border: var(--theme-dg-primary-alternative-neutral-border);
}

.theme-dg-primary-light {
  --theme-background: var(--theme-dg-primary-light-background);
  --theme-body: var(--theme-dg-primary-light-body);
  --theme-heading: var(--theme-dg-primary-light-heading);
  --theme-icon: var(--theme-dg-primary-light-icon);
  --theme-emphasis: var(--theme-dg-primary-light-emphasis);
  --theme-border: var(--theme-dg-primary-light-border);
}

.theme-neutral {
  --theme-background: var(--theme-neutral-background);
  --theme-body: var(--theme-neutral-body);
  --theme-heading: var(--theme-neutral-heading);
  --theme-icon: var(--theme-neutral-icon);
  --theme-emphasis: var(--theme-neutral-emphasis);
  --theme-border: var(--theme-neutral-border);
}

.theme-neutral-alternative {
  --theme-background: var(--theme-neutral-alternative-background);
  --theme-body: var(--theme-neutral-alternative-body);
  --theme-heading: var(--theme-neutral-alternative-heading);
  --theme-icon: var(--theme-neutral-alternative-icon);
  --theme-emphasis: var(--theme-neutral-alternative-emphasis);
  --theme-border: var(--theme-neutral-alternative-border);
}

.theme-neutral-light {
  --theme-background: var(--theme-neutral-light-background);
  --theme-body: var(--theme-neutral-light-body);
  --theme-heading: var(--theme-neutral-light-heading);
  --theme-icon: var(--theme-neutral-light-icon);
  --theme-emphasis: var(--theme-neutral-light-emphasis);
  --theme-border: var(--theme-neutral-light-border);
}

.theme-neutral-light-alternative {
  --theme-background: var(--theme-neutral-light-alternative-background);
  --theme-body: var(--theme-neutral-light-alternative-body);
  --theme-heading: var(--theme-neutral-light-alternative-heading);
  --theme-icon: var(--theme-neutral-light-alternative-icon);
  --theme-emphasis: var(--theme-neutral-light-alternative-emphasis);
  --theme-border: var(--theme-neutral-light-alternative-border);
}

.theme-neutral-primary {
  --theme-background: var(--theme-neutral-primary-background);
  --theme-body: var(--theme-neutral-primary-body);
  --theme-heading: var(--theme-neutral-primary-heading);
  --theme-icon: var(--theme-neutral-primary-icon);
  --theme-emphasis: var(--theme-neutral-primary-emphasis);
  --theme-border: var(--theme-neutral-primary-border);
}

.theme-neutral-primary-light {
  --theme-background: var(--theme-neutral-primary-light-background);
  --theme-body: var(--theme-neutral-primary-light-body);
  --theme-heading: var(--theme-neutral-primary-light-heading);
  --theme-icon: var(--theme-neutral-primary-light-icon);
  --theme-emphasis: var(--theme-neutral-primary-light-emphasis);
  --theme-border: var(--theme-neutral-primary-light-border);
}

.theme-neutral-transparent {
  --theme-background: var(--theme-neutral-transparent-background);
  --theme-body: var(--theme-neutral-transparent-body);
  --theme-heading: var(--theme-neutral-transparent-heading);
  --theme-icon: var(--theme-neutral-transparent-icon);
  --theme-emphasis: var(--theme-neutral-transparent-emphasis);
  --theme-border: var(--theme-neutral-transparent-border);
}

.theme-neutral-transparent-alternative {
  --theme-background: var(--theme-neutral-transparent-alternative-background);
  --theme-body: var(--theme-neutral-transparent-alternative-body);
  --theme-heading: var(--theme-neutral-transparent-alternative-heading);
  --theme-icon: var(--theme-neutral-transparent-alternative-icon);
  --theme-emphasis: var(--theme-neutral-transparent-alternative-emphasis);
  --theme-border: var(--theme-neutral-transparent-alternative-border);
}

.theme-primary-alternative {
  --theme-background: var(--theme-primary-alternative-background);
  --theme-body: var(--theme-primary-alternative-body);
  --theme-heading: var(--theme-primary-alternative-heading);
  --theme-icon: var(--theme-primary-alternative-icon);
  --theme-emphasis: var(--theme-primary-alternative-emphasis);
  --theme-border: var(--theme-primary-alternative-border);
}

.theme-primary-gradient {
  --theme-background: var(--theme-primary-gradient-background);
  --theme-body: var(--theme-primary-gradient-body);
  --theme-heading: var(--theme-primary-gradient-heading);
  --theme-icon: var(--theme-primary-gradient-icon);
  --theme-emphasis: var(--theme-primary-gradient-emphasis);
  --theme-border: var(--theme-primary-gradient-border);
}

.theme-primary {
  --theme-background: var(--theme-primary-background);
  --theme-body: var(--theme-primary-body);
  --theme-heading: var(--theme-primary-heading);
  --theme-icon: var(--theme-primary-icon);
  --theme-emphasis: var(--theme-primary-emphasis);
  --theme-border: var(--theme-primary-border);
}

.theme-secondary-gradient {
  --theme-background: var(--theme-secondary-gradient-background);
  --theme-body: var(--theme-secondary-gradient-body);
  --theme-heading: var(--theme-secondary-gradient-heading);
  --theme-icon: var(--theme-secondary-gradient-icon);
  --theme-emphasis: var(--theme-secondary-gradient-emphasis);
  --theme-border: var(--theme-secondary-gradient-border);
}

.theme-promotion {
  --theme-background: var(--theme-promotion-background);
  --theme-body: var(--theme-promotion-body);
  --theme-heading: var(--theme-promotion-heading);
  --theme-icon: var(--theme-promotion-icon);
  --theme-emphasis: var(--theme-promotion-emphasis);
  --theme-border: var(--theme-promotion-border);
}

.theme-error {
  --theme-background: var(--theme-error-background);
  --theme-body: var(--theme-error-body);
  --theme-heading: var(--theme-error-heading);
  --theme-icon: var(--theme-error-icon);
  --theme-emphasis: var(--theme-error-emphasis);
  --theme-border: var(--theme-error-border);
}

.theme-error-alternative {
  --theme-background: var(--theme-error-alternative-background);
  --theme-body: var(--theme-error-alternative-body);
  --theme-heading: var(--theme-error-alternative-heading);
  --theme-icon: var(--theme-error-alternative-icon);
  --theme-emphasis: var(--theme-error-alternative-emphasis);
  --theme-border: var(--theme-error-alternative-border);
}

/**

  There are a lot of button variables here to support old, new and whitelabel styles

  Further alignment on appearance to reduce flexibility and make design system will reduce variables, and total CSS

  For example, the disabled state - recommended everyone uses opacity: 0.5 to show disabled state instead of grey
  this would remove the need for separate disabled vars

 */
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified - small screen variables fallback to large screen equivalent

   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog[-sm]-{style}-{property}

   e.g.:

    --typog-h4-family
    --typog-h4-weight
    --typog-h4-style
    --typog-h4-size
    --typog-h4-line-height
    --typog-h4-letter-spacing
    --typog-h4-text-decoration
    --typog-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
/**

  There are a lot of button variables here to support old, new and whitelabel styles

  Further alignment on appearance to reduce flexibility and make design system will reduce variables, and total CSS

  For example, the disabled state - recommended everyone uses opacity: 0.5 to show disabled state instead of grey
  this would remove the need for separate disabled vars

 */
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified - small screen variables fallback to large screen equivalent

   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog[-sm]-{style}-{property}

   e.g.:

    --typog-h4-family
    --typog-h4-weight
    --typog-h4-style
    --typog-h4-size
    --typog-h4-line-height
    --typog-h4-letter-spacing
    --typog-h4-text-decoration
    --typog-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
/**

  There are a lot of button variables here to support old, new and whitelabel styles

  Further alignment on appearance to reduce flexibility and make design system will reduce variables, and total CSS

  For example, the disabled state - recommended everyone uses opacity: 0.5 to show disabled state instead of grey
  this would remove the need for separate disabled vars

 */
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified - small screen variables fallback to large screen equivalent

   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog[-sm]-{style}-{property}

   e.g.:

    --typog-h4-family
    --typog-h4-weight
    --typog-h4-style
    --typog-h4-size
    --typog-h4-line-height
    --typog-h4-letter-spacing
    --typog-h4-text-decoration
    --typog-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
/**

  There are a lot of button variables here to support old, new and whitelabel styles

  Further alignment on appearance to reduce flexibility and make design system will reduce variables, and total CSS

  For example, the disabled state - recommended everyone uses opacity: 0.5 to show disabled state instead of grey
  this would remove the need for separate disabled vars

 */
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified - small screen variables fallback to large screen equivalent

   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog[-sm]-{style}-{property}

   e.g.:

    --typog-h4-family
    --typog-h4-weight
    --typog-h4-style
    --typog-h4-size
    --typog-h4-line-height
    --typog-h4-letter-spacing
    --typog-h4-text-decoration
    --typog-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
/**

  There are a lot of button variables here to support old, new and whitelabel styles

  Further alignment on appearance to reduce flexibility and make design system will reduce variables, and total CSS

  For example, the disabled state - recommended everyone uses opacity: 0.5 to show disabled state instead of grey
  this would remove the need for separate disabled vars

 */
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified - small screen variables fallback to large screen equivalent

   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog[-sm]-{style}-{property}

   e.g.:

    --typog-h4-family
    --typog-h4-weight
    --typog-h4-style
    --typog-h4-size
    --typog-h4-line-height
    --typog-h4-letter-spacing
    --typog-h4-text-decoration
    --typog-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
/**

  There are a lot of button variables here to support old, new and whitelabel styles

  Further alignment on appearance to reduce flexibility and make design system will reduce variables, and total CSS

  For example, the disabled state - recommended everyone uses opacity: 0.5 to show disabled state instead of grey
  this would remove the need for separate disabled vars

 */
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified - small screen variables fallback to large screen equivalent

   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog[-sm]-{style}-{property}

   e.g.:

    --typog-h4-family
    --typog-h4-weight
    --typog-h4-style
    --typog-h4-size
    --typog-h4-line-height
    --typog-h4-letter-spacing
    --typog-h4-text-decoration
    --typog-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
/**

  There are a lot of button variables here to support old, new and whitelabel styles

  Further alignment on appearance to reduce flexibility and make design system will reduce variables, and total CSS

  For example, the disabled state - recommended everyone uses opacity: 0.5 to show disabled state instead of grey
  this would remove the need for separate disabled vars

 */
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified - small screen variables fallback to large screen equivalent

   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog[-sm]-{style}-{property}

   e.g.:

    --typog-h4-family
    --typog-h4-weight
    --typog-h4-style
    --typog-h4-size
    --typog-h4-line-height
    --typog-h4-letter-spacing
    --typog-h4-text-decoration
    --typog-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
/**

  There are a lot of button variables here to support old, new and whitelabel styles

  Further alignment on appearance to reduce flexibility and make design system will reduce variables, and total CSS

  For example, the disabled state - recommended everyone uses opacity: 0.5 to show disabled state instead of grey
  this would remove the need for separate disabled vars

 */
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified - small screen variables fallback to large screen equivalent

   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog[-sm]-{style}-{property}

   e.g.:

    --typog-h4-family
    --typog-h4-weight
    --typog-h4-style
    --typog-h4-size
    --typog-h4-line-height
    --typog-h4-letter-spacing
    --typog-h4-text-decoration
    --typog-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
/**

  There are a lot of button variables here to support old, new and whitelabel styles

  Further alignment on appearance to reduce flexibility and make design system will reduce variables, and total CSS

  For example, the disabled state - recommended everyone uses opacity: 0.5 to show disabled state instead of grey
  this would remove the need for separate disabled vars

 */
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified - small screen variables fallback to large screen equivalent

   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog[-sm]-{style}-{property}

   e.g.:

    --typog-h4-family
    --typog-h4-weight
    --typog-h4-style
    --typog-h4-size
    --typog-h4-line-height
    --typog-h4-letter-spacing
    --typog-h4-text-decoration
    --typog-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
/**

  There are a lot of button variables here to support old, new and whitelabel styles

  Further alignment on appearance to reduce flexibility and make design system will reduce variables, and total CSS

  For example, the disabled state - recommended everyone uses opacity: 0.5 to show disabled state instead of grey
  this would remove the need for separate disabled vars

 */
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified - small screen variables fallback to large screen equivalent

   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog[-sm]-{style}-{property}

   e.g.:

    --typog-h4-family
    --typog-h4-weight
    --typog-h4-style
    --typog-h4-size
    --typog-h4-line-height
    --typog-h4-letter-spacing
    --typog-h4-text-decoration
    --typog-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
/**

  There are a lot of button variables here to support old, new and whitelabel styles

  Further alignment on appearance to reduce flexibility and make design system will reduce variables, and total CSS

  For example, the disabled state - recommended everyone uses opacity: 0.5 to show disabled state instead of grey
  this would remove the need for separate disabled vars

 */
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified - small screen variables fallback to large screen equivalent

   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog[-sm]-{style}-{property}

   e.g.:

    --typog-h4-family
    --typog-h4-weight
    --typog-h4-style
    --typog-h4-size
    --typog-h4-line-height
    --typog-h4-letter-spacing
    --typog-h4-text-decoration
    --typog-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
/**

  There are a lot of button variables here to support old, new and whitelabel styles

  Further alignment on appearance to reduce flexibility and make design system will reduce variables, and total CSS

  For example, the disabled state - recommended everyone uses opacity: 0.5 to show disabled state instead of grey
  this would remove the need for separate disabled vars

 */
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified - small screen variables fallback to large screen equivalent

   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog[-sm]-{style}-{property}

   e.g.:

    --typog-h4-family
    --typog-h4-weight
    --typog-h4-style
    --typog-h4-size
    --typog-h4-line-height
    --typog-h4-letter-spacing
    --typog-h4-text-decoration
    --typog-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
/**

  There are a lot of button variables here to support old, new and whitelabel styles

  Further alignment on appearance to reduce flexibility and make design system will reduce variables, and total CSS

  For example, the disabled state - recommended everyone uses opacity: 0.5 to show disabled state instead of grey
  this would remove the need for separate disabled vars

 */
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified - small screen variables fallback to large screen equivalent

   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog[-sm]-{style}-{property}

   e.g.:

    --typog-h4-family
    --typog-h4-weight
    --typog-h4-style
    --typog-h4-size
    --typog-h4-line-height
    --typog-h4-letter-spacing
    --typog-h4-text-decoration
    --typog-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
/**

  There are a lot of button variables here to support old, new and whitelabel styles

  Further alignment on appearance to reduce flexibility and make design system will reduce variables, and total CSS

  For example, the disabled state - recommended everyone uses opacity: 0.5 to show disabled state instead of grey
  this would remove the need for separate disabled vars

 */
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified - small screen variables fallback to large screen equivalent

   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog[-sm]-{style}-{property}

   e.g.:

    --typog-h4-family
    --typog-h4-weight
    --typog-h4-style
    --typog-h4-size
    --typog-h4-line-height
    --typog-h4-letter-spacing
    --typog-h4-text-decoration
    --typog-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
/**

  There are a lot of button variables here to support old, new and whitelabel styles

  Further alignment on appearance to reduce flexibility and make design system will reduce variables, and total CSS

  For example, the disabled state - recommended everyone uses opacity: 0.5 to show disabled state instead of grey
  this would remove the need for separate disabled vars

 */
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified - small screen variables fallback to large screen equivalent

   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog[-sm]-{style}-{property}

   e.g.:

    --typog-h4-family
    --typog-h4-weight
    --typog-h4-style
    --typog-h4-size
    --typog-h4-line-height
    --typog-h4-letter-spacing
    --typog-h4-text-decoration
    --typog-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
/**

  There are a lot of button variables here to support old, new and whitelabel styles

  Further alignment on appearance to reduce flexibility and make design system will reduce variables, and total CSS

  For example, the disabled state - recommended everyone uses opacity: 0.5 to show disabled state instead of grey
  this would remove the need for separate disabled vars

 */
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified - small screen variables fallback to large screen equivalent

   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog[-sm]-{style}-{property}

   e.g.:

    --typog-h4-family
    --typog-h4-weight
    --typog-h4-style
    --typog-h4-size
    --typog-h4-line-height
    --typog-h4-letter-spacing
    --typog-h4-text-decoration
    --typog-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
/**

  There are a lot of button variables here to support old, new and whitelabel styles

  Further alignment on appearance to reduce flexibility and make design system will reduce variables, and total CSS

  For example, the disabled state - recommended everyone uses opacity: 0.5 to show disabled state instead of grey
  this would remove the need for separate disabled vars

 */
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified - small screen variables fallback to large screen equivalent

   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog[-sm]-{style}-{property}

   e.g.:

    --typog-h4-family
    --typog-h4-weight
    --typog-h4-style
    --typog-h4-size
    --typog-h4-line-height
    --typog-h4-letter-spacing
    --typog-h4-text-decoration
    --typog-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
/**

  There are a lot of button variables here to support old, new and whitelabel styles

  Further alignment on appearance to reduce flexibility and make design system will reduce variables, and total CSS

  For example, the disabled state - recommended everyone uses opacity: 0.5 to show disabled state instead of grey
  this would remove the need for separate disabled vars

 */
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified - small screen variables fallback to large screen equivalent

   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog[-sm]-{style}-{property}

   e.g.:

    --typog-h4-family
    --typog-h4-weight
    --typog-h4-style
    --typog-h4-size
    --typog-h4-line-height
    --typog-h4-letter-spacing
    --typog-h4-text-decoration
    --typog-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
body {
  --transition-duration: 0.3s;
  --transition-ease: ease-in-out;
  --transition-curve: cubic-bezier(0.42, 0, 0, 1.07);
  --ease-transition: var(--transition-duration) var(--transition-ease);
  --curve-transition: var(--transition-duration) var(--transition-curve);
  --border-width: 1px;
  --border-radius-sm: 3px;
  --border-radius-md: 3px;
  --border-radius-lg: 3px;
  --box-border-radius: var(--border-radius-lg);
  /*
    note - no new shades should be added to the color palette - this should be enough
    the allowed values are:
      - primary/secondary/warning/error/success: 200-800 (in 100 increments only)
      - tone: 100-900 where 100/900 are white/black equivalents
        (may not be exactly white or black, but these are the lightest and darkest the tones ever go in the entire application)
   */
  --primary-800: #0168b4;
  --primary-700: #0071bb;
  --primary-600: #0675cd;
  --primary-500: #0a93d3;
  --primary-400: #b3dff1;
  --primary-300: #f0f9fc;
  --neutral-900: #000000;
  --neutral-800: #111111;
  --neutral-700: #333333;
  --neutral-600: #414141;
  --neutral-500: #afafaf;
  --neutral-400: #dddddd;
  --neutral-300: #dedede;
  --neutral-200: #f6f6f6;
  --neutral-100: #ffffff;
  --primary-contrast: #ffffff;
  --accent: #663399;
  --warn: #af2c2b;
  --accept: #228415;
  --package-discount: #3b8524;
  --secondary: #919191;
  --dg-primary-100: #f4faff;
  --dg-primary-200: #e5f3ff;
  --dg-primary-300: #c8e4ff;
  --dg-primary-400: #9bcfff;
  --dg-primary-500: #2e9aff;
  --dg-primary-600: #0d77db;
  --dg-primary-700: #0065c4;
  --dg-primary-800: #0054a3;
  --dg-primary-900: #00417d;
  --dg-primary: var(--dg-primary-600);
  --dg-primary-100-contrast: var(--neutral-900);
  --dg-primary-200-contrast: var(--neutral-900);
  --dg-primary-300-contrast: var(--neutral-900);
  --dg-primary-400-contrast: var(--neutral-900);
  --dg-primary-500-contrast: var(--neutral-900);
  --dg-primary-600-contrast: var(--neutral-100);
  --dg-primary-700-contrast: var(--neutral-100);
  --dg-primary-800-contrast: var(--neutral-100);
  --dg-primary-900-contrast: var(--neutral-100);
  --dg-primary-contrast: var(--dg-primary-600-contrast);
  --input-shadow: 0 0px 3px 0px var(--neutral-400);
  --input-padding: 14px;
  --input-error-icon-circle-size: 20px;
  --input-error-icon-size: 8px;
  --input-border-radius: var(--border-radius-sm);
  --max-input-width: auto;
  --input-border-width: var(--border-width);
  --input-border-width--valid: var(--input-border-width);
  --input-border-width--invalid: 2px;
  --input-trigger-size: 16px;
  --grid-max-width: 1200px;
  --grid-padding: 24px;
  --grid-column-gap: 12px;
  --icon-size: 14px;
  --icon-size-xxs: 8px;
  --icon-size-xs: 10px;
  --icon-size-sm: 14px;
  --icon-size-md: 16px;
  --icon-size-lg: 24px;
  --icon-size-xl: 30px;
  --card-shadow: 0px 0px 3px var(--neutral-400);
  --card-shadow--hover: 0px 0px 8px var(--neutral-500);
  --spacing-unit: 4px;
  --spacing-none: calc(var(--spacing-unit) * 0);
  --spacing-xxs: calc(var(--spacing-unit) * 2);
  --spacing-xs: calc(var(--spacing-unit) * 3);
  --spacing-sm: calc(var(--spacing-unit) * 4);
  --spacing-md: calc(var(--spacing-unit) * 6);
  --spacing-lg: calc(var(--spacing-unit) * 8);
  --spacing-xl: calc(var(--spacing-unit) * 12);
  --spacing-xxl: calc(var(--spacing-unit) * 16);
  --spacing-xxxl: calc(var(--spacing-unit) * 20);
  --btn-disabled-shadow: 0 0 3px var(--neutral-300);
  --btn-hover-shadow: none;
  --btn-disabled-opacity: 1;
  --btn-border-radius: var(--border-radius-md);
  --btn-border-width: 2px;
  --btn-transition: all var(--ease-transition);
  --btn-active-scale: 1;
  --btn-height: 56px;
  --btn-max-width: 280px;
  --btn-max-width-sm: auto;
  --btn-justify-content: center;
  --btn-text-align: center;
  --btn-icon-spacing: 10px;
  --btn-padding: 13px 20px;
  --btn-primary-color: var(--primary-interactive-contrast-color);
  --btn-primary-icon-color: var(--primary-interactive-contrast-color);
  --btn-primary-text-decoration: none;
  --btn-primary-background-color: var(--primary-interactive-color);
  --btn-primary-border-color: var(--primary-interactive-color);
  --btn-primary-hover-color: var(--primary-interactive-color--hover);
  --btn-primary-hover-text-decoration: none;
  --btn-primary-hover-background-color: var(--primary-interactive-color--hover);
  --btn-primary-hover-border-color: var(--primary-interactive-color--hover);
  --btn-primary-active-color: var(--btn-primary-color);
  --btn-primary-active-text-decoration: none;
  --btn-primary-active-background-color: var(--btn-primary-background-color);
  --btn-primary-active-border-color: var(--btn-primary-border-color);
  --btn-primary-focus-border-color: var(--btn-primary-hover-border-color);
  --btn-secondary-color: var(--primary-interactive-color);
  --btn-secondary-icon-color: var(--primary-interactive-color);
  --btn-primary-text-decoration: none;
  --btn-secondary-background-color: transparent;
  --btn-secondary-border-color: var(--primary-interactive-color);
  --btn-secondary-hover-color: var(--primary-interactive-color--hover);
  --btn-secondary-hover-text-decoration: none;
  --btn-secondary-hover-background-color: transparent;
  --btn-secondary-hover-border-color: var(--primary-interactive-color--hover);
  --btn-secondary-active-color: var(--btn-secondary-color);
  --btn-secondary-active-text-decoration: none;
  --btn-secondary-active-background-color: var(--btn-secondary-background-color);
  --btn-secondary-active-border-color: var(--btn-secondary-border-color);
  --btn-secondary-focus-border-color: var(--btn-secondary-hover-border-color);
  --btn-tertiary-color: var(--neutral-700);
  --btn-tertiary-icon-color: var(--neutral-700);
  --btn-tertiary-text-decoration: none;
  --btn-tertiary-background-color: var(--primary-interactive-contrast-color);
  --btn-tertiary-border-color: var(--neutral-400);
  --btn-tertiary-hover-color: var(--neutral-700);
  --btn-tertiary-hover-text-decoration: none;
  --btn-tertiary-hover-background-color: var(--primary-interactive-contrast-color);
  --btn-tertiary-hover-border-color: var(--neutral-600);
  --btn-tertiary-active-color: var(--btn-tertiary-color);
  --btn-tertiary-active-text-decoration: none;
  --btn-tertiary-active-background-color: var(--btn-tertiary-background-color);
  --btn-tertiary-active-border-color: var(--btn-tertiary-border-color);
  --btn-tertiary-focus-border-color: var(--btn-tertiary-hover-border-color);
  --btn-toggle-color: var(--neutral-700);
  --btn-toggle-icon-color: var(--neutral-700);
  --btn-primary-text-decoration: none;
  --btn-toggle-background-color: var(--primary-interactive-contrast-color);
  --btn-toggle-border-color: var(--primary-interactive-color);
  --btn-toggle-hover-color: var(--primary-interactive-contrast-color--hover);
  --btn-toggle-hover-text-decoration: none;
  --btn-toggle-hover-background-color: var(--primary-interactive-color--active);
  --btn-toggle-hover-border-color: var(--primary-interactive-color--active);
  --btn-toggle-active-color: var(--primary-interactive-contrast-color--active);
  --btn-toggle-active-text-decoration: none;
  --btn-toggle-active-background-color: var(--primary-interactive-color--active);
  --btn-toggle-active-border-color: var(--primary-interactive-color--active);
  --btn-toggle-focus-border-color: var(--btn-toggle-hover-border-color);
  --btn-success-color: var(--neutral-100);
  --btn-success-icon-color: var(--neutral-100);
  --btn-success-background-color: var(--success);
  --btn-success-border-color: var(--success);
  --btn-success-text-decoration: none;
  --btn-success-hover-color: var(--neutral-100);
  --btn-success-hover-background-color: var(--success-700);
  --btn-success-hover-border-color: var(--success-700);
  --btn-success-hover-text-decoration: none;
  --btn-success-focus-border-color: var(--btn-success-hover-border-color);
  --btn-success-inverted-color: var(--neutral-700);
  --btn-success-inverted-icon-color: var(--neutral-700);
  --btn-success-inverted-background-color: var(--neutral-100);
  --btn-success-inverted-border-color: var(--success);
  --btn-success-inverted-text-decoration: none;
  --btn-success-inverted-hover-color: var(--neutral-100);
  --btn-success-inverted-hover-background-color: var(--success);
  --btn-success-inverted-hover-border-color: var(--success);
  --btn-success-inverted-hover-text-decoration: none;
  --btn-success-inverted-focus-border-color: var(--btn-success-inverted-hover-border-color);
  --primary-contrast: var(--neutral-100);
  --warn: var(--error-600);
  --accept: var(--success-600);
  --error: var(--error-600);
  --warning: var(--warning-600);
  --success: var(--success-600);
  --error--contrast: var(--neutral-100);
  --warning--contrast: var(--neutral-100);
  --success--contrast: var(--neutral-100);
  --accent: var(--secondary-600);
  --attention: #ce3298;
  --page-bg: var(--neutral-100);
  --page-bg--alt: var(--neutral-200);
  --page-bg--contrast: var(--neutral-700);
  --page-bg--primary: var(--primary-700);
  --header: var(--neutral-100);
  --header--contrast: var(--text-color);
  --footer: var(--primary-300);
  --footer--contrast: var(--neutral-600);
  --footer-contrast-loud: var(--primary-700);
  --hero-color: var(--primary-800);
  --hero-contrast-color: var(--neutral-100);
  --separator: var(--neutral-400);
  --separator--secondary: var(--neutral-300);
  --form-card-bg: var(--neutral-300);
  --panel-bg: var(--neutral-100);
  --panel-border-color: var(--neutral-400);
  --panel-bg--highlight: var(--neutral-300);
  --panel-bg--highlight-subtle: var(--neutral-200);
  --info-card-bg: var(--primary-300);
  --info-card-text: var(--text-color);
  --card-highlight-width: 6px;
  --section-bg: var(--page-bg);
  --section-text: var(--neutral-600);
  --section-border-color: var(--neutral-400);
  --stand-out-bg: var(--neutral-200);
  --stand-out-bg-border: var(--neutral-400);
  --border-color--interactive: var(--neutral-600);
  --primary-interactive-color: var(--primary-500);
  --primary-interactive-color--hover: var(--primary-700);
  --primary-interactive-color--active: var(--primary-700);
  --primary-interactive-contrast-color: var(--neutral-100);
  --primary-interactive-contrast-color--hover: var(--neutral-100);
  --primary-interactive-contrast-color--active: var(--neutral-100);
  --secondary-interactive-color: var(--secondary-500);
  --secondary-interactive-color--hover: var(--secondary-700);
  --secondary-interactive-color--active: var(--secondary-700);
  --secondary-interactive-contrast-color: var(--neutral-100);
  --secondary-interactive-contrast-color--hover: var(--neutral-100);
  --secondary-interactive-contrast-color--active: var(--neutral-100);
  --heading-color: var(--text-color);
  --heading--highlight-color: var(--primary-800);
  --user-input-selected-color: var(--success-700);
  --user-input-selected-contrast-color: var(--neutral-100);
  --text-color: var(--neutral-700);
  --text-color--supporting: var(--neutral-700);
  --text-color--unimportant: var(--neutral-500);
  --text-color--placeholder: var(--neutral-600);
  --text-color--highlight: var(--primary-700);
  --placeholder-bg: var(--neutral-400);
  --input-background-color: var(--primary-contrast);
  --input-trigger-color: var(--neutral-600);
  --input-border-color: var(--neutral-700);
  --input-border-color--focus: var(--primary-500);
  --input-text-color: var(--neutral-700);
  --input-placeholder-color: var(--text-color--placeholder);
  --typeahead-highlight-color: var(--primary-interactive-color);
  --typeahead-highlight-color--active: var(--primary-interactive-color);
  --typeahead-bg-color: var(--neutral-300);
  --input-border-color--valid: var(--success);
  --decoration-color-1: var(--primary-500);
  --decoration-color-contrast-1: var(--neutral-100);
  --decoration-color-2: var(--secondary-500);
  --decoration-color-contrast-2: var(--neutral-100);
  --decoration-color-3: var(--primary-500);
  --decoration-color-contrast-3: var(--neutral-100);
  --decoration-color-4: var(--secondary-500);
  --decoration-color-contrast-4: var(--neutral-100);
  --decoration-color-1--text: var(--decoration-color-1);
  --decoration-color-2--text: var(--decoration-color-2);
  --decoration-color-3--text: var(--decoration-color-3);
  --decoration-color-4--text: var(--decoration-color-4);
  --component-box-background-color: var(--neutral-100);
  --promotion: #f27f20;
  --promotion-contrast: var(--neutral-100);
  --tone-900: var(--neutral-900);
  --tone-800: var(--neutral-800);
  --tone-700: var(--neutral-700);
  --tone-600: var(--neutral-600);
  --tone-500: var(--neutral-500);
  --tone-400: var(--neutral-400);
  --tone-300: var(--neutral-300);
  --tone-200: var(--neutral-200);
  --tone-100: var(--neutral-100);
  --theme-background: var(--page-bg);
  --theme-body: var(--text-color);
  --theme-heading: var(--text-color);
  --theme-emphasis: var(--primary-700);
  --theme-background-background: var(--page-bg);
  --theme-background-body: var(--text-color);
  --theme-background-heading: var(--text-color);
  --theme-background-emphasis: var(--primary-600);
  --theme-background-alternative-background: var(--page-bg--alt);
  --theme-background-alternative-body: var(--text-color);
  --theme-background-alternative-heading: var(--text-color);
  --theme-background-alternative-emphasis: var(--text-color);
  --theme-primary-background: var(--page-bg--primary);
  --theme-primary-body: var(--primary-contrast);
  --theme-primary-heading: var(--primary-contrast);
  --theme-primary-emphasis: var(--primary-contrast);
  --theme-primary-alternative-background: var(--info-card-bg);
  --theme-primary-alternative-body: var(--info-card-text);
  --theme-primary-alternative-heading: var(--info-card-text);
  --theme-primary-alternative-emphasis: var(--info-card-text);
  --theme-promotion-background: var(--promotion);
  --theme-promotion-body: var(--promotion-contrast);
  --theme-promotion-heading: var(--promotion-contrast);
  --theme-promotion-emphasis: var(--promotion-contrast);
  --theme-dg-primary-background: var(--dg-primary);
  --theme-dg-primary-body: var(--dg-primary-contrast);
  --theme-dg-primary-heading: var(--dg-primary-contrast);
  --theme-dg-primary-emphasis: var(--dg-primary-contrast);
  --theme-dg-primary-alternative-background: var(--dg-primary-200);
  --theme-dg-primary-alternative-body: var(--dg-primary-700);
  --theme-dg-primary-alternative-heading: var(--dg-primary-700);
  --theme-dg-primary-alternative-emphasis: var(--dg-primary-700);
  --theme-dg-primary-alternative-neutral-background: var(--dg-primary-100);
  --theme-dg-primary-alternative-neutral-body: var(--neutral-800);
  --theme-dg-primary-alternative-neutral-heading: var(--neutral-800);
  --theme-dg-primary-alternative-neutral-emphasis: var(--neutral-800);
  --typog-default-heading-family: Arial, sans-serif;
  --typog-default-body-family: Arial, sans-serif;
  --icon-size: 14px;
  --icon-size-xs: 10px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 28px;
  --transition-duration: 0.3s;
  --transition-ease: ease-in-out;
  --transition-curve: cubic-bezier(0.42, 0, 0, 1.07);
  --ease-transition: var(--transition-duration) var(--transition-ease);
  --curve-transition: var(--transition-duration) var(--transition-curve);
  --banner-min-height: 520px;
  --border-width: 1px;
  --border-radius-sm: 4px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;
  --border-color--interactive: var(--neutral-600);
  --accent: var(--secondary-600);
  --accept: var(--success);
  --decoration-color-1--text: var(--decoration-color-1);
  --decoration-color-2--text: var(--decoration-color-2);
  --decoration-color-3--text: var(--decoration-color-3);
  --decoration-color-4--text: var(--decoration-color-4);
  --decoration-color-contrast-1: var(--decoration-color-1-contrast);
  --decoration-color-contrast-2: var(--decoration-color-2-contrast);
  --decoration-color-contrast-3: var(--decoration-color-3-contrast);
  --decoration-color-contrast-4: var(--decoration-color-4-contrast);
  --error--contrast: var(--error-contrast);
  --tone-100: var(--neutral-100);
  --tone-200: var(--neutral-200);
  --tone-300: var(--neutral-300);
  --tone-400: var(--neutral-400);
  --tone-500: var(--neutral-500);
  --tone-600: var(--neutral-600);
  --tone-700: var(--neutral-700);
  --tone-800: var(--neutral-800);
  --tone-900: var(--neutral-900);
  --tone: var(--neutral);
  --success--contrast: var(--success-contrast);
  --warning--contrast: var(--warning-contrast);
  --card-highlight-width: 6px;
  --component-box-background-color: var(--neutral-100);
  --footer--contrast: var(--neutral-800-contrast);
  --footer-contrast-loud: var(--neutral-800-contrast);
  --footer: var(--neutral-800);
  --form-card-bg: var(--neutral-300);
  --header--contrast: var(--text-color);
  --header: var(--neutral-100);
  --heading--highlight-color: var(--primary-800);
  --heading-color: var(--text-color);
  --hero-color: var(--primary-800);
  --hero-contrast-color: var(--neutral-100);
  --info-card-bg: var(--primary-200);
  --info-card-text: var(--primary-200-contrast);
  --page-bg--alt: var(--neutral-200);
  --page-bg--contrast: var(--neutral-700);
  --page-bg--primary: var(--primary-700);
  --page-bg: var(--neutral-100);
  --panel-bg--highlight-subtle: var(--neutral-200);
  --panel-bg--highlight: var(--neutral-300);
  --panel-bg: var(--neutral-100);
  --panel-border-color: var(--neutral-400);
  --placeholder-bg: var(--neutral-400);
  --primary-interactive-color--active: var(--primary-800);
  --primary-interactive-color--hover: var(--primary-800);
  --primary-interactive-color: var(--primary-700);
  --primary-interactive-contrast-color--active: var(--neutral-100);
  --primary-interactive-contrast-color--hover: var(--neutral-100);
  --primary-interactive-contrast-color: var(--neutral-100);
  --promotion: var(--decoration-color-3-200);
  --promotion-contrast: var(--decoration-color-3-700);
  --secondary-interactive-color--active: var(--secondary-700);
  --secondary-interactive-color--hover: var(--secondary-700);
  --secondary-interactive-color: var(--secondary-500);
  --secondary-interactive-contrast-color--active: var(--neutral-100);
  --secondary-interactive-contrast-color--hover: var(--neutral-100);
  --secondary-interactive-contrast-color: var(--neutral-100);
  --section-bg: var(--page-bg);
  --section-border-color: var(--neutral-400);
  --section-text: var(--neutral-600);
  --separator--secondary: var(--neutral-300);
  --separator: var(--neutral-400);
  --stand-out-bg-border: var(--neutral-400);
  --stand-out-bg: var(--neutral-200);
  --text-color--highlight: var(--primary-700);
  --text-color--placeholder: var(--neutral-600);
  --text-color--supporting: var(--neutral-800);
  --text-color--unimportant: var(--neutral-700);
  --text-color: var(--neutral-800);
  --primary-100: #f4faff;
  --primary-200: #e5f3ff;
  --primary-300: #c8e4ff;
  --primary-400: #9bcfff;
  --primary-500: #2e9aff;
  --primary-600: #0d77db;
  --primary-700: #0065c4;
  --primary-800: #0054a3;
  --primary-900: #00417d;
  --primary: var(--primary-600);
  --primary-100-contrast: var(--neutral-900);
  --primary-200-contrast: var(--neutral-900);
  --primary-300-contrast: var(--neutral-900);
  --primary-400-contrast: var(--neutral-900);
  --primary-500-contrast: var(--neutral-900);
  --primary-600-contrast: var(--neutral-100);
  --primary-700-contrast: var(--neutral-100);
  --primary-800-contrast: var(--neutral-100);
  --primary-900-contrast: var(--neutral-100);
  --primary-contrast: var(--primary-600-contrast);
  --secondary-100: #fbfbfe;
  --secondary-200: #f2f2f7;
  --secondary-300: #d6c5ed;
  --secondary-400: #a58cc9;
  --secondary-500: #8a6ab9;
  --secondary-600: #6f4ca2;
  --secondary-700: #583c80;
  --secondary-800: #4c346f;
  --secondary-900: #3a2657;
  --secondary: var(--secondary-600);
  --secondary-100-contrast: var(--neutral-900);
  --secondary-200-contrast: var(--neutral-900);
  --secondary-300-contrast: var(--neutral-900);
  --secondary-400-contrast: var(--neutral-900);
  --secondary-500-contrast: var(--neutral-100);
  --secondary-600-contrast: var(--neutral-100);
  --secondary-700-contrast: var(--neutral-100);
  --secondary-800-contrast: var(--neutral-100);
  --secondary-900-contrast: var(--neutral-100);
  --secondary-contrast: var(--secondary-600-contrast);
  --success-100: #f3ffef;
  --success-200: #efffea;
  --success-300: #c1f2b2;
  --success-400: #92d17e;
  --success-500: #4fba2e;
  --success-600: #3b8524;
  --success-700: #32701e;
  --success-800: #204814;
  --success-900: #123109;
  --success: var(--success-600);
  --success-100-contrast: var(--neutral-900);
  --success-200-contrast: var(--neutral-900);
  --success-300-contrast: var(--neutral-900);
  --success-400-contrast: var(--neutral-900);
  --success-500-contrast: var(--neutral-900);
  --success-600-contrast: var(--neutral-100);
  --success-700-contrast: var(--neutral-100);
  --success-800-contrast: var(--neutral-100);
  --success-900-contrast: var(--neutral-100);
  --success-contrast: var(--success-600-contrast);
  --warning-100: #fff8ea;
  --warning-200: #fff1d6;
  --warning-300: #ffe7b8;
  --warning-400: #ffde9e;
  --warning-500: #ffd585;
  --warning-600: #ffc453;
  --warning-700: #ce7e07;
  --warning-800: #aa6804;
  --warning-900: #aa6804;
  --warning: var(--warning-600);
  --warning-100-contrast: var(--neutral-900);
  --warning-200-contrast: var(--neutral-900);
  --warning-300-contrast: var(--neutral-700);
  --warning-400-contrast: var(--neutral-700);
  --warning-500-contrast: var(--neutral-700);
  --warning-600-contrast: var(--neutral-700);
  --warning-700-contrast: var(--neutral-100);
  --warning-800-contrast: var(--neutral-100);
  --warning-900-contrast: var(--neutral-100);
  --warning-contrast: var(--warning-600-contrast);
  --error-100: #fffafa;
  --error-200: #ffebeb;
  --error-300: #fddcdc;
  --error-400: #f9b6b6;
  --error-500: #d55453;
  --error-600: #af2c2b;
  --error-700: #a12221;
  --error-800: #862120;
  --error-900: #862120;
  --error: var(--error-600);
  --error-100-contrast: var(--neutral-900);
  --error-200-contrast: var(--neutral-900);
  --error-300-contrast: var(--neutral-900);
  --error-400-contrast: var(--neutral-900);
  --error-500-contrast: var(--neutral-100);
  --error-600-contrast: var(--neutral-100);
  --error-700-contrast: var(--neutral-100);
  --error-800-contrast: var(--neutral-100);
  --error-900-contrast: var(--neutral-100);
  --error-contrast: var(--error-600-contrast);
  --focussed-state-600: #fcea60;
  --focussed-state-700: #f0d505;
  --neutral-100: #ffffff;
  --neutral-200: #f6f6fb;
  --neutral-300: #eeeef9;
  --neutral-400: #cdced8;
  --neutral-500: #898b9a;
  --neutral-600: #6e6f79;
  --neutral-700: #61626f;
  --neutral-800: #4f5061;
  --neutral-900: #0d0d0d;
  --neutral: var(--neutral-600);
  --neutral-100-contrast: var(--neutral-900);
  --neutral-200-contrast: var(--neutral-900);
  --neutral-300-contrast: var(--neutral-900);
  --neutral-400-contrast: var(--neutral-900);
  --neutral-500-contrast: var(--neutral-100);
  --neutral-600-contrast: var(--neutral-100);
  --neutral-700-contrast: var(--neutral-100);
  --neutral-800-contrast: var(--neutral-100);
  --neutral-900-contrast: var(--neutral-100);
  --neutral-contrast: var(--neutral-600-contrast);
  --decoration-color-1-100: #fbf9fd;
  --decoration-color-1-200: #f8f3ff;
  --decoration-color-1-300: #d9c3ff;
  --decoration-color-1-400: #b387ff;
  --decoration-color-1-500: #8b56e7;
  --decoration-color-1-600: #7546c5;
  --decoration-color-1-700: #5a28ad;
  --decoration-color-1-800: #3e0d97;
  --decoration-color-1-900: #32077e;
  --decoration-color-1: var(--decoration-color-1-600);
  --decoration-color-1-100-contrast: var(--neutral-900);
  --decoration-color-1-200-contrast: var(--neutral-900);
  --decoration-color-1-300-contrast: var(--neutral-900);
  --decoration-color-1-400-contrast: var(--neutral-900);
  --decoration-color-1-500-contrast: var(--neutral-100);
  --decoration-color-1-600-contrast: var(--neutral-100);
  --decoration-color-1-700-contrast: var(--neutral-800);
  --decoration-color-1-800-contrast: var(--neutral-100);
  --decoration-color-1-900-contrast: var(--neutral-100);
  --decoration-color-1-contrast: var(--decoration-color-1-600-contrast);
  --decoration-color-2-100: #fff8fd;
  --decoration-color-2-200: #faeff7;
  --decoration-color-2-300: #f891de;
  --decoration-color-2-400: #fc4cd0;
  --decoration-color-2-500: #e911b3;
  --decoration-color-2-600: #d60ba3;
  --decoration-color-2-700: #b7068a;
  --decoration-color-2-800: #9c0576;
  --decoration-color-2-900: #7b025d;
  --decoration-color-2: var(--decoration-color-2-600);
  --decoration-color-2-100-contrast: var(--neutral-900);
  --decoration-color-2-200-contrast: var(--neutral-900);
  --decoration-color-2-300-contrast: var(--neutral-900);
  --decoration-color-2-400-contrast: var(--neutral-900);
  --decoration-color-2-500-contrast: var(--neutral-100);
  --decoration-color-2-600-contrast: var(--neutral-100);
  --decoration-color-2-700-contrast: var(--neutral-100);
  --decoration-color-2-800-contrast: var(--neutral-100);
  --decoration-color-2-900-contrast: var(--neutral-100);
  --decoration-color-2-contrast: var(--decoration-color-2-600-contrast);
  --decoration-color-3-100: #f3ffef;
  --decoration-color-3-200: #e3ffdb;
  --decoration-color-3-300: #a1f488;
  --decoration-color-3-400: #4ad820;
  --decoration-color-3-500: #2fb806;
  --decoration-color-3-600: #26a401;
  --decoration-color-3-700: #228305;
  --decoration-color-3-800: #1a6803;
  --decoration-color-3-900: #124e01;
  --decoration-color-3: var(--decoration-color-3-600);
  --decoration-color-3-100-contrast: var(--neutral-900);
  --decoration-color-3-200-contrast: var(--neutral-900);
  --decoration-color-3-300-contrast: var(--neutral-900);
  --decoration-color-3-400-contrast: var(--neutral-900);
  --decoration-color-3-500-contrast: var(--neutral-100);
  --decoration-color-3-600-contrast: var(--neutral-100);
  --decoration-color-3-700-contrast: var(--neutral-100);
  --decoration-color-3-800-contrast: var(--neutral-100);
  --decoration-color-3-900-contrast: var(--neutral-100);
  --decoration-color-3-contrast: var(--decoration-color-3-600-contrast);
  --decoration-color-4-100: #f5feff;
  --decoration-color-4-200: #dbfaff;
  --decoration-color-4-300: #72ecff;
  --decoration-color-4-400: #0db1cb;
  --decoration-color-4-500: #209fb6;
  --decoration-color-4-600: #1292a9;
  --decoration-color-4-700: #09788c;
  --decoration-color-4-800: #045968;
  --decoration-color-4-900: #044652;
  --decoration-color-4: var(--decoration-color-4-600);
  --decoration-color-4-100-contrast: var(--neutral-900);
  --decoration-color-4-200-contrast: var(--neutral-800);
  --decoration-color-4-300-contrast: var(--neutral-900);
  --decoration-color-4-400-contrast: var(--neutral-900);
  --decoration-color-4-500-contrast: var(--neutral-100);
  --decoration-color-4-600-contrast: var(--neutral-100);
  --decoration-color-4-700-contrast: var(--neutral-100);
  --decoration-color-4-800-contrast: var(--neutral-100);
  --decoration-color-4-900-contrast: var(--neutral-100);
  --decoration-color-4-contrast: var(--decoration-color-4-600-contrast);
  --decoration-color-5-100: #ffffff;
  --decoration-color-5-200: #f2f2f7;
  --decoration-color-5-300: #d6c5ed;
  --decoration-color-5-400: #6f4ca2;
  --decoration-color-5-500: #583c80;
  --decoration-color-5-600: #4c346f;
  --decoration-color-5-700: #3a2657;
  --decoration-color-5-800: #32077e;
  --decoration-color-5: var(--decoration-color-5-600);
  --decoration-color-5-100-contrast: var(--neutral-900);
  --decoration-color-5-200-contrast: var(--neutral-900);
  --decoration-color-5-300-contrast: var(--neutral-900);
  --decoration-color-5-400-contrast: var(--neutral-900);
  --decoration-color-5-500-contrast: var(--neutral-100);
  --decoration-color-5-600-contrast: var(--neutral-100);
  --decoration-color-5-700-contrast: var(--neutral-100);
  --decoration-color-5-800-contrast: var(--neutral-100);
  --decoration-color-5-contrast: var(--decoration-color-5-600-contrast);
  --dg-primary-100: #f4faff;
  --dg-primary-200: #e5f3ff;
  --dg-primary-300: #c8e4ff;
  --dg-primary-400: #9bcfff;
  --dg-primary-500: #2e9aff;
  --dg-primary-600: #0d77db;
  --dg-primary-700: #0065c4;
  --dg-primary-800: #0054a3;
  --dg-primary-900: #00417d;
  --dg-primary: var(--dg-primary-600);
  --dg-primary-100-contrast: var(--neutral-900);
  --dg-primary-200-contrast: var(--neutral-900);
  --dg-primary-300-contrast: var(--neutral-900);
  --dg-primary-400-contrast: var(--neutral-900);
  --dg-primary-500-contrast: var(--neutral-900);
  --dg-primary-600-contrast: var(--neutral-100);
  --dg-primary-700-contrast: var(--neutral-100);
  --dg-primary-800-contrast: var(--neutral-100);
  --dg-primary-900-contrast: var(--neutral-100);
  --dg-primary-contrast: var(--dg-primary-600-contrast);
  --border-color--interactive: var(--neutral-600);
  --input-background-color: var(--primary-contrast);
  --input-border-color--focus: var(--input-border-color);
  --input-border-color--valid: var(--input-border-color);
  --input-border-color: var(--neutral-600);
  --input-border-radius: var(--border-radius-sm);
  --input-border-width--invalid: 2px;
  --input-border-width--valid: var(--input-border-width);
  --input-border-width: var(--border-width);
  --input-error-icon-circle-size: 20px;
  --input-error-icon-size: 8px;
  --input-padding: 17px;
  --input-placeholder-color: var(--text-color--placeholder);
  --input-shadow: none;
  --input-text-color: var(--neutral-700);
  --input-trigger-color: var(--neutral-600);
  --input-trigger-size: 16px;
  --max-input-width: 348px;
  --typeahead-bg-color: var(--neutral-300);
  --typeahead-highlight-color--active: var(--primary-interactive-color);
  --typeahead-highlight-color: var(--primary-interactive-color);
  --user-input-selected-color: var(--success-700);
  --user-input-selected-contrast-color: var(--neutral-100);
  --grid-max-width: 1200px;
  --grid-padding: 24px;
  --grid-column-gap: 12px;
  --card-shadow: 1px 4px 6px rgba(0, 0, 0, 0.25);
  --card-shadow--hover: 1px 4px 6px rgba(0, 0, 0, 0.25);
  --drop-shadow-level-1: 0px 6px 16px 0px rgba(0, 0, 0, 0.12);
  --drop-shadow-level-2: 0px 8px 12px 0px rgba(0, 0, 0, 0.16);
  --spacing-unit: 4px;
  --spacing-none: calc(var(--spacing-unit) * 0);
  --spacing-xxs: calc(var(--spacing-unit) * 2);
  --spacing-xs: calc(var(--spacing-unit) * 3);
  --spacing-sm: calc(var(--spacing-unit) * 4);
  --spacing-md: calc(var(--spacing-unit) * 6);
  --spacing-lg: calc(var(--spacing-unit) * 8);
  --spacing-xl: calc(var(--spacing-unit) * 12);
  --spacing-xxl: calc(var(--spacing-unit) * 16);
  --spacing-xxxl: calc(var(--spacing-unit) * 20);
  --theme-background: var(--neutral-100);
  --theme-body: var(--neutral-800);
  --theme-heading: var(--primary-600);
  --theme-emphasis: var(--primary-600);
  --theme-icon: currentColor;
  --theme-border: var(--primary-300);
  --theme-background-background: var(--neutral-100);
  --theme-background-body: var(--neutral-800);
  --theme-background-heading: var(--primary-600);
  --theme-background-emphasis: var(--primary-600);
  --theme-background-icon: var(--primary-600);
  --theme-background-border: var(--primary-300);
  --theme-background-alternative-background: var(--neutral-200);
  --theme-background-alternative-body: var(--neutral-800);
  --theme-background-alternative-heading: var(--primary-600);
  --theme-background-alternative-emphasis: var(--secondary-600);
  --theme-background-alternative-icon: var(--primary-600);
  --theme-background-alternative-border: var(--primary-300);
  --theme-branded-primary-background: var(--primary-500);
  --theme-branded-primary-body: var(--tone-900);
  --theme-branded-primary-heading: var(--tone-900);
  --theme-branded-primary-emphasis: var(--tone-900);
  --theme-branded-primary-icon: var(--primary-500);
  --theme-branded-primary-border: var(--primary-500);
  --theme-branded-secondary-background: var(--primary-500);
  --theme-branded-secondary-body: var(--tone-100);
  --theme-branded-secondary-heading: var(--tone-100);
  --theme-branded-secondary-emphasis: var(--tone-100);
  --theme-branded-secondary-icon: var(--primary-500);
  --theme-branded-secondary-border: var(--primary-500);
  --theme-branded-decoration-color-1-background: var(--decoration-color-1-400);
  --theme-branded-decoration-color-1-body: var(--decoration-color-1-900);
  --theme-branded-decoration-color-1-heading: var(--decoration-color-1-900);
  --theme-branded-decoration-color-1-emphasis: var(--decoration-color-1-900);
  --theme-branded-decoration-color-1-icon: var(--primary-500);
  --theme-branded-decoration-color-1-border: var(--decoration-color-1-400);
  --theme-decoration-color-1-background: var(--decoration-color-1-700);
  --theme-decoration-color-1-body: var(--decoration-color-1-contrast);
  --theme-decoration-color-1-heading: var(--decoration-color-1-contrast);
  --theme-decoration-color-1-emphasis: var(--decoration-color-1-contrast);
  --theme-decoration-color-1-icon: var(--decoration-color-1-contrast);
  --theme-decoration-color-1-border: var(--decoration-color-1-300-contrast);
  --theme-decoration-color-1-light-background: var(--decoration-color-1-200);
  --theme-decoration-color-1-light-body: var(--decoration-color-1-700-contrast);
  --theme-decoration-color-1-light-heading: var(--decoration-color-1-700);
  --theme-decoration-color-1-light-emphasis: var(--decoration-color-1-300);
  --theme-decoration-color-1-light-icon: var(--decoration-color-1-700);
  --theme-decoration-color-1-light-border: var(--decoration-color-1-300);
  --theme-decoration-color-1-gradient-background: radial-gradient(100% 314.82% at 0% 3.16%, var(--decoration-color-1-500) 0%, var(--decoration-color-1-700) 55.28%, var(--decoration-color-1-800) 100%);
  --theme-decoration-color-1-gradient-body: var(--decoration-color-1-contrast);
  --theme-decoration-color-1-gradient-heading: var(--decoration-color-1-contrast);
  --theme-decoration-color-1-gradient-emphasis: var(--decoration-color-1-contrast);
  --theme-decoration-color-1-gradient-icon: var(--decoration-color-1-contrast);
  --theme-decoration-color-1-gradient-border: var(--decoration-color-1-300);
  --theme-decoration-color-2-gradient-background: radial-gradient(100% 314.82% at 0% 3.16%, var(--decoration-color-2-500) 0%, var(--decoration-color-2-700) 55.28%, var(--decoration-color-2-900) 100%);
  --theme-decoration-color-2-gradient-body: var(--decoration-color-2-contrast);
  --theme-decoration-color-2-gradient-heading: var(--decoration-color-2-contrast);
  --theme-decoration-color-2-gradient-emphasis: var(--decoration-color-2-contrast);
  --theme-decoration-color-2-gradient-icon: var(--decoration-color-2-contrast);
  --theme-decoration-color-2-gradient-border: var(--decoration-color-2-300);
  --theme-decoration-color-3-background: var(--decoration-color-3-200);
  --theme-decoration-color-3-body: var(--neutral-800);
  --theme-decoration-color-3-heading: var(--decoration-color-3-800);
  --theme-decoration-color-3-emphasis: var(--decoration-color-3-800);
  --theme-decoration-color-3-icon: var(--decoration-color-3-700);
  --theme-decoration-color-3-border: var(--decoration-color-3-800);
  --theme-decoration-color-3-alternative-background: var(--decoration-color-3-100);
  --theme-decoration-color-3-alternative-body: var(--neutral-800);
  --theme-decoration-color-3-alternative-heading: var(--neutral-800);
  --theme-decoration-color-3-alternative-emphasis: var(--decoration-color-3-700);
  --theme-decoration-color-3-alternative-icon: var(--decoration-color-3-700);
  --theme-decoration-color-3-alternative-border: var(--success-300);
  --theme-decoration-color-3-gradient-background: radial-gradient(100% 314.82% at 0% 3.16%, var(--decoration-color-3-500) 0%, var(--decoration-color-3-700) 55.28%, var(--decoration-color-3-900) 100%);
  --theme-decoration-color-3-gradient-body: var(--decoration-color-3-contrast);
  --theme-decoration-color-3-gradient-heading: var(--decoration-color-3-contrast);
  --theme-decoration-color-3-gradient-emphasis: var(--decoration-color-3-contrast);
  --theme-decoration-color-3-gradient-icon: var(--decoration-color-3-contrast);
  --theme-decoration-color-3-gradient-border: var(--decoration-color-3-300);
  --theme-decoration-color-4-background: var(--decoration-color-4-200);
  --theme-decoration-color-4-body: var(--decoration-color-4-200-contrast);
  --theme-decoration-color-4-heading: var(--decoration-color-4-700);
  --theme-decoration-color-4-emphasis: var(--decoration-color-4-700);
  --theme-decoration-color-4-icon: var(--decoration-color-4-400);
  --theme-decoration-color-4-border: var(--decoration-color-4-300);
  --theme-decoration-color-4-gradient-background: radial-gradient(100% 314.82% at 0% 3.16%, var(--decoration-color-4-500) 0%, var(--decoration-color-4-700) 55.28%, var(--decoration-color-4-900) 100%);
  --theme-decoration-color-4-gradient-body: var(--decoration-color-4-contrast);
  --theme-decoration-color-4-gradient-heading: var(--decoration-color-4-contrast);
  --theme-decoration-color-4-gradient-emphasis: var(--decoration-color-4-contrast);
  --theme-decoration-color-4-gradient-icon: var(--decoration-color-4-contrast);
  --theme-decoration-color-4-gradient-border: var(--decoration-color-4-300);
  --theme-decoration-color-5-background: var(--decoration-color-5-200);
  --theme-decoration-color-5-body: var(--neutral-800);
  --theme-decoration-color-5-heading: var(--decoration-color-5-400);
  --theme-decoration-color-5-emphasis: var(--decoration-color-5-400);
  --theme-decoration-color-5-icon: var(--decoration-color-5-400);
  --theme-decoration-color-5-border: var(--decoration-color-5-400);
  --theme-decoration-color-5-alternative-background: var(--neutral-300);
  --theme-decoration-color-5-alternative-body: var(--neutral-900);
  --theme-decoration-color-5-alternative-heading: var(--neutral-800);
  --theme-decoration-color-5-alternative-emphasis: var(--decoration-color-5-400);
  --theme-decoration-color-5-alternative-icon: var(--decoration-color-5-400);
  --theme-decoration-color-5-alternative-border: var(--decoration-color-5-400);
  --theme-dg-primary-background: var(--dg-primary);
  --theme-dg-primary-body: var(--dg-primary-contrast);
  --theme-dg-primary-heading: var(--dg-primary-contrast);
  --theme-dg-primary-emphasis: var(--dg-primary-contrast);
  --theme-dg-primary-icon: var(--dg-primary-contrast);
  --theme-dg-primary-border: var(--dg-primary-contrast);
  --theme-dg-primary-light-background: var(--dg-primary-200);
  --theme-dg-primary-light-body: var(--neutral-800);
  --theme-dg-primary-light-heading: var(--neutral-800);
  --theme-dg-primary-light-emphasis: var(--neutral-800);
  --theme-dg-primary-light-icon: var(--dg-primary-700);
  --theme-dg-primary-light-border: var(--neutral-800);
  --theme-dg-primary-alternative-background: var(--dg-primary-200);
  --theme-dg-primary-alternative-body: var(--dg-primary-700);
  --theme-dg-primary-alternative-heading: var(--dg-primary-700);
  --theme-dg-primary-alternative-emphasis: var(--dg-primary-700);
  --theme-dg-primary-alternative-icon: var(--dg-primary-700);
  --theme-dg-primary-alternative-border: var(--dg-primary-800);
  --theme-dg-primary-alternative-neutral-background: var(--dg-primary-100);
  --theme-dg-primary-alternative-neutral-body: var(--neutral-800);
  --theme-dg-primary-alternative-neutral-heading: var(--neutral-800);
  --theme-dg-primary-alternative-neutral-emphasis: var(--neutral-800);
  --theme-dg-primary-alternative-neutral-icon: var(--neutral-800);
  --theme-dg-primary-alternative-neutral-border: var(--neutral-800);
  --theme-dg-primary-alternative-light-background: var(--dg-primary-100);
  --theme-dg-primary-alternative-light-body: var(--neutral-800);
  --theme-dg-primary-alternative-light-heading: var(--neutral-800);
  --theme-dg-primary-alternative-light-emphasis: var(--neutral-800);
  --theme-dg-primary-alternative-light-icon: var(--neutral-800);
  --theme-dg-primary-alternative-light-border: var(--dg-primary-300);
  --theme-error-background: var(--error-100);
  --theme-error-body: var(--neutral-800);
  --theme-error-heading: var(--error-700);
  --theme-error-emphasis: var(--error-300);
  --theme-error-icon: var(--error-700);
  --theme-error-border: var(--error-300);
  --theme-error-alternative-background: var(--error-200);
  --theme-error-alternative-body: var(--neutral-800);
  --theme-error-alternative-heading: var(--neutral-800);
  --theme-error-alternative-emphasis: var(--error-300);
  --theme-error-alternative-icon: var(--neutral-800);
  --theme-error-alternative-border: var(--error-400);
  --theme-neutral-background: var(--neutral-200);
  --theme-neutral-body: var(--neutral-800);
  --theme-neutral-heading: var(--primary-600);
  --theme-neutral-emphasis: var(--neutral-800);
  --theme-neutral-icon: var(--neutral-800);
  --theme-neutral-border: var(--neutral-300);
  --theme-neutral-alternative-background: var(--neutral-800);
  --theme-neutral-alternative-body: var(--neutral-100);
  --theme-neutral-alternative-heading: var(--neutral-100);
  --theme-neutral-alternative-emphasis: var(--neutral-100);
  --theme-neutral-alternative-icon: var(--neutral-100);
  --theme-neutral-alternative-border: var(--neutral-300);
  --theme-neutral-light-background: var(--secondary-100);
  --theme-neutral-light-body: var(--neutral-800);
  --theme-neutral-light-heading: var(--neutral-800);
  --theme-neutral-light-emphasis: var(--neutral-800);
  --theme-neutral-light-icon: var(--neutral-800);
  --theme-neutral-light-border: var(--neutral-300);
  --theme-neutral-light-alternative-background: var(--neutral-100);
  --theme-neutral-light-alternative-body: var(--neutral-800);
  --theme-neutral-light-alternative-heading: var(--neutral-800);
  --theme-neutral-light-alternative-emphasis: var(--neutral-800);
  --theme-neutral-light-alternative-icon: var(--neutral-800);
  --theme-neutral-light-alternative-border: var(--neutral-300);
  --theme-neutral-primary-background: var(--neutral-300);
  --theme-neutral-primary-body: var(--primary-700);
  --theme-neutral-primary-heading: var(--primary-700);
  --theme-neutral-primary-emphasis: var(--primary-700);
  --theme-neutral-primary-icon: var(--primary-700);
  --theme-neutral-primary-border: var(--primary-700);
  --theme-neutral-primary-light-background: var(--neutral-100);
  --theme-neutral-primary-light-body: var(--primary-700);
  --theme-neutral-primary-light-heading: var(--primary-700);
  --theme-neutral-primary-light-emphasis: var(--primary-700);
  --theme-neutral-primary-light-icon: var(--primary-700);
  --theme-neutral-primary-light-border: var(--primary-700);
  --theme-neutral-transparent-background: transparent;
  --theme-neutral-transparent-body: var(--neutral-800);
  --theme-neutral-transparent-heading: var(--neutral-800);
  --theme-neutral-transparent-emphasis: var(--neutral-700);
  --theme-neutral-transparent-icon: var(--neutral-800);
  --theme-neutral-transparent-border: var(--neutral-300);
  --theme-neutral-transparent-alternative-background: transparent;
  --theme-neutral-transparent-alternative-body: var(--neutral-800);
  --theme-neutral-transparent-alternative-heading: var(--neutral-800);
  --theme-neutral-transparent-alternative-emphasis: var(--neutral-700);
  --theme-neutral-transparent-alternative-icon: var(--neutral-800);
  --theme-neutral-transparent-alternative-border: var(--neutral-800);
  --theme-primary-background: var(--primary-700);
  --theme-primary-body: var(--primary-contrast);
  --theme-primary-heading: var(--primary-contrast);
  --theme-primary-emphasis: var(--primary-contrast);
  --theme-primary-icon: var(--primary-contrast);
  --theme-primary-border: var(--primary-300-contrast);
  --theme-primary-alternative-background: var(--primary-200);
  --theme-primary-alternative-body: var(--primary-200-contrast);
  --theme-primary-alternative-heading: var(--primary-200-contrast);
  --theme-primary-alternative-emphasis: var(--primary-200-contrast);
  --theme-primary-alternative-icon: var(--primary-200-contrast);
  --theme-primary-alternative-border: var(--primary-300-contrast);
  --theme-primary-gradient-background: radial-gradient(93.37% 294.27% at 0% 3.16%, var(--primary-500) 0%, var(--primary-700) 53.12%, var(--primary-800) 100%);
  --theme-primary-gradient-body: var(--primary-contrast);
  --theme-primary-gradient-heading: var(--primary-contrast);
  --theme-primary-gradient-emphasis: var(--primary-contrast);
  --theme-primary-gradient-icon: var(--primary-contrast);
  --theme-primary-gradient-border: var(--primary-300-contrast);
  --theme-promotion-background: var(--promotion);
  --theme-promotion-body: var(--promotion-contrast);
  --theme-promotion-heading: var(--promotion-contrast);
  --theme-promotion-emphasis: var(--promotion-contrast);
  --theme-promotion-icon: var(--promotion-contrast);
  --theme-promotion-border: var(--promotion-contrast);
  --theme-secondary-gradient-background: radial-gradient(100% 314.82% at 0% 3.16%, var(--secondary-500) 0%, var(--secondary-700) 55.28%, var(--secondary-800) 100%);
  --theme-secondary-gradient-body: var(--secondary-contrast);
  --theme-secondary-gradient-heading: var(--secondary-contrast);
  --theme-secondary-gradient-emphasis: var(--secondary-contrast);
  --theme-secondary-gradient-icon: var(--secondary-contrast);
  --theme-secondary-gradient-border: var(--secondary-300-contrast);
  --typog-default-heading-family: "Museo Sans", "Source Sans Pro", Arial, sans-serif;
  --typog-default-body-family: "Source Sans Pro", Arial, sans-serif;
  --typog-d1-family: var(--typog-default-heading-family);
  --typog-d1-letter-spacing: 0%;
  --typog-d1-line-height: 124%;
  --typog-d1-size: 36px;
  --typog-d1-text-decoration: none;
  --typog-d1-text-transform: none;
  --typog-d1-weight: 300;
  --typog-d2-family: var(--typog-default-heading-family);
  --typog-d2-letter-spacing: 0%;
  --typog-d2-line-height: 128%;
  --typog-d2-size: 28px;
  --typog-d2-text-decoration: none;
  --typog-d2-text-transform: none;
  --typog-d2-weight: 300;
  --typog-h1-family: var(--typog-default-heading-family);
  --typog-h1-letter-spacing: 0%;
  --typog-h1-line-height: 128%;
  --typog-h1-size: 28px;
  --typog-h1-text-decoration: none;
  --typog-h1-text-transform: none;
  --typog-h1-weight: 300;
  --typog-h2-family: var(--typog-default-heading-family);
  --typog-h2-letter-spacing: 0.2%;
  --typog-h2-line-height: 124%;
  --typog-h2-size: 24px;
  --typog-h2-text-decoration: none;
  --typog-h2-text-transform: none;
  --typog-h2-weight: 300;
  --typog-h3-family: var(--typog-default-heading-family);
  --typog-h3-letter-spacing: 0.5%;
  --typog-h3-line-height: 124%;
  --typog-h3-size: 20px;
  --typog-h3-text-decoration: none;
  --typog-h3-text-transform: none;
  --typog-h3-weight: 700;
  --typog-h4-family: var(--typog-default-heading-family);
  --typog-h4-letter-spacing: 0.5%;
  --typog-h4-line-height: 127%;
  --typog-h4-size: 18px;
  --typog-h4-text-decoration: none;
  --typog-h4-text-transform: none;
  --typog-h4-weight: 700;
  --typog-h5-family: var(--typog-default-heading-family);
  --typog-h5-letter-spacing: 0.5%;
  --typog-h5-line-height: 132%;
  --typog-h5-size: 16px;
  --typog-h5-text-decoration: none;
  --typog-h5-text-transform: none;
  --typog-h5-weight: 700;
  --typog-h6-family: var(--typog-default-heading-family);
  --typog-h6-letter-spacing: 5%;
  --typog-h6-line-height: 150%;
  --typog-h6-size: 16px;
  --typog-h6-text-decoration: none;
  --typog-h6-text-transform: uppercase;
  --typog-h6-weight: 500;
  --typog-body-bold-family: var(--typog-default-body-family);
  --typog-body-bold-letter-spacing: 0%;
  --typog-body-bold-line-height: 140%;
  --typog-body-bold-size: 16px;
  --typog-body-bold-text-decoration: none;
  --typog-body-bold-text-transform: none;
  --typog-body-bold-weight: 600;
  --typog-caption-bold-family: var(--typog-default-body-family);
  --typog-caption-bold-letter-spacing: 0%;
  --typog-caption-bold-line-height: 140%;
  --typog-caption-bold-size: 16px;
  --typog-caption-bold-text-decoration: none;
  --typog-caption-bold-text-transform: none;
  --typog-caption-bold-weight: 600;
  --typog-caption-regular-family: var(--typog-default-body-family);
  --typog-caption-regular-letter-spacing: 0%;
  --typog-caption-regular-line-height: 140%;
  --typog-caption-regular-size: 14px;
  --typog-caption-regular-text-decoration: none;
  --typog-caption-regular-text-transform: none;
  --typog-caption-regular-weight: 300;
  --typog-body-large-bold-family: var(--typog-default-body-family);
  --typog-body-large-bold-letter-spacing: 0%;
  --typog-body-large-bold-line-height: 140%;
  --typog-body-large-bold-size: 18px;
  --typog-body-large-bold-text-decoration: none;
  --typog-body-large-bold-text-transform: none;
  --typog-body-large-bold-weight: 600;
  --typog-body-large-link-family: var(--typog-default-body-family);
  --typog-body-large-link-letter-spacing: 0%;
  --typog-body-large-link-line-height: 140%;
  --typog-body-large-link-size: 18px;
  --typog-body-large-link-text-decoration: underline;
  --typog-body-large-link-text-transform: none;
  --typog-body-large-link-weight: 600;
  --typog-body-large-family: var(--typog-default-body-family);
  --typog-body-large-letter-spacing: 0%;
  --typog-body-large-line-height: 140%;
  --typog-body-large-size: 18px;
  --typog-body-large-text-decoration: none;
  --typog-body-large-text-transform: none;
  --typog-body-large-weight: 300;
  --typog-body-link-family: var(--typog-default-body-family);
  --typog-body-link-letter-spacing: 0%;
  --typog-body-link-line-height: 140%;
  --typog-body-link-size: 16px;
  --typog-body-link-text-decoration: underline;
  --typog-body-link-text-transform: none;
  --typog-body-link-weight: 600;
  --typog-body-regular-family: var(--typog-default-body-family);
  --typog-body-regular-letter-spacing: 0%;
  --typog-body-regular-line-height: 140%;
  --typog-body-regular-size: 16px;
  --typog-body-regular-text-decoration: none;
  --typog-body-regular-text-transform: none;
  --typog-body-regular-weight: 300;
  --typog-button-family: var(--typog-default-heading-family);
  --typog-button-letter-spacing: 0.18px;
  --typog-button-line-height: 22px;
  --typog-button-size: 18px;
  --typog-button-text-decoration: none;
  --typog-button-text-transform: none;
  --typog-button-weight: 600;
  --typog-fact-detail-family: var(--typog-default-heading-family);
  --typog-fact-detail-letter-spacing: 0%;
  --typog-fact-detail-line-height: 130%;
  --typog-fact-detail-size: 16px;
  --typog-fact-detail-text-decoration: none;
  --typog-fact-detail-text-transform: none;
  --typog-fact-detail-weight: 500;
  --typog-fact-family: var(--typog-default-heading-family);
  --typog-fact-letter-spacing: 0%;
  --typog-fact-line-height: 125%;
  --typog-fact-size: 28px;
  --typog-fact-text-decoration: none;
  --typog-fact-text-transform: none;
  --typog-fact-weight: 500;
  --typog-quote-family: var(--typog-default-heading-family);
  --typog-quote-letter-spacing: 0%;
  --typog-quote-line-height: 150%;
  --typog-quote-size: 20px;
  --typog-quote-text-decoration: none;
  --typog-quote-text-transform: none;
  --typog-quote-weight: 300;
  --typog-menu-link-family: var(--typog-default-body-family);
  --typog-menu-link-letter-spacing: 0%;
  --typog-menu-link-line-height: 120%;
  --typog-menu-link-size: 20px;
  --typog-menu-link-text-decoration: none;
  --typog-menu-link-text-transform: none;
  --typog-menu-link-weight: 300;
  --typog-menu-link-bold-family: var(--typog-default-body-family);
  --typog-menu-link-bold-letter-spacing: 0%;
  --typog-menu-link-bold-line-height: 120%;
  --typog-menu-link-bold-size: 20px;
  --typog-menu-link-bold-text-decoration: none;
  --typog-menu-link-bold-text-transform: none;
  --typog-menu-link-bold-weight: 600;
  --typog-secondary-menu-link-family: var(--typog-default-body-family);
  --typog-secondary-menu-link-letter-spacing: 0%;
  --typog-secondary-menu-link-line-height: 120%;
  --typog-secondary-menu-link-size: 16px;
  --typog-secondary-menu-link-text-decoration: none;
  --typog-secondary-menu-link-text-transform: none;
  --typog-secondary-menu-link-weight: 3 0;
  --typog-secondary-menu-link-bold-family: var(--typog-default-body-family);
  --typog-secondary-menu-link-bold-letter-spacing: 0%;
  --typog-secondary-menu-link-bold-line-height: 120%;
  --typog-secondary-menu-link-bold-size: 16px;
  --typog-secondary-menu-link-bold-text-decoration: none;
  --typog-secondary-menu-link-bold-text-transform: none;
  --typog-secondary-menu-link-bold-weight: 600;
  position: relative;
  overflow-x: hidden;
}
@media only screen and (min-width: 768px) {
  body {
    --grid-padding: 48px;
    --grid-column-gap: 24px;
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --grid-padding: 64px;
    --grid-column-gap: 24px;
  }
}
@media only screen and (min-width: 768px) {
  body {
    --icon-size-xl: 32px;
  }
}
@media only screen and (min-width: 768px) {
  body {
    --banner-min-height: 468px;
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --banner-min-height: 600px;
  }
}
@media only screen and (min-width: 768px) {
  body {
    --grid-padding: 48px;
    --grid-column-gap: 24px;
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-d1-family: var(--typog-default-heading-family);
    --typog-d1-letter-spacing: 0%;
    --typog-d1-line-height: 124%;
    --typog-d1-size: 40px;
    --typog-d1-text-decoration: none;
    --typog-d1-text-transform: none;
    --typog-d1-weight: 300;
    --typog-d2-family: var(--typog-default-heading-family);
    --typog-d2-letter-spacing: 0%;
    --typog-d2-line-height: 124%;
    --typog-d2-size: 30px;
    --typog-d2-text-decoration: none;
    --typog-d2-text-transform: none;
    --typog-d2-weight: 300;
    --typog-h1-family: var(--typog-default-heading-family);
    --typog-h1-letter-spacing: 0%;
    --typog-h1-line-height: 124%;
    --typog-h1-size: 30px;
    --typog-h1-text-decoration: none;
    --typog-h1-text-transform: none;
    --typog-h1-weight: 300;
    --typog-h2-family: var(--typog-default-heading-family);
    --typog-h2-letter-spacing: 0.2%;
    --typog-h2-line-height: 128%;
    --typog-h2-size: 24px;
    --typog-h2-text-decoration: none;
    --typog-h2-text-transform: none;
    --typog-h2-weight: 300;
    --typog-h3-family: var(--typog-default-heading-family);
    --typog-h3-letter-spacing: 0.5%;
    --typog-h3-line-height: 128%;
    --typog-h3-size: 22px;
    --typog-h3-text-decoration: none;
    --typog-h3-text-transform: none;
    --typog-h3-weight: 700;
    --typog-h4-family: var(--typog-default-heading-family);
    --typog-h4-letter-spacing: 0.5%;
    --typog-h4-line-height: 128%;
    --typog-h4-size: 20px;
    --typog-h4-text-decoration: none;
    --typog-h4-text-transform: none;
    --typog-h4-weight: 700;
    --typog-h5-family: var(--typog-default-heading-family);
    --typog-h5-letter-spacing: 0%;
    --typog-h5-line-height: 128%;
    --typog-h5-size: 18px;
    --typog-h5-text-decoration: none;
    --typog-h5-text-transform: none;
    --typog-h5-weight: 700;
    --typog-h6-family: var(--typog-default-heading-family);
    --typog-h6-letter-spacing: 5%;
    --typog-h6-line-height: 150%;
    --typog-h6-size: 16px;
    --typog-h6-text-decoration: none;
    --typog-h6-text-transform: uppercase;
    --typog-h6-weight: 500;
    --typog-button-family: var(--typog-default-heading-family);
    --typog-button-letter-spacing: normal;
    --typog-button-line-height: 24px;
    --typog-button-size: 20px;
    --typog-button-text-decoration: none;
    --typog-button-text-transform: none;
    --typog-button-weight: 600;
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-d1-family: var(--typog-default-heading-family);
    --typog-d1-letter-spacing: 0%;
    --typog-d1-line-height: 124%;
    --typog-d1-size: 70px;
    --typog-d1-text-decoration: none;
    --typog-d1-text-transform: none;
    --typog-d1-weight: 300;
    --typog-d2-family: var(--typog-default-heading-family);
    --typog-d2-letter-spacing: 0%;
    --typog-d2-line-height: 128%;
    --typog-d2-size: 40px;
    --typog-d2-text-decoration: none;
    --typog-d2-text-transform: none;
    --typog-d2-weight: 300;
    --typog-h1-family: var(--typog-default-heading-family);
    --typog-h1-letter-spacing: 0%;
    --typog-h1-line-height: 128%;
    --typog-h1-size: 40px;
    --typog-h1-text-decoration: none;
    --typog-h1-text-transform: none;
    --typog-h1-weight: 300;
    --typog-h2-family: var(--typog-default-heading-family);
    --typog-h2-letter-spacing: 0.2%;
    --typog-h2-line-height: 128%;
    --typog-h2-size: 32px;
    --typog-h2-text-decoration: none;
    --typog-h2-text-transform: none;
    --typog-h2-weight: 300;
    --typog-h3-family: var(--typog-default-heading-family);
    --typog-h3-letter-spacing: 0.5%;
    --typog-h3-line-height: 128%;
    --typog-h3-size: 24px;
    --typog-h3-text-decoration: none;
    --typog-h3-text-transform: none;
    --typog-h3-weight: 700;
    --typog-h4-family: var(--typog-default-heading-family);
    --typog-h4-letter-spacing: 0.5%;
    --typog-h4-line-height: 128%;
    --typog-h4-size: 20px;
    --typog-h4-text-decoration: none;
    --typog-h4-text-transform: none;
    --typog-h4-weight: 700;
    --typog-h5-family: var(--typog-default-heading-family);
    --typog-h5-letter-spacing: 0%;
    --typog-h5-line-height: 128%;
    --typog-h5-size: 18px;
    --typog-h5-text-decoration: none;
    --typog-h5-text-transform: none;
    --typog-h5-weight: 700;
    --typog-h6-family: var(--typog-default-heading-family);
    --typog-h6-letter-spacing: 5%;
    --typog-h6-line-height: 150%;
    --typog-h6-size: 18px;
    --typog-h6-text-decoration: none;
    --typog-h6-text-transform: uppercase;
    --typog-h6-weight: 500;
  }
}

/*# sourceMappingURL=styles.css.map*/