/* 
  ==============================================================================
  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\.chartreuse-100-05000: hsla(65, 100%, 50%, 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\.chartreuse-100-05000);

  --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);

  /* 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: 24em) {
  }

  @media (min-width: 28em) {
  }

  @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: 36em) {
  }

  @media (min-width: 40em) {
  }

  @media (min-width: 48em) {
  }

  @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);
  }

  @media (min-width: 64em) {
  }

  @media (min-width: 72em) {
  }

  @media (min-width: 84em) {
  }

  @media (min-width: 96em) {
  }
}

/* 
  ==============================================================================
  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*="102"] {
  color: var(--theme\.color\.primary);
}

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

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

[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*="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*="820"] {
  max-width: 36rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

[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*="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%);
}

[data-cascade*="264"] {
  --element\.height: .125rem;

  border: 0;
  background-color: currentColor;
  color: var(--theme\.color\.grey-black);
  border-radius: var(--theme\.radius\.round);
  height: var(--element\.height);
  margin-block: calc(var(--theme\.space\.semi-large\:responsive) - (var(--element\.height) / 2));
}

[data-cascade*="699"] {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2.5rem 1rem;
  background-color: var(--entity-theme-tint-color, hsla(0, 0%, 100%, 1));
  scroll-margin-block-start: var(--theme\.space\.large\:responsive);
}

@media (min-width: 24em) {
  [data-cascade*="699"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 36em) {
  [data-cascade*="699"] {
    gap: 1.5rem;
  }
}

@media (min-width: 72em) {
  [data-cascade*="699"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 96em) {
  [data-cascade*="699"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

[data-cascade*="073"] {
  border-radius: var(--theme\.radius\.tiny);
  scroll-margin-block-start: calc(var(--theme\.space\.extra-large\:responsive) + 1rem);
}

@media (min-width: 48em) {
  [data-cascade*="073"] {
    background-color: hsla(0, 0%, 50%, .075);
  }
}

[data-cascade*="073"]:target {
  outline: var(--theme\.color\.primary) solid .25rem;
  outline-offset: .25rem;
}

[data-cascade*="866"] {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: .75rem;
}

[data-cascade*="560"] {
  height: auto;
  width: 100%;
  aspect-ratio: 5 / 4;
  overflow: clip;
  position: relative;
}

@media (min-width: 36em) {
  [data-cascade*="560"] {
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 48em) {
  [data-cascade*="560"] {
    border-radius: var(--theme\.radius\.tiny);
    background-color: hsla(0, 0%, 50%, .075);
  }
}

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

[data-cascade*="583"]::before,
[data-cascade*="583"]::after {
  position: absolute;
  content: '';
  display: block;
  width: 2rem;
  height: 2rem;
  /*border-radius: var(--theme\.radius\.tiny);*/
  border: .125rem solid var(--theme\.color\.primary);
}

[data-cascade*="583"]::before {
  top: .75rem;
  right: 1.5rem;
  border-left: 0;
  border-bottom: 0;
  border-top-right-radius: var(--theme\.radius\.tiny);
}

[data-cascade*="583"]::after {
  bottom: .75rem;
  left: 1.5rem;
  border-right: 0;
  border-top: 0;
  border-bottom-left-radius: var(--theme\.radius\.tiny);
}

[data-cascade*="326"] {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  display: none;
  transition: opacity 5s ease-out;
}

[data-cascade*="326"][data-variety-active] {
  opacity: 1;
  display: block;
}

[data-cascade*="340"] {
  position: absolute;
  inset: 1.5rem 0 .75rem;
}

[data-cascade*="674"] {
  height: 100%;
  width: 100%;
  object-fit: contain;
  scale: var(--entity\.product-media\.scale, 1);
}

[data-cascade*="763"] {
  font-size: var(--theme\.font-size\.small\:responsive);
  line-height: var(--theme\.line-height\.small\:responsive);
  font-weight: var(--theme\.font-weight\.normal);
  line-height: 1;
  display: inline-flex;
  flex-direction: row;
  gap: .5rem;
  position: absolute;
  inset-inline-start: .75rem;
  inset-block-start: .75rem;
  z-index: 1;
}

