/* 
  ==============================================================================
  Reset and normalize styles
  ==============================================================================
*/

/*
  1. Prevent padding and border from affecting element width.
  2. Remove default margins and padding.
  3. Reset all borders.
*/

*,
::after,
::before,
::backdrop {
  box-sizing: border-box; /* 1*/
  margin: 0; /* 2*/
  padding: 0; /* 2*/
  border: 0 solid; /* 3*/
}

/*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Disable tap highlights on iOS.
*/

html,
:host {
  line-height: 1.5; /* 1*/
  -webkit-text-size-adjust: 100%; /* 2*/
  tab-size: 4; /* 3*/
  font-family:
      system-ui,
      sans-serif;
  -webkit-tap-highlight-color: transparent; /* 4*/
}

/*
  1. Remove the margin in all browsers.
*/

body {
   margin: 0; /* 1*/
}

/*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox.
  3. Reset the default border style to a 1px solid border.
*/

hr {
  height: 0; /* 1*/
  color: inherit; /* 2*/
  border-top-width: 1px; /* 3*/
}

/*
  Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
  Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
  Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

/*
  Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
  1. Improve consistency of default fonts in all browsers.
  2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
   font-family:
      ui-monospace,
      monospace; /* 1*/
   font-size: 1em; /* 2*/
}

/*
  Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
  1. Remove text indentation from table contents in Chrome and Safari.
  2. Correct table border color inheritance in all Chrome and Safari.
  3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1*/
  border-color: inherit; /* 2*/
  border-collapse: collapse; /* 3*/
}

/*
  Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
  Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
  1. Add the correct display in Chrome and Safari.
*/

summary {
  cursor: pointer;
  display: list-item; /* 1 */
}

/*
  Remove summary's arrow in Chrome and Safari.
*/

::-webkit-details-marker {
  display: none;
}

/*
  Make lists unstyled by default.
*/

ol,
ul,
menu {
  list-style: none;
}

/*
  1. Make replaced elements `display: block` by default.
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default.
      This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1*/
  vertical-align: middle; /* 2*/
}

/*
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio.
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit; /* 1*/
  font-feature-settings: inherit; /* 1*/
  font-variation-settings: inherit; /* 1*/
  letter-spacing: inherit; /* 1*/
  color: inherit; /* 1*/
  border-radius: 0; /* 2*/
  background-color: transparent; /* 3*/
  opacity: 1; /* 4*/
}

/*
  Restore default font weight.
*/

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

/*
  Restore indentation.
*/

:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 1.25em;
}

/*
  Restore space after button.
*/

::file-selector-button {
  margin-inline-end: .25em;
}

/*
  Reset the default placeholder opacity in Firefox.
*/

::placeholder {
  opacity: 1;
}

/*
  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
  crash when using `color-mix(…)` with `currentColor`.
*/

@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari*/ or
  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
  ::placeholder {
    color: color-mix(in oklab, currentColor 50%, transparent);
  }
}

/*
  Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
  Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
  1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/

::-webkit-date-and-time-value {
  min-height: 1lh; /* 1*/
  text-align: inherit; /* 2*/
}

/*
  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/

::-webkit-datetime-edit {
  display: inline-flex;
}

/*
  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

/*
  Remove the additional `:invalid` styles in Firefox.
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
  Correct the inability to style the border radius in iOS Safari.
*/

button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
  appearance: button;
}

/*
  Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
  Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}

/*
  ==============================================================================
  Custom fonts
  ==============================================================================
*/

/*@font-face{
  font-family: "Lineto Brown";
  src: url("../fonts/lineto-brown/pan-thin.woff2") format("woff2"),
       url("../fonts/lineto-brown/pan-thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap
}*/

@font-face{
  font-family: "Lineto Brown";
  src: url("../fonts/lineto-brown/pan-light.woff2") format("woff2"),
       url("../fonts/lineto-brown/pan-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap
}

@font-face{
  font-family: "Lineto Brown";
  src: url("../fonts/lineto-brown/pan-regular.woff2") format("woff2"),
       url("../fonts/lineto-brown/pan-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face{
  font-family: "Lineto Brown";
  src: url("../fonts/lineto-brown/pan-medium.woff2") format("woff2"),
       url("../fonts/lineto-brown/pan-medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap
}

@font-face{
  font-family: "Lineto Brown";
  src: url("../fonts/lineto-brown/pan-bold.woff2") format("woff2"),
       url("../fonts/lineto-brown/pan-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap
}

/*@font-face{
  font-family: "Lineto Brown";
  src: url("../fonts/lineto-brown/pan-black.woff2") format("woff2"),
       url("../fonts/lineto-brown/pan-black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap
}*/

/* 
  ==============================================================================
  Custom variables
  ==============================================================================
*/

:root {

  /*
    System
  */

  /* Colors */
  --root\.color\.neutral-00000: hsla(0, 0%, 100%, 1);
  --root\.color\.neutral-00125: hsla(0, 0%, 98.75%, 1);
  --root\.color\.neutral-00250: hsla(0, 0%, 97.5%, 1);
  --root\.color\.neutral-00375: hsla(0, 0%, 96.25%, 1);
  --root\.color\.neutral-00500: hsla(0, 0%, 95%, 1);
  --root\.color\.neutral-00625: hsla(0, 0%, 93.75%, 1);
  --root\.color\.neutral-00750: hsla(0, 0%, 92.5%, 1);
  --root\.color\.neutral-00875: hsla(0, 0%, 91.25%, 1);
  --root\.color\.neutral-01000: hsla(0, 0%, 90%, 1);
  --root\.color\.neutral-01250: hsla(0, 0%, 87.5%, 1);
  --root\.color\.neutral-01500: hsla(0, 0%, 85%, 1);
  --root\.color\.neutral-02000: hsla(0, 0%, 80%, 1);
  --root\.color\.neutral-02500: hsla(0, 0%, 75%, 1);
  --root\.color\.neutral-03000: hsla(0, 0%, 70%, 1);
  --root\.color\.neutral-03500: hsla(0, 0%, 65%, 1);
  --root\.color\.neutral-04000: hsla(0, 0%, 60%, 1);
  --root\.color\.neutral-04500: hsla(0, 0%, 55%, 1);
  --root\.color\.neutral-05000: hsla(0, 0%, 50%, 1);
  --root\.color\.neutral-05500: hsla(0, 0%, 45%, 1);
  --root\.color\.neutral-06000: hsla(0, 0%, 40%, 1);
  --root\.color\.neutral-06500: hsla(0, 0%, 35%, 1);
  --root\.color\.neutral-07000: hsla(0, 0%, 30%, 1);
  --root\.color\.neutral-07500: hsla(0, 0%, 25%, 1);
  --root\.color\.neutral-08000: hsla(0, 0%, 20%, 1);
  --root\.color\.neutral-08500: hsla(0, 0%, 15%, 1);
  --root\.color\.neutral-08750: hsla(0, 0%, 12.5%, 1);
  --root\.color\.neutral-09000: hsla(0, 0%, 10%, 1);
  --root\.color\.neutral-09125: hsla(0, 0%, 8.75%, 1);
  --root\.color\.neutral-09250: hsla(0, 0%, 7.5%, 1);
  --root\.color\.neutral-09375: hsla(0, 0%, 6.25%, 1);
  --root\.color\.neutral-09500: hsla(0, 0%, 5%, 1);
  --root\.color\.neutral-09625: hsla(0, 0%, 3.75%, 1);
  --root\.color\.neutral-09750: hsla(0, 0%, 2.5%, 1);
  --root\.color\.neutral-09875: hsla(0, 0%, 1.25%, 1);
  --root\.color\.neutral-10000: hsla(0, 0%, 0%, 1);

  --root\.color\.turquoise-100-01250: hsla(170, 100%, 87.5%, 1);
  --root\.color\.turquoise-100-03000: hsla(170, 100%, 70%, 1);
  --root\.color\.turquoise-100-04000: hsla(170, 100%, 60%, 1);
  --root\.color\.turquoise-100-05000: hsla(170, 100%, 50%, 1);
  --root\.color\.turquoise-100-06000: hsla(170, 100%, 40%, 1);
  --root\.color\.turquoise-100-08750: hsla(170, 100%, 12.5%, 1);

  --root\.color\.azure-005-08000: hsla(195, 5%, 20%, 1);

  --root\.color\.azure-100-01250: hsla(195, 100%, 87.5%, 1);
  --root\.color\.azure-100-03000: hsla(195, 100%, 70%, 1);
  --root\.color\.azure-100-04000: hsla(195, 100%, 60%, 1);
  --root\.color\.azure-100-04500: hsla(195, 100%, 55%, 1);
  --root\.color\.azure-100-05000: hsla(195, 100%, 50%, 1);
  --root\.color\.azure-100-05500: hsla(195, 100%, 45%, 1);
  --root\.color\.azure-100-06000: hsla(195, 100%, 40%, 1);
  --root\.color\.azure-100-08750: hsla(195, 100%, 12.5%, 1);

  --root\.color\.blue-075-00625: hsla(220, 7.5%, 93.75%, 1);

    /* Values */
  --root\.value\.infinite: 1000;
  --root\.value\.160: 10;
  --root\.value\.120: 7.5;
  --root\.value\.96: 6;
  --root\.value\.88: 5.5;
  --root\.value\.80: 5;
  --root\.value\.76: 4.75;
  --root\.value\.72: 4.5;
  --root\.value\.68: 4.25;
  --root\.value\.64: 4;
  --root\.value\.60: 3.75;
  --root\.value\.56: 3.5;
  --root\.value\.52: 3.25;
  --root\.value\.48: 3;
  --root\.value\.44: 2.75;
  --root\.value\.40: 2.5;
  --root\.value\.36: 2.25;
  --root\.value\.32: 2;
  --root\.value\.30: 1.875;
  --root\.value\.28: 1.75;
  --root\.value\.26: 1.625;
  --root\.value\.24: 1.5;
  --root\.value\.22: 1.375;
  --root\.value\.20: 1.25;
  --root\.value\.18: 1.125;
  --root\.value\.16: 1;
  --root\.value\.14: 0.875;
  --root\.value\.12: 0.75;
  --root\.value\.10: 0.625;
  --root\.value\.8: 0.5;
  --root\.value\.6: 0.375;
  --root\.value\.4: 0.25;
  --root\.value\.2: 0.125;

  /*
    Theme
  */

  /* Colors */
  --theme\.color\.primary-light: var(--root\.color\.azure-100-04000);
  --theme\.color\.primary: var(--root\.color\.azure-100-05000);
  --theme\.color\.primary-dark: var(--root\.color\.azure-100-05500);
  --theme\.color\.secondary: var(--root\.color\.brightAzure);
  --theme\.color\.accent: var(--root\.color\.brightAzure);

  --theme\.color\.white: hsla(0, 0%, 100%, 1);
  --theme\.color\.white-faint: hsla(0, 0%, 98.75%, 1);
  --theme\.color\.white-light-grey: hsla(0, 0%, 96.25%, 1);
  --theme\.color\.white-neutral-grey: hsla(0, 0%, 93.75%, 1);
  --theme\.color\.white-dark-grey: hsla(0, 0%, 90%, 1);

  --theme\.color\.grey-white: hsla(0, 0%, 80%, 1);
  --theme\.color\.grey-white-faint: hsla(0, 0%, 70%, 1);
  --theme\.color\.grey-light: hsla(0, 0%, 65%, 1);
  --theme\.color\.grey-neutral-light: hsla(0, 0%, 60%, 1);
  --theme\.color\.grey-neutral: hsla(0, 0%, 50%, 1);
  --theme\.color\.grey-neutral-dark: hsla(0, 0%, 40%, 1);
  --theme\.color\.grey-dark: hsla(0, 0%, 35%, 1);
  --theme\.color\.grey-black-faint: hsla(0, 0%, 30%, 1);
  --theme\.color\.grey-black: hsla(0, 0%, 20%, 1);

  --theme\.color\.black-light-grey: hsla(0, 0%, 10%, 1);
  --theme\.color\.black-neutral-grey: hsla(0, 0%, 6.25%, 1);
  --theme\.color\.black-dark-grey: hsla(0, 0%, 3.75%, 1);
  --theme\.color\.black-faint: hsla(0, 0%, 1.25%, 1);
  --theme\.color\.black: hsla(0, 0%, 0%, 1);

  /* Typography */
  --theme\.relative\.font-size\.display: var(--root\.value\.96);
  --theme\.relative\.font-size\.extra-huge: var(--root\.value\.64);
  --theme\.relative\.font-size\.huge: var(--root\.value\.48);
  --theme\.relative\.font-size\.extra-large: var(--root\.value\.36);
  --theme\.relative\.font-size\.large: var(--root\.value\.28);
  --theme\.relative\.font-size\.semi-large: var(--root\.value\.22);
  --theme\.relative\.font-size\.medium: var(--root\.value\.18);
  --theme\.relative\.font-size\.normal: var(--root\.value\.16);
  --theme\.relative\.font-size\.small: var(--root\.value\.14);
  --theme\.relative\.font-size\.tiny: var(--root\.value\.12);

  /* Font Family */
  --theme\.font-family\.sans-serif: "Lineto Brown", system-ui, sans-serif;
  --theme\.font-family\.default: var(--theme\.font-family\.sans-serif);

  /* Font Sizes */
  --theme\.font-size\.display: calc(var(--theme\.relative\.font-size\.display) * 1rem);
  --theme\.font-size\.extra-huge: calc(var(--theme\.relative\.font-size\.extra-huge) * 1rem);
  --theme\.font-size\.huge: calc(var(--theme\.relative\.font-size\.huge) * 1rem);
  --theme\.font-size\.extra-large: calc(var(--theme\.relative\.font-size\.extra-large) * 1rem);
  --theme\.font-size\.large: calc(var(--theme\.relative\.font-size\.large) * 1rem);
  --theme\.font-size\.semi-large: calc(var(--theme\.relative\.font-size\.semi-large) * 1rem);
  --theme\.font-size\.medium: calc(var(--theme\.relative\.font-size\.medium) * 1rem);
  --theme\.font-size\.normal: calc(var(--theme\.relative\.font-size\.normal) * 1rem);
  --theme\.font-size\.small: calc(var(--theme\.relative\.font-size\.small) * 1rem);
  --theme\.font-size\.tiny: calc(var(--theme\.relative\.font-size\.tiny) * 1rem);

  /* Font Weights */
  --theme\.font-weight\.thin: 100;
  --theme\.font-weight\.light: 300;
  --theme\.font-weight\.normal: 400;
  --theme\.font-weight\.medium: 500;
  --theme\.font-weight\.bold: 700;
  --theme\.font-weight\.black: 900;

  /* Line Height */
  --theme\.line-height\.display: calc((1 + 2 / (var(--theme\.relative\.font-size\.display) * 16))* 1em);
  --theme\.line-height\.extra-huge: calc((1 + 2 / (var(--theme\.relative\.font-size\.extra-huge) * 16))* 1em);
  --theme\.line-height\.huge: calc((1 + 2 / (var(--theme\.relative\.font-size\.huge) * 16))* 1em);
  --theme\.line-height\.extra-large: calc((1 + 4 / (var(--theme\.relative\.font-size\.extra-large) * 16))* 1em);
  --theme\.line-height\.large: calc((1 + 4 / (var(--theme\.relative\.font-size\.large) * 16))* 1em);
  --theme\.line-height\.semi-large: calc((1 + 6 / (var(--theme\.relative\.font-size\.semi-large) * 16))* 1em);
  --theme\.line-height\.medium: calc((1 + 6 / (var(--theme\.relative\.font-size\.medium) * 16))* 1em);
  --theme\.line-height\.normal: calc((1 + 6 / (var(--theme\.relative\.font-size\.normal) * 16))* 1em);
  --theme\.line-height\.small: calc((1 + 6 / (var(--theme\.relative\.font-size\.small) * 16))* 1em);
  --theme\.line-height\.tiny: calc((1 + 4 / (var(--theme\.relative\.font-size\.tiny) * 16))* 1em);

  /*line-height: calc((var(--theme\.relative\.font-size\.semi-large) * 16 + 8) / (var(--theme\.relative\.font-size\.semi-large) * 16) * 1em);*/

  /* Spaces */
  --theme\.space\.colossal: calc(var(--root\.value\.160) * 1rem);
  --theme\.space\.extra-huge: calc(var(--root\.value\.120) * 1rem);
  --theme\.space\.huge: calc(var(--root\.value\.96) * 1rem);
  --theme\.space\.extra-large: calc(var(--root\.value\.80) * 1rem);
  --theme\.space\.large: calc(var(--root\.value\.64) * 1rem);
  --theme\.space\.semi-large: calc(var(--root\.value\.48) * 1rem);
  --theme\.space\.medium: calc(var(--root\.value\.32) * 1rem);
  --theme\.space\.normal: calc(var(--root\.value\.24) * 1rem);
  --theme\.space\.small: calc(var(--root\.value\.16) * 1rem);
  --theme\.space\.tiny: calc(var(--root\.value\.12) * 1rem);
  --theme\.space\.micro: calc(var(--root\.value\.8) * 1rem);

  /* Radius */
  --theme\.radius\.round: calc(var(--root\.value\.infinite) * 1rem);
  --theme\.radius\.huge: calc(var(--root\.value\.32) * 1rem);
  --theme\.radius\.large: calc(var(--root\.value\.16) * 1rem);
  --theme\.radius\.semi-large: calc(var(--root\.value\.12) * 1rem);
  --theme\.radius\.medium: calc(var(--root\.value\.8) * 1rem);
  --theme\.radius\.normal: calc(var(--root\.value\.6) * 1rem);
  --theme\.radius\.small: calc(var(--root\.value\.4) * 1rem);
  --theme\.radius\.tiny: calc(var(--root\.value\.2) * 1rem);

  /* Shadows */
  --theme\.shadow\.slightlyRaised: 0 1px 2px 0 rgb(0 0 0 / 10%);
  --theme\.shadow\.floatingBox: 0 0 30px 0 rgb(0 0 0 / 35%);

  /* Durations */
  --theme\.duration\.presto: 100ms;
  --theme\.duration\.allegro: 200ms;
  --theme\.duration\.aaa: 400ms;
  --theme\.duration\.andante: 600ms;
  --theme\.duration\.andante: 1000ms;
}

/* 
  ==============================================================================
  Responsive variables
  ==============================================================================
*/

html {
  @media (min-width: 0) {
    --theme\.font-size\.display\:responsive: var(--theme\.font-size\.extra-large);
    --theme\.font-size\.extra-huge\:responsive: var(--theme\.font-size\.large);
    --theme\.font-size\.huge\:responsive: var(--theme\.font-size\.large);
    --theme\.font-size\.extra-large\:responsive: var(--theme\.font-size\.large);
    --theme\.font-size\.large\:responsive: var(--theme\.font-size\.semi-large);
    --theme\.font-size\.semi-large\:responsive: var(--theme\.font-size\.medium);
    --theme\.font-size\.medium\:responsive: var(--theme\.font-size\.normal);
    --theme\.font-size\.normal\:responsive: var(--theme\.font-size\.small);
    --theme\.font-size\.small\:responsive: var(--theme\.font-size\.tiny);
    --theme\.font-size\.tiny\:responsive: var(--theme\.font-size\.tiny);

    --theme\.line-height\.display\:responsive: var(--theme\.line-height\.extra-large);
    --theme\.line-height\.extra-huge\:responsive: var(--theme\.line-height\.large);
    --theme\.line-height\.huge\:responsive: var(--theme\.line-height\.large);
    --theme\.line-height\.extra-large\:responsive: var(--theme\.line-height\.large);
    --theme\.line-height\.large\:responsive: var(--theme\.line-height\.semi-large);
    --theme\.line-height\.semi-large\:responsive: var(--theme\.line-height\.medium);
    --theme\.line-height\.medium\:responsive: var(--theme\.line-height\.normal);
    --theme\.line-height\.normal\:responsive: var(--theme\.line-height\.small);
    --theme\.line-height\.small\:responsive: var(--theme\.line-height\.tiny);
    --theme\.line-height\.tiny\:responsive: var(--theme\.line-height\.tiny);
    
    --theme\.space\.colossal\:responsive: var(--theme\.space\.extra-large);
    --theme\.space\.extra-huge\:responsive: var(--theme\.space\.large);
    --theme\.space\.huge\:responsive: var(--theme\.space\.semi-large);
    --theme\.space\.extra-large\:responsive: var(--theme\.space\.semi-large);
    --theme\.space\.large\:responsive: var(--theme\.space\.medium);
    --theme\.space\.semi-large\:responsive: var(--theme\.space\.medium);
    --theme\.space\.medium\:responsive: var(--theme\.space\.normal);
    --theme\.space\.normal\:responsive: var(--theme\.space\.small);
    --theme\.space\.small\:responsive: var(--theme\.space\.tiny);
    --theme\.space\.tiny\:responsive: var(--theme\.space\.micro);
    --theme\.space\.micro\:responsive: var(--theme\.space\.micro);
  }

  @media (min-width: 32em) {
    --theme\.font-size\.display\:responsive: var(--theme\.font-size\.huge);
    --theme\.font-size\.extra-huge\:responsive: var(--theme\.font-size\.extra-large);
    --theme\.font-size\.huge\:responsive: var(--theme\.font-size\.extra-large);

    --theme\.line-height\.display\:responsive: var(--theme\.line-height\.huge);
    --theme\.line-height\.extra-huge\:responsive: var(--theme\.line-height\.extra-large);
    --theme\.line-height\.huge\:responsive: var(--theme\.line-height\.extra-large);

    --theme\.space\.colossal\:responsive: var(--theme\.space\.extra-huge);
    --theme\.space\.extra-huge\:responsive: var(--theme\.space\.huge);
    --theme\.space\.huge\:responsive: var(--theme\.space\.large);
    --theme\.space\.extra-large\:responsive: var(--theme\.space\.large);
    --theme\.space\.large\:responsive: var(--theme\.space\.semi-large);
  }

  @media (min-width: 56em) {

    --theme\.font-size\.display\:responsive: var(--theme\.font-size\.display);
    --theme\.font-size\.extra-huge\:responsive: var(--theme\.font-size\.extra-huge);
    --theme\.font-size\.huge\:responsive: var(--theme\.font-size\.huge);
    --theme\.font-size\.extra-large\:responsive: var(--theme\.font-size\.extra-large);
    --theme\.font-size\.large\:responsive: var(--theme\.font-size\.large);
    --theme\.font-size\.semi-large\:responsive: var(--theme\.font-size\.semi-large);
    --theme\.font-size\.medium\:responsive: var(--theme\.font-size\.medium);
    --theme\.font-size\.normal\:responsive: var(--theme\.font-size\.normal);
    --theme\.font-size\.small\:responsive: var(--theme\.font-size\.small);
    --theme\.font-size\.tiny\:responsive: var(--theme\.font-size\.tiny);

    --theme\.line-height\.display\:responsive: var(--theme\.line-height\.display);
    --theme\.line-height\.extra-huge\:responsive: var(--theme\.line-height\.extra-huge);
    --theme\.line-height\.huge\:responsive: var(--theme\.line-height\.huge);
    --theme\.line-height\.extra-large\:responsive: var(--theme\.line-height\.extra-large);
    --theme\.line-height\.large\:responsive: var(--theme\.line-height\.large);
    --theme\.line-height\.semi-large\:responsive: var(--theme\.line-height\.semi-large);
    --theme\.line-height\.medium\:responsive: var(--theme\.line-height\.medium);
    --theme\.line-height\.normal\:responsive: var(--theme\.line-height\.normal);
    --theme\.line-height\.small\:responsive: var(--theme\.line-height\.small);
    --theme\.line-height\.tiny\:responsive: var(--theme\.line-height\.tiny);

    --theme\.space\.colossal\:responsive: var(--theme\.space\.colossal);
    --theme\.space\.extra-huge\:responsive: var(--theme\.space\.extra-huge);
    --theme\.space\.huge\:responsive: var(--theme\.space\.huge);
    --theme\.space\.extra-large\:responsive: var(--theme\.space\.extra-large);
    --theme\.space\.large\:responsive: var(--theme\.space\.large);
    --theme\.space\.semi-large\:responsive: var(--theme\.space\.semi-large);
    --theme\.space\.medium\:responsive: var(--theme\.space\.medium);
    --theme\.space\.normal\:responsive: var(--theme\.space\.normal);
    --theme\.space\.small\:responsive: var(--theme\.space\.small);
    --theme\.space\.tiny\:responsive: var(--theme\.space\.tiny);
    --theme\.space\.micro\:responsive: var(--theme\.space\.micro);
  }

}

/* 
  ==============================================================================
  Base styles
  ==============================================================================
*/

html {
  overflow-y: scroll;
  scroll-behavior:smooth;
  scrollbar-gutter: stable;
  color: hsl(0, 0%, 10%);
  font-family: var(--theme\.font-family\.default);
  font-size: 1em;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
  line-height: 1.375;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

body > main {
  flex-grow: 1;
}

b,
strong {
  font-weight: var(--theme\.font-weight\.bold);
}

/*
  Remove text-shadow in selection highlight and customize the background color.
*/

::selection,
::-moz-selection {
  background: var(--color-primary, initial);
  text-shadow: none;
}

/*
  A better looking default horizontal rule.
*/

hr {
  height: .125rem;
  border: 0;
  border-top: .125rem solid currentColor;
  margin-block: 1em;
}


/* 
  ==============================================================================
  Custom styles
  ==============================================================================
*/

[data-cascade*="818"] {
  display: flex;
  flex-direction: column;
}

[data-cascade*="088"] {
  position: sticky;
  top: 0;
  z-index: 100;
}

[data-cascade*="100"] {
  color: var(--theme\.color\.white);
  background-color: var(--theme\.color\.black);
  box-shadow: 0 0 .25rem hsla(0, 0%, 0%, .25);
  display: flex;
  flex-direction: row;
  place-items: center;
  place-content: space-between;
  min-height: 3.5rem;
}

[data-cascade*="117"] {
  color: var(--theme\.color\.white-light-grey);
  background-color: var(--theme\.color\.black);
  padding-block: var(--theme\.space\.extra-large\:responsive);
}

[data-cascade*="667"] {
  padding-inline: 1rem;
}

@media (min-width: 32em) {
  [data-cascade*="667"] {
    padding-inline: max(5dvw, calc((100vw - 90rem) / 2));
  }
}

[data-cascade*="102"] {
  color: var(--theme\.color\.primary);
}

[data-cascade*="092"] {
  position: relative;
  width: auto;
  height: 3.25rem;
  bottom: -.15rem;
}

[data-cascade*="720"] {
  position: relative;
}

[data-cascade*="451"] {
  margin: 0;
  padding: .5rem;
  border: 0;
  border-radius: 100%;
  background-color: hsla(0, 0%, 90%, 0);
  z-index: 1;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
}

[data-cascade*="451"]::before {
  content: '';
  position: absolute;
  border-radius: inherit;
  z-index: -1;
  inset: .25rem;
  background-color: hsla(0, 0%, 90%, 0);
  transition: background-color calc(1s / 4), inset calc(1s / 4), border-radius calc(1s / 4);
}

[data-cascade*="451"]:hover::before {
  background-color: #e5e5e5;
  inset: 0;
}

[data-cascade*="451"]:hover + [data-cascade*="884"] {
  pointer-events: auto;
  opacity: 1;
}

[data-cascade*="398"] {
  width: 1.25rem;
  height: 1.25rem;
}

[data-cascade*="884"] {
  display: block;
  position: absolute;
  top: calc(100% - 3.5rem + 1.5rem);
  opacity: 0;
  inset-inline-end: -1rem;
  pointer-events: none;
  padding-block: 3rem 1.5rem;
  padding-inline: 1rem;
  transition: opacity calc(1s / 4);
}

[data-cascade*="884"]::before {
  position: absolute;
  display: block;
  content: '';
  width: 2.375rem;
  height: .25rem;
  background-color: var(--theme\.color\.primary);
  inset-block-start: 2.175rem;
  inset-inline-end: 1rem;
  border-radius: 1rem;
}

[data-cascade*="884"]:hover {
  pointer-events: auto;
  opacity: 1;
}

[data-cascade*="643"] {
  background-color: #fff;
  padding: .75rem;
  border-radius: .5rem;
  width: min(16rem, 60dvw);
  box-shadow: 0 0 .5rem 0 hsla(0, 0%, 0%, .1);
  text-align: center;
  display: flex
  ;
  flex-direction: column;
  gap: .75rem;
}

[data-cascade*="112"] {
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

[data-cascade*="359"] {
  color: var(--theme\.color\.black-light-grey);
  order: -1;
}

[data-cascade*="433"] {
  position: relative;
  width: 100%;
  color: #fff;
  background-color: #191919;
  text-transform: uppercase;
  letter-spacing: .03125em;
  text-align: center;
  outline: hsl(0, 0%, 10%) solid .125rem;
  outline-offset: -.125rem;
  transition: background-color calc(1s / 4), color calc(1s / 4);
  padding-block: .75rem;
  padding-inline: 1.5rem;
  border-radius: 10vw;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
}

[data-cascade*="433"]:hover {
  color: #191919;
  background-color: #fff;
}

[data-cascade*="883"] {
  color: var(--theme\.color\.grey-light);
  display: grid;
  place-items: center;
  gap: 1.75rem;
}

@media (min-width: 48em) {
  [data-cascade*="883"] {
    display: flex;
    gap: 3.5rem;
  }
}

[data-cascade*="112"] {
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

[data-cascade*="630"] {
  display: block;
  padding: 1rem;
  border-radius: 100%;
  color: var(--theme\.color\.black);
  background-color: var(--theme\.color\.white);
  width: 4rem;
  height: 4rem;
}

[data-cascade*="676"] {
  width: 100%;
  height: 100%;
}

[data-cascade*="820"] {
  max-width: 36rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-cascade*="978"] {
  font-size: var(--theme\.font-size\.small\:responsive);
  line-height: var(--theme\.line-height\.small\:responsive);
  font-weight: var(--theme\.font-weight\.light);
}

[data-cascade*="054"] {
  grid-column: span 2;
  min-width: 10rem;
}

@media (min-width: 48em) {
  [data-cascade*="054"] {
    margin-inline-start: auto;
  }
}

[data-cascade*="645"] {
    display: flex;
    gap: var(--theme\.space\.normal\:responsive);
    line-height: 0;
}

[data-cascade*="273"] {
  position: relative;
  display: inline-block;
  padding: var(--theme\.space\.micro\:responsive);
  border-radius: 100%;
}

[data-cascade*="273"]::before {
  content: '';
  position: absolute;
  inset: calc(var(--theme\.space\.micro\:responsive) / 2);
  background-color: transparent;
  border-radius: inherit;
  transition: background-color calc(1s / 4), inset calc(1s / 4), border-radius calc(1s / 4);
}

[data-cascade*="273"]:hover::before {
  inset: 0;
  background-color: var(--theme\.color\.grey-black);
}

[data-cascade*="990"] {
  display: block;
  filter: invert(65%);
}

/*
  Main content.
*/

[data-cascade*="721"] {
  display: flex;
  flex-grow: 1;
}

[data-cascade*="018"] {
  flex-grow: 1;
  display: grid;
  grid-auto-columns: 5fr 3fr;
  grid-auto-flow: column;
  overflow: clip;
  min-height: clamp(24rem, calc(100svh - 3.5rem), 48rem);
  justify-content: center;
  color: var(--theme\.color\.black);
  background-color: hsla(195, 100%, 50%, 1);
}

@media (min-width: 36em) {
  [data-cascade*="018"] {
    min-height: clamp(36rem, calc(65svh - 3.5rem), 48rem);
  }
}

[data-cascade*="384"] { 
  display: grid;
  gap: var(--theme\.space\.extra-huge\:responsive);
  position: relative;
  padding-block: var(--theme\.space\.extra-huge\:responsive);
  
}

[data-cascade*="384"]::before { 
  position: absolute;
  content: '';
  inset-block-start: 0;
  inset-inline: 0;
  height: max(24rem, 60%);
  background:
    linear-gradient(to bottom, hsla(195, 100%, 50%, .75), hsla(195, 100%, 50%, .35) 50%, hsla(195, 100%, 50%, 1)),
    url("../../content/promotion/play-days/play-days.svg") center top repeat-y;
  background-size:
    100% 100%,
    auto;
}

@media (max-width: 36em) {
  [data-cascade*="384"]::before {
    inset-block-start: 0;
    inset-block-end: 50%;
  }
}

@media (min-width: 48em) {
  [data-cascade*="384"] { 
    padding-inline-end: 3rem;
  }

  [data-cascade*="384"]::before { 
    inset-inline-end: 3rem;
  }
}

[data-cascade*="418"] {
  position: relative;
  display: grid;
  place-items: center;
}

[data-cascade*="262"] {
  width: min(50%, 20rem);
}

[data-cascade*="411"] {
  position: relative;
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: min-content;
  gap: var(--theme\.space\.medium\:responsive);
  z-index: 1;
}

[data-cascade*="411"]::before {
  position: absolute;
  content: '';
  inset-block-start: calc(var(--theme\.space\.huge\:responsive) * -1);
  inset-block-end: 0;
  inset-inline: 0;
  background:
    linear-gradient(to bottom, hsla(195, 100%, 50%, 0), hsla(195, 100%, 50%, 1) var(--theme\.space\.huge\:responsive));
  background-size:
    100% 100%;
  z-index: -1;
}

[data-cascade*="522"] {
  font-size: var(--theme\.font-size\.semi-large\:responsive);
  line-height: var(--theme\.line-height\.semi-large\:responsive);
  font-weight: var(--theme\.font-weight\.normal);
}

[data-cascade*="662"] {
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: 1fr;
  gap: var(--theme\.space\.small\:responsive);
}

@media (min-width: 36em) {
  [data-cascade*="662"] {
    grid-auto-flow: column;
  }
}

[data-cascade*="888"] {
  display: grid;
  grid-auto-flow: dense;
  gap: var(--theme\.space\.micro\:responsive);
  font-size: var(--theme\.font-size\.normal\:responsive);
  line-height: var(--theme\.line-height\.normal\:responsive);
  font-weight: var(--theme\.font-weight\.normal);
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  padding-block: var(--theme\.space\.small\:responsive);
  padding-inline: var(--theme\.space\.normal\:responsive);
  background-color: hsla(195, 100%, 90%, 1);
  height: 100%;
  border-radius: 4px;
  transition: background-color calc(1s / 4);
}

[data-cascade*="888"]:hover {
  background-color: hsla(195, 100%, 75%, 1);
}

[data-cascade*="578"] {
  text-transform: uppercase;
  font-weight: var(--theme\.font-weight\.bold);
}

[data-cascade*="837"] {
  grid-column: 1 / -1;
  font-weight: var(--theme\.font-weight\.light);
}

[data-cascade*="323"] {
  font-weight: var(--theme\.font-weight\.bold);
  /*order: -1;*/
  justify-self: end;
}

[data-cascade*="729"] {
  position: relative;
  display: none;
}

@media (min-width: 48em) {
  [data-cascade*="729"] {
    display: initial;
  }
}

[data-cascade*="169"] {
  position: absolute;
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 50dvw;
}

[data-cascade*="063"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

[data-cascade*="759"] {
  display: grid;
  grid-auto-flow: row;
  gap: var(--theme\.space\.micro\:responsive);
}

@media (min-width: 28em) {
  [data-cascade*="759"] {
    grid-auto-flow: column;
    gap: var(--theme\.space\.small\:responsive);
  }
}

@media (min-width: 36em) {
  [data-cascade*="759"] {
    grid-auto-columns: 1fr;
  }
}

[data-cascade*="537"] {

}

[data-cascade*="164"] {
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 100%;
  color: var(--theme\.color\.white);
  background-color: var(--theme\.color\.black);
  padding: var(--theme\.space\.small\:responsive);
  font-size: var(--theme\.font-size\.small\:responsive);
  font-weight: var(--theme\.font-weight\.bold);
  text-transform: uppercase;
  letter-spacing: .03125em;
  border-radius: 10vw;
  text-align: center;
  line-height: 1;
  /*outline: .125rem solid var(--theme\.color\.primary, hsl(169, 100%, 50%));*/
  /*outline-offset: -.125rem;*/
  /*transform: translateY(0);*/
  transition: background-color calc(1s / 4), color calc(1s / 4);
  /*margin-block-start: .75rem;*/
}

[data-cascade*="164"]:hover {
  color: hsl(0, 0%, 10%);
  background-color: hsl(0, 0%, 100%);
  /*outline: .125rem solid hsl(258, 94%, 64%);*/
  /*outline-offset: -.125rem;*/
}


/* 
  ==============================================================================
  Utilities
  ==============================================================================
*/

/*
  Hide visually and from screen readers.
*/

.hidden,
[hidden] {
  display: none !important;
}

/*
  Hide only visually, but have it available for screen readers.

  1. For long content, line feeds are not interpreted as spaces and small width causes content to wrap 1 word per line.
*/

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px; /* 1*/
}

/*
  Extends the .visually-hidden class to allow the element to be focusable when navigated to via the keyboard.
*/

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
  Hide visually and from screen readers, but maintain layout.
*/

.invisible {
  visibility: hidden;
}

/*
  Clearfix: contain floats
  1. The use of `table` rather than `block` is only necessary if using `::before` to contain the top-margins of child elements.
*/

.clearfix::before,
.clearfix::after {
  content: "";
  display: table; /* 1 */
}

.clearfix::after {
  clear: both;
}