@media (min-width: 48em) {
  [data-cascade*="763"] {
    inset-inline-start: 1.5rem;
  }
}

[data-cascade*="789"] {
  display: inline-block;
  border-radius: var(--theme\.radius\.small);
  background-color: hsla(0, 0%, 100%, 1);
  padding-block: .375rem;
  padding-inline: .5rem;
}

[data-cascade*="724"] {
  background-color: var(--theme\.color\.accent);
  /*border: .125rem solid var(--theme\.color\.accent);*/
}

[data-cascade*="474"] {
  font-size: var(--theme\.font-size\.small\:responsive);
  line-height: var(--theme\.line-height\.small\:responsive);
  font-weight: var(--theme\.font-weight\.bold);
  text-transform: uppercase;
}

[data-cascade*="067"] {
  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);
  text-transform: uppercase;
}

[data-cascade*="730"] {
  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*="137"] {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  gap: .75rem;
  inset-inline-start: .1rem;
  margin-block-start: .75rem;
}

[data-cascade*="238"] {
  color: var(--entity\.data-variety\.color, hsla(0, 0%, 50%, 1));
}

[data-cascade*="611"] {
  color: inherit;
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background-color: currentColor;
  background-image: linear-gradient(65deg, var(--entity\.data-variety\.color\:alternate, transparent) 0%, var(--entity\.data-variety\.color\:alternate, transparent) 50%, transparent 50%);
  outline: .1rem solid hsla(0, 0%, 15%, 1);
  transition: outline .1s;
  white-space: nowrap;
  user-select: none;
  position: relative;
}

[data-cascade*="611"]:hover {
  outline-width: .25rem;
  outline-color: hsla(0, 0%, 35%, 1);
}

[data-variety-active] [data-cascade*="611"] {
  outline-width: .25rem;
}

[data-cascade*="611"][aria-label]::after {
  position: absolute;
  display: inline-block;
  content: attr(aria-label) " ";
  padding: .375rem .75rem;
  background-color: hsla(0, 0%, 35%, 1);
  color: hsla(0, 0%, 90%, 1);
  z-index: 1;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: .5rem;
  bottom: calc(100% + .75rem);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}

[data-cascade*="611"][aria-label]:hover::after {
  opacity: 1;
}

[data-cascade*="611"][aria-label]::before {
  position: absolute;
  display: block;
  content: '';
  height: 1rem;
  width: 1rem;
  background-color: hsla(0, 0%, 35%, 1);
  position: absolute;
  bottom: calc(100% + .5rem);
  left: calc(50% - .5rem);
  transform: translateX(-50%);
  clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
  transform: rotate(-45deg);
  border-radius: 0 0 0 0.25em;
  opacity: 0;
}

[data-cascade*="611"][aria-label]:hover::before {
  opacity: 1;
}

@media (max-width: 56em) {
  [data-cascade*="611"][aria-label]::before,
  [data-cascade*="611"][aria-label]::after {
    display: none;
  }
}

[data-cascade*="658"] {
  flex-grow: 1;
  display: flex;
  align-items: self-end;
}

[data-cascade*="887"] {
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 100%;
  color: var(--entity-theme-contrast-color, hsl(0, 0%, 10%));
  background-color: var(--theme\.color\.primary, hsl(169, 100%, 50%));
  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*="887"]:hover {
  color: hsl(0, 0%, 10%);
  background-color: hsl(0, 0%, 100%);
}

[data-cascade*="655"] {
  position: absolute;
  width: 100%;
  min-height: 100%;
  /*inset: auto 0 0 0;*/
  inset-block-end: 0;
  flex-direction: column;
  align-items: center;
  display: flex;
  background-color: var(--entity-theme-tint-color, hsla(0, 0%, 100%, 1));
  box-shadow: .25rem 0 0 0 var(--entity-theme-tint-color, hsla(0, 0%, 100%, 1)), -.25rem 0 0 0 var(--entity-theme-tint-color, hsla(0, 0%, 100%, 1));
}

[data-cascade*="646"] {
  height: 2.375rem;
  line-height: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

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

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

[data-cascade*="868"]::after {
  position: relative;
  content: '';
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background-image: url("../icons/bootstrap/x-lg.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.25rem;
}

[data-cascade*="868"]:hover::before {
  inset: .25rem;
  background-color: hsla(0, 0%, 90%, 1);
}

[data-cascade*="206"] {
  flex-grow: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: .75rem;
}

[data-cascade*="206"]:not([data-variety-active]) {
  display: none;
}

[data-cascade*="518"] {
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 100%;
  color: var(--entity-theme-contrast-color, hsl(0, 0%, 10%));
  background-color: var(--theme\.color\.primary, hsl(169, 100%, 50%));
  padding-block: .5rem;
  padding-inline: .75rem;
  font-size: .875rem;
  font-weight: 600;
  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;
  transition: background-color calc(1s / 4), color calc(1s / 4);
}

[data-cascade*="518"]:hover {
  color: hsl(0, 0%, 10%);
  background-color: hsl(0, 0%, 100%);
}

@media (min-width: 48em) {
  [data-cascade*="518"] {
    padding-block: .75rem;
  }
}

[data-cascade*="254"] {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex-grow: 1;
  position: relative;
}

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

[data-cascade*="056"] {
  position: relative;
  min-height: 14rem;
  color: var(--theme\.color\.white);
  background-color: var(--theme\.color\.black-light-grey);
  background-image: linear-gradient(to right, transparent 25%, hsla(0, 0%, 100%, 0.025) 50%, hsla(0, 0%, 100%, 0.05) 75%);
  padding-block: 3rem;
  padding-inline: 5dvw;
  overflow: clip;
  margin-inline: -1rem;
  min-width: 100%;
}

@media (min-width: 24em) {
  [data-cascade*="056"] {
    grid-column: span 2 / span 2;
  }
}

@media (min-width: 32em) {
  [data-cascade*="056"] {
    margin-inline: -5dvw;
  }
}

@media (min-width: 48em) {
  [data-cascade*="056"] {
    border-radius: var(--theme\.radius\.tiny);
    margin-inline: auto;
    padding-inline: 3rem;
  }
}

[data-cascade*="389"] {
  position: absolute;
  inset: 0 0 0 50%;
}

[dir="rtl"] [data-cascade*="389"] {
  inset: 0 50% 0 0;
}

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

[data-cascade*="941"] {
  height: inherit;
  width: inherit;
  object-fit: cover;
  object-position: right center;
}

[dir="rtl"] [data-cascade*="941"] {
  object-position: left center;
}

[data-cascade*="210"] {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  max-width: 60%;
  gap: 1.5rem;
}

[data-cascade*="769"] {
  font-size: var(--theme\.font-size\.extra-large\:responsive);
  line-height: var(--theme\.line-height\.extra-large\:responsive);
  font-weight: var(--theme\.font-weight\.bold);
  text-transform: uppercase;
}

@media (min-width: 48em) {
  [data-cascade*="769"] {
  }
}

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

@media (max-width: 48em) {
  [data-cascade*="282"] {
    display: none;
  }
}

[data-cascade*="116"] {
  display: grid;
  gap: var(--theme\.space\.large\:responsive);
}

[data-cascade*="464"] {
  color: var(--theme\.color\.white);
  font-size: var(--theme\.font-size\.medium\:responsive);
  line-height: var(--theme\.line-height\.medium\:responsive);
  font-weight: var(--theme\.font-weight\.bold);
  text-transform: uppercase;
  margin-block-end: var(--theme\.space\.tiny\:responsive);
}

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

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

[data-cascade*="448"] {
  font-weight: var(--theme\.font-weight\.normal);
}

[data-cascade*="179"] {
  padding-block: var(--theme\.space\.extra-large\:responsive);
  scroll-margin-block-start: var(--theme\.space\.semi-large\:responsive);
}

[data-cascade*="018"] {
  display: grid;
  grid-auto-columns: 5fr 3fr;
  grid-auto-flow: column;
  overflow: clip;
  /*min-height: clamp(24rem, calc(100svh - 3.5rem), 48rem);*/
  min-height: clamp(24rem, calc(100svh - 3.5rem), calc(100svh - 3.5rem));
  justify-content: center;
  color: var(--theme\.color\.white);
  background-color: var(--theme\.color\.black);
  background:
    url(../../content/promotion/play-days/background-transparent-grid.png) center top repeat-y,
    linear-gradient(170deg, hsla(0, 0%, 0%, 1) 50%, hsla(195, 100%, 35%, 1));  
  background-size:
    cover,
    100% 100%;
}

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

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

[data-cascade*="384"] { 
  display: grid;
  gap: var(--theme\.space\.large\:responsive);
  position: relative;
  padding-block-start: var(--theme\.space\.semi-large\:responsive);
  padding-block-end: var(--theme\.space\.extra-large\: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 (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%, 18rem);
}

/*[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*="192"] {
  text-align: center;
  color: var(--theme\.color\.white);
  font-size: var(--theme\.font-size\.extra-huge\:responsive);
  line-height: var(--theme\.line-height\.extra-huge\:responsive);
  font-weight: var(--theme\.font-weight\.medium);
  text-transform: uppercase;
}

[data-cascade*="193"] {
  color: var(--theme\.color\.black);
  -webkit-text-stroke: 0.075rem var(--theme\.color\.white);
}

[data-cascade*="183"] {
  text-align: center;
  color: var(--theme\.color\.primary);
  font-size: var(--theme\.font-size\.extra-large\:responsive);
  line-height: var(--theme\.line-height\.extra-large\:responsive);
  font-weight: var(--theme\.font-weight\.medium);
  text-transform: uppercase;
}

[data-cascade*="522"] {
  text-align: center;
  font-size: var(--theme\.font-size\.semi-large\:responsive);
  line-height: var(--theme\.line-height\.semi-large\:responsive);
  font-weight: var(--theme\.font-weight\.light);
  color: #d6fb08;
  text-transform: uppercase;
}

[data-cascade*="523"] {
 font-weight: var(--theme\.font-weight\.black);
 background-color: #d6fb08;
 color: black;
 padding-inline: .25rem;
 transition: color calc(1s / 4), background-color calc(1s / 4);
}

[data-cascade*="523"]:hover {
  background-color: #ffffff;
}

[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*="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%, 10%, .65);
  height: 100%;
  /*border-radius: 4px;*/
  border: 2px solid hsla(195, 100%, 50%, 1);
  transition: border-color calc(1s / 4), background-color calc(1s / 4);
}

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

[data-cascade*="888"]:hover [data-cascade*="578"] {
  color: #d6fb08;
}

[data-cascade*="837"] {
  grid-column: 1 / -1;
}

[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*="578"] {
  text-transform: uppercase;
  font-weight: var(--theme\.font-weight\.bold);
  color: hsla(195, 100%, 50%, 1);
  transition: color calc(1s / 4);
}

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

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

[data-cascade*="163"] {
  font-size: var(--theme\.font-size\.huge\:responsive);
  line-height: var(--theme\.line-height\.huge\:responsive);
  font-weight: var(--theme\.font-weight\.bold);
  text-transform: uppercase;
  margin-block-end: var(--theme\.space\.medium\:responsive);
}

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

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

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

/*@media (min-width: 48em) {
  [data-cascade*="911"] {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--theme\.space\.medium\:responsive);
  } 
}*/

/*[data-cascade*="587"] {
  background-color: #2e3747;
  color: var(--theme\.color\.white);
  padding: var(--theme\.space\.small\:responsive);
  padding-block-start: var(--theme\.space\.medium\:responsive);
  position: relative;
  border-radius: 4px;
}

@media (min-width: 48em) {
  [data-cascade*="587"]:not(:last-of-type)::after {
    position: absolute;
    content: '';
    height: 4px;
    width: calc(var(--theme\.space\.medium\:responsive) - .5rem);
    left: calc(100% + .25rem);
    top: 50%;
    transform: translateY(-50%);
    border-bottom: 4px dotted #2e3747;
  }
}*/

/*[data-cascade*="724"] {
  position: absolute;
  top: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: inherit;
  line-height: 0;
  border-radius: 10rem;
  font-size: var(--theme\.font-size\.semi-large\:responsive);
  font-weight: var(--theme\.font-weight\.medium);
  min-width: 3rem;
  min-height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid var(--theme\.color\.black-light-grey);
  color: #8d94a0;
}*/

/*[data-cascade*="633"] {
  font-size: var(--theme\.font-size\.large\:responsive);
  line-height: var(--theme\.line-height\.large\:responsive);
  font-weight: var(--theme\.font-weight\.bold);
  text-transform: uppercase;
  margin-block-end: var(--theme\.space\.normal\:responsive);
}*/

/*[data-cascade*="570"] {
  font-size: var(--theme\.font-size\.semi-large\:responsive);
  line-height: var(--theme\.line-height\.semi-large\:responsive);
  font-weight: var(--theme\.font-weight\.light);
  color: var(--theme\.color\.primary);
  margin-block-end: var(--theme\.space\.medium\:responsive);
}

[data-cascade*="900"] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--theme\.space\.normal\:responsive);
}

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

@media (min-width: 56em) {
  [data-cascade*="900"] {
    gap: var(--theme\.space\.medium\:responsive);
  }
}*/

/*[data-cascade*="212"] {
  display: grid;
  width: 100%;
  height: 100%;
  color: var(--theme\.color\.white);
  padding: var(--theme\.space\.small\:responsive);
  border-radius: var(--theme\.radius\.semi-large);
  border: 2px solid var(--theme\.color\.grey-neutral-dark);
  font-size: var(--theme\.font-size\.normal\:responsive);
  line-height: var(--theme\.line-height\.normal\:responsive);
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  gap: var(--theme\.space\.micro\:responsive);
}

[data-cascade*="212"]:hover {
  border-color: var(--theme\.color\.grey-white-faint);
  background-color: hsla(0, 0%, 15%, 1.0);

}

[data-cascade*="212"][data-quiz-category-selected] {
  border-color: var(--theme\.color\.primary);
  background-color: hsla(195, 70%, 10%, 1.0);
  pointer-events: none;
}*/

/*[data-cascade*="801"] {
  margin-block-end: var(--theme\.space\.large\:responsive);
}*/

/*[data-cascade*="783"] {
  max-width: 3rem;
  height: auto;
  display: inline-block;
}

[data-cascade*="678"] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--theme\.space\.small\:responsive);
}

[data-cascade*="678"]:not([data-quiz-category-selected]) {
  display: none;
}

@media (min-width: 28em) {
  [data-cascade*="678"] {
    display: inline-flex;
    flex-direction: row;
  }
}*/

/*[data-cascade*="508"] {
  color: var(--theme\.color\.white);
  padding-block: var(--theme\.space\.micro\:responsive);
  padding-inline: var(--theme\.space\.small\:responsive);
  border-radius: var(--theme\.radius\.semi-large);
  border: 2px solid var(--theme\.color\.grey-neutral-dark);
  font-size: var(--theme\.font-size\.small\:responsive);
  line-height: var(--theme\.line-height\.normal\:responsive);
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  gap: var(--theme\.space\.micro\:responsive);
  transition: opacity calc(1s / 4);
}

[data-cascade*="508"]:hover {
  border-color: var(--theme\.color\.grey-white-faint);
  background-color: hsla(0, 0%, 15%, 1.0);
}

[data-quiz-active="false"] [data-cascade*="508"] {
  pointer-events: none;
  cursor: default;
  opacity: calc(1 / 3);
}

[data-cascade*="508"][data-reset-quiz-preset] {
  pointer-events: none;
  cursor: default;
  opacity: calc(1 / 3);
}

[data-cascade*="508"][data-quiz-preset-selected] {
  border-color: var(--theme\.color\.primary);
  background-color: hsla(195, 70%, 10%, 1.0);
  opacity: 1;
}*/

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

@media (min-width: 32em) {
  [data-cascade*="575"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 56em) {
  [data-cascade*="575"] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

@media (min-width: 64em) {
  [data-cascade*="575"] {
    gap: var(--theme\.space\.medium\:responsive);
  }
}*/

/*[data-cascade*="924"] {
  background-color: hsla(0, 0%, 15%, 1);
  border-radius: 4px;
  position: relative;
  min-height: 7.125rem;
}

[data-quiz-active="false"] [data-cascade*="924"] {
  pointer-events: none;
  cursor: default;
  opacity: calc(1 / 2);
}*/

/*[data-cascade*="481"] {
  height: 100%;
  padding-block-start: var(--theme\.space\.tiny\:responsive);
  padding-block-end: var(--theme\.space\.small\:responsive);
  padding-inline: var(--theme\.space\.medium\:responsive);
  position: relative;
  display: none;
  flex-direction: column;
  transition: opacity calc(1s / 4);
  z-index: 1;
}

[data-quiz-product-selected] [data-cascade*="481"] {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

[data-cascade*="481"]:hover {
  z-index: 2;
}

[data-cascade*="481"]:hover [data-cascade*="066"] {
  opacity: 1;
}

[data-cascade*="481"] [data-cascade*="321"] {
 opacity: 0;
}

[data-cascade*="481"]:hover [data-cascade*="321"] {
  opacity: 1;
}*/
/*
[data-cascade*="300"] {
  margin-block-end: var(--theme\.space\.medium\:responsive);
}

[data-cascade*="648"] {
  margin-block-end: var(--theme\.space\.large\:responsive);
}*/

/*[data-cascade*="321"] {
  display: none;
  line-height: 0;
  gap: var(--theme\.space\.micro);
  justify-content: center;
  align-items: center;
  z-index: 1;
  position: absolute;
  inset-block-start: 100%;
  padding-block-start: 1rem;
  inset-inline: 0;
  transition: opacity calc(1s / 4);
}

@media (min-width: 48em) {
  [data-cascade*="321"] {
    display: flex;
  }
}
*/
/*[data-cascade*="408"] {
  width: 1rem;
  height: 1rem;
  background-color: var(--theme\.color\.grey-neutral-dark);
  border-radius: var(--theme\.radius\.round);
  cursor: pointer;
}

[data-cascade*="408"]:hover {
  background-color: var(--theme\.color\.grey-white-faint);
}

[data-cascade*="408"][data-quiz-product-selected] {
  cursor: default;
  pointer-events: none;
  background-color: var(--theme\.color\.primary);
}*/

/*[data-cascade*="449"] {
  position: absolute;
  inset: 0;
  pointer-events: none;
}*/

/*[data-cascade*="925"] {
  pointer-events: auto;
  display: inline-block;
  cursor: pointer;
  position: absolute;
  border-radius: var(--theme\.radius\.round);
  line-height: 1;
  z-index: 1;
  inset-inline-end: 0;
  inset-block-start: 0;
  inset-block-start: .5rem;
  inset-inline-end: .5rem;
}

[data-cascade*="925"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: transparent;
  border-radius: inherit;
  transition: background-color calc(1s / 4), inset calc(1s / 4);
  z-index: -1;
}

[data-cascade*="925"]::after {
  position: relative;
  content: '';
  display: block;
  width: 2rem;
  height: 2rem;
  background-image: url("../icons/iconizer/plus.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2rem;
  filter: invert(40%);
  transition: filter calc(1s / 4);
  rotate: 45deg;
}

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

[data-cascade*="925"]:hover::after {
  filter: invert(90%);
}*/

/*[data-cascade*="066"] {
  pointer-events: auto;
  display: inline-block;
  cursor: pointer;
  position: absolute;
  padding: .25rem;
  background-color: hsla(0, 0%, 15%, 1);
  border: 4px solid var(--theme\.color\.black-light-grey);
  border-radius: var(--theme\.radius\.round);
  line-height: 1;
  z-index: 1;
  inset-block-start: 50%;
  transform: translateY(-50%);
  transition: background-color calc(1s / 4), opacity calc(1s / 4);
}

[data-cascade*="066"]::after {
  position: relative;
  content: '';
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.25rem;
  filter: invert(40%);
  transition: filter calc(1s / 4);
}

[data-cascade*="066"]:hover {
  background-color: var(--theme\.color\.grey-neutral-dark);
}

[data-cascade*="066"]:hover::after {
  filter: invert(90%);
}

@media (min-width: 56em) {
  [data-cascade*="066"] {
    opacity: 0;
    padding: .5rem;
  }
}
*/
/*[data-cascade*="716"] {
  inset-inline-start: .5rem;
  transform: translate(-50%, -50%);
}

[data-cascade*="716"]::after {
  background-image: url("../icons/bootstrap/caret-left-fill.svg");
}

@media (min-width: 56em) {
  [data-cascade*="716"] {
    inset-inline-start: 0;
  }
}*/

/*[data-cascade*="438"] {
  inset-inline-end: .5rem;
  transform: translate(50%, -50%);
}

[data-cascade*="438"]::after {
  background-image: url("../icons/bootstrap/caret-right-fill.svg");
}

@media (min-width: 56em) {
  [data-cascade*="438"] {
    inset-inline-end: 0;
  }
}*/

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

/*[data-cascade*="498"] {
  grid-row: 1;
  grid-column: 1;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--theme\.space\.tiny\:responsive);
}

[data-cascade*="498"]:not([data-quiz-product-selected]) {
  display: none;
  pointer-events: none;
}

@media (min-width: 32em) {
  [data-cascade*="498"] {
    display: flex;
    flex-direction: column;
  }
}*/

/*[data-cascade*="931"] {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
  color: var(--theme\.color\.grey-neutral-dark);
  background-color: hsla(0, 0%, 15%, 1);
  border-radius: 4px;
  transition: background-color calc(1s / 4), color calc(1s / 4), opacity calc(1s / 4);
}

[data-cascade*="931"]:hover {
  color: var(--theme\.color\.grey-white-faint);
}

[data-quiz-product-selected] [data-cascade*="931"] {
  opacity: 0;
  pointer-events: none;
}*/

/*[data-cascade*="675"] {
  display: inline-flex;
}*/

/*[data-cascade*="311"] {
  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);
  padding-inline-end: var(--theme\.space\.normal\:responsive);
  text-transform: uppercase;
  margin-block-end: 0.5rem;
}

@media (min-width: 48em) {
  [data-cascade*="311"] {
    padding-inline-end: inherit;
  }
}*/

/*[data-cascade*="849"] {
  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*="452"] {
  width: 100%;
  display: grid;
}

[data-cascade*="784"] {
  grid-row: 1;
  grid-column: 1;
}

[data-cascade*="784"]:not([data-variety-active]) {
  display: none;
}*/

/*[data-cascade*="718"] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
}

[data-cascade*="751"] {
  height: 100%;
  width: 100%;
  object-fit: contain;
  scale: var(--entity\.product-media\.scale, 1);
}*/

/*[data-cascade*="420"] {
  outline-color: var(--theme\.color\.grey-neutral-dark);
}*/

/*[data-cascade*="790"] {
  display: flex;
  justify-content: center;
  align-items: center;
}*/

/*[data-cascade*="865"] {
  align-content: center;
  grid-column: 2; 
  grid-row: 1 / span 2;
}*/

/*[data-cascade*="175"] {
  justify-self: center;
}*/

[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*="976"] {
  
}

[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*="302"] {
  position: relative;
  padding-block: .1875rem;
  padding-inline: var(--theme\.space\.tiny);
  color: var(--theme\.color\.black);
  background-color: var(--theme\.color\.primary);
  border-radius: var(--theme\.radius\.small);
  transition: background-color calc(1s / 4);
  white-space: nowrap;
}

[data-cascade*="302"]::before {
  position: relative;
  top: .3125rem;
  filter: invert(0%);
  content: '';
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-image: url("../icons/bootstrap/telegram.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.25rem;
  margin-inline-end: calc(var(--theme\.space\.tiny) / 2);
}

[data-cascade*="302"]:hover {
  background-color: var(--theme\.color\.white);
}

[data-cascade*="572"]::before {
  background-image: url("../icons/bootstrap/instagram.svg");
}

[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);
}

/* 
  ==============================================================================
  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;
}