@import url(https://fonts.bunny.net/css?family=raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i); *,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}.fixed{position:fixed;}.z-10{z-index:10;}.grid{display:grid;}.inline{display:inline;}.block{display:block;}.list-item{display:list-item;}.hidden{display:none;}.h2{height:0.5rem;}.h3{height:0.75rem;}.table{display:table;}.table-cell{display:table-cell;}.table-row{display:table-row;}.border{border-width:1px;}.uppercase{text-transform:uppercase;}.underline{text-decoration-line:underline;}.outline{outline-style:solid;} 

:root {
  --ah-section-space: clamp(32px, 4vw, 48px);
  --ah-content-gap: 24px;
  --border-radius: 0.6;
  color: #f1f5f9;
}

html[slug*='voor-jongeren/meet-new-faces'] header {
  position: sticky !important;
  top: 0;
  background-color: inherit;
}

@media (min-width: 1024px) and (min-height: 600px) {
  html[slug='voor-jongeren/meet-new-faces']
    main
    > .content:first-child
    > .image {
    position: sticky;
    top: 90px;
    align-self: start;
  }
}

._form_9 form {
  margin-left: 0px !important;
  padding-left: 0px !important;
}

html[slug*='voor-jongeren/meet-new-faces']
  header
  :is(.header-link, .heading, .hamburger, .button:not(.language-button)) {
  display: none !important;
}

html[slug*='voor-jongeren/meet-new-faces'] header .language-button {
  display: flex !important;
}

html[slug*='voor-jongeren/meet-new-faces'] header :is(.button) {
  background-color: var(--brand-9) !important;
  padding: 0 16px !important;
  height: 46px !important;
  color: white !important;
}

* {
  font-family: 'Raleway', sans-serif;
}

.prose a[href] {
  color: var(--brand-11);
}

.heading {
  font-weight: 600;
}

h1 {
  font-size: min(var(--text-7), 11vw) !important;
}

.cta {
  .text,
  .heading,
  .label {
    color: white;
  }

  .button {
    background-color: white;
    color: var(--brand-9);
    font-weight: 700;
  }
}

.card.frame-panel.variant-subtle,
.card.frame-panel.variant-soft {
  border: 0px solid transparent;
}

@media (max-width: 470px) {
  .header a .heading {
    display: none !important;
  }
}

ul {
  padding-left: 0;
}

li {
  padding-left: 1.5em;
  list-style-type: none;
}

li::before {
  display: inline-block;
  position: absolute;
  vertical-align: middle;
  margin-top: 0.2em;
  margin-left: -1.5em;
  width: 1em;
  height: 1em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 12l5 5L20 7'%3E%3C/path%3E%3C/svg%3E");
}

.card li::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%235c7c00' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 12l5 5L20 7'%3E%3C/path%3E%3C/svg%3E");
}

/* Header flat styles fix */

.dropdown {
  margin-right: 0px !important;
  margin-left: 0px !important;
}

.header.theme-dark {
  position: absolute;
}

.header.theme-light {
  position: relative;
}

.header .header-link {
  display: none;
  font-size: var(--text-1);
}

@media (min-width: 768px) {
  .header .header-link {
    display: flex;
  }
}

.header .hamburger {
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .header .hamburger {
    display: none;
  }
}

.header .hamburger[aria-expanded='true'] ~ .dropdown {
  display: flex;
}

@media (max-width: 767px) {
  .header .secondary-header-action,
  .header .language-button {
    display: none;
  }
}

/* This page adds its own "Ik ben erbij!" header button on top of the site-wide
   ones, and both no longer fit next to the hamburger on a phone. */
@media (max-width: 767px) {
  html[slug='voor-jongeren/social-challenge']
    .header
    .button[href='/plan-een-gesprek/'] {
    display: none;
  }
}

.header .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  gap: var(--space-4);
  box-shadow: 0 100px 100px rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--color-6);
  background: var(--color-1);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  width: 100%;
}

@media (min-width: 768px) {
  .header .dropdown {
    display: none !important;
  }
}

#aanmelden {
  margin-top: calc(var(--inner-y) -32px) !important;
  padding-top: 32px !important;
}

#aanmelden .column {
  margin-top: 0px !important;
}

#aanmelden .image {
  @media (max-width: 1024.1px) {
    display: none !important;
  }
}

._form_3 {
  form {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 24px !important;

    input {
      background-color: #eff5fb;
      padding: 10px 12px !important;
    }
  }

  #_form_3_submit {
    padding: 14px 18px !important;
  }
}

.section:not(.hero) {
  padding-top: var(--ah-section-space) !important;
  padding-bottom: var(--ah-section-space) !important;
}

.prose > :first-child,
.text > :first-child {
  margin-top: 0;
}

.prose > :last-child,
.text > :last-child {
  margin-bottom: 0;
}

.content > .column > .row {
  margin-top: var(--ah-content-gap);
}

.section:not(.hero) > * + .grid {
  margin-top: 32px;
}

.contact > .column > :is(.column, .form) {
  margin-top: 32px;
}

.contact .form > .input:first-of-type {
  margin-top: 0;
}

@media (max-width: 1023.999px) {
  .section.split:not(.hero)
    > *
    + :is(.column, .image:not(.position-background)) {
    margin-top: var(--ah-content-gap);
  }
}

html[slug*='voor-jongeren/meet-new-faces'] .section:first-child {
  padding-top: 12px !important;
}

.content :is(h1, h2, h3, h4, h5, h6) strong {
  font-weight: 600;
}

.prose blockquote {
  margin-top: var(--ah-content-gap) !important;
  margin-right: 0px !important;
  margin-left: 0px !important;
  border-left: 2px solid var(--brand-9);
  padding-left: 12px !important;
  max-width: 500px;
  color: var(--brand-11);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-3);
  text-wrap: balance;
}

/* Long URLs used as link text pushed the policy pages wider than a phone
   screen; embeds did the same on the training pages. */
.prose {
  min-width: 0;
  overflow-wrap: anywhere;
}

.prose :is(img, iframe, table) {
  max-width: 100%;
}

/* On a 320px phone the Prices block was wider than the screen: a long word in
   its heading ("begeleidingsprogramma") and the 337px minimum column of its
   card grid did not fit. Let both shrink to the available width. */
.prices > * {
  min-width: 0;
}

.prices .heading {
  overflow-wrap: anywhere;
}

.prices .grid {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--column-width), 100%), 1fr)
  );
}
:root,  .theme-light  {
  --base-1: #eff1f3;
--base-2: #e9edf1;
--base-3: #dee4ea;
--base-4: #d3dbe3;
--base-5: #cbd3dc;
--base-6: #c3cbd4;
--base-7: #b7c0c8;
--base-8: #a4acb5;
--base-9: #777f87;
--base-10: #6c747c;
--base-11: #4f575e;
--base-12: #1a2027;
  --base-a1: #f0841909;
--base-a2: #643c140b;
--base-a3: #0b111713;
--base-a4: #0219301e;
--base-a5: #04163127;
--base-a6: #0112282f;
--base-a7: #0214233c;
--base-a8: #03101f51;
--base-a9: #020c1681;
--base-a10: #000b148c;
--base-a11: #000911ab;
--base-a12: #01070de4;
  --base-contrast: #fff;
  --base-background: #eff5fb;
  --brand-1: #f0f2ed;
--brand-2: #eaeee5;
--brand-3: #ddebc7;
--brand-4: #cfe4ab;
--brand-5: #c0da90;
--brand-6: #aecd75;
--brand-7: #99bb53;
--brand-8: #7ea600;
--brand-9: #83ab00;
--brand-10: #789f00;
--brand-11: #4e6d00;
--brand-12: #324011;
  --brand-a1: #ffc61c10;
--brand-a2: #b8a80817;
--brand-a3: #99c50135;
--brand-a4: #8cc10352;
--brand-a5: #81b6016d;
--brand-a6: #76ab0289;
--brand-a7: #6f9e00ab;
--brand-a8: #7ea600;
--brand-a9: #83ab00;
--brand-a10: #789f00;
--brand-a11: #4e6d00;
--brand-a12: #243300ee;
  --brand-contrast: #fff;
  --brand-background: #eff5fb;
  }
 .theme-dark  {
  --base-1: #0e1216;
--base-2: #161a1e;
--base-3: #1f2328;
--base-4: #262b2f;
--base-5: #2d3236;
--base-6: #363b40;
--base-7: #44494d;
--base-8: #5c6267;
--base-9: #6a6f75;
--base-10: #777d82;
--base-11: #afb5ba;
--base-12: #ebeff3;
  --base-a1: #0051d304;
--base-a2: #68d1fd0c;
--base-a3: #a3d9fc17;
--base-a4: #b7e7fa1f;
--base-a5: #c8effe26;
--base-a6: #cdecfe31;
--base-a7: #dcf4fe3f;
--base-a8: #e1f4ff5b;
--base-a9: #e5f4ff6a;
--base-a10: #e8f7ff78;
--base-a11: #f0f8feb5;
--base-a12: #f6fafef3;
  --base-contrast: #fff;
  --base-background: #121113;
  --brand-1: #10130b;
--brand-2: #161a11;
--brand-3: #222915;
--brand-4: #2c3811;
--brand-5: #364515;
--brand-6: #42541a;
--brand-7: #4e631d;
--brand-8: #5b751f;
--brand-9: #83ab00;
--brand-10: #789f00;
--brand-11: #a0c940;
--brand-12: #d4eda9;
  --brand-a1: #00bb0003;
--brand-a2: #79f7000a;
--brand-a3: #affd271a;
--brand-a4: #b0fe072a;
--brand-a5: #b6fe1d38;
--brand-a6: #bcff2c48;
--brand-a7: #c0ff3058;
--brand-a8: #bffd306c;
--brand-a9: #c1ff00a5;
--brand-a10: #bcfe0099;
--brand-a11: #c9fe4dc6;
--brand-a12: #e4ffb6ec;
  --brand-contrast: #fff;
  --brand-background: #121113;
  }:where(:root),
:where(.theme-light),
[data-theme='light'] {
  --brand-1: #fbf9f8;
  --brand-2: #fff1ec;
  --brand-3: #ffe6db;
  --brand-4: #ffd3c2;
  --brand-5: #ffc4ad;
  --brand-6: #ffb397;
  --brand-7: #ff9e7e;
  --brand-8: #f5845f;
  --brand-9: #f50;
  --brand-10: #ed4d00;
  --brand-11: #ca4900;
  --brand-12: #5b2a1a;
  --brand-contrast: #fff;
  --brand-background: #fbf9f8;

  --base-1: #f9f9fa;
  --base-2: #f5f6f8;
  --base-3: #ececf0;
  --base-4: #e3e4e9;
  --base-5: #dcdde2;
  --base-6: #d4d5dc;
  --base-7: #c8cad2;
  --base-8: #b5b7c2;
  --base-9: #878994;
  --base-10: #7c7e89;
  --base-11: #5e6068;
  --base-12: #1e1f24;
  --base-contrast: #ffffff;
  --base-background: #f9f9fa;

  color-scheme: light;
}

:where(.theme-dark),
[data-theme='dark'] {
  --brand-1: #160f0d;
  --brand-2: #201511;
  --brand-3: #38190f;
  --brand-4: #4f1602;
  --brand-5: #5e1e07;
  --brand-6: #6f2c15;
  --brand-7: #873c23;
  --brand-8: #ae4d2c;
  --brand-9: #f50;
  --brand-10: #ed4d00;
  --brand-11: #ff976f;
  --brand-12: #ffd8c9;
  --brand-contrast: #fff;
  --brand-background: #160f0d;

  --base-1: #101113;
  --base-2: #18191b;
  --base-3: #212225;
  --base-4: #282a2d;
  --base-5: #2e3135;
  --base-6: #373a3f;
  --base-7: #44474e;
  --base-8: #5c616a;
  --base-9: #696e77;
  --base-10: #777b84;
  --base-11: #b0b4ba;
  --base-12: #edeef0;
  --base-contrast: #ffffff;
  --base-background: #101113;

  color-scheme: dark;
}

:where(:root),
:where(.theme-light),
:where(.theme-dark),
.color-base,
.color-base
  *:where(:not([class*='color-']):not(.color-base [class*='color-'] *)) {
  --color-1: var(--base-1);
  --color-2: var(--base-2);
  --color-3: var(--base-3);
  --color-4: var(--base-4);
  --color-5: var(--base-5);
  --color-6: var(--base-6);
  --color-7: var(--base-7);
  --color-8: var(--base-8);
  --color-9: var(--base-9);
  --color-10: var(--base-10);
  --color-11: var(--base-11);
  --color-12: var(--base-12);

  --color-a1: var(--base-a1, var(--base-1));
  --color-a2: var(--base-a2, var(--base-2));
  --color-a3: var(--base-a3, var(--base-3));
  --color-a4: var(--base-a4, var(--base-4));
  --color-a5: var(--base-a5, var(--base-5));
  --color-a6: var(--base-a6, var(--base-6));
  --color-a7: var(--base-a7, var(--base-7));
  --color-a8: var(--base-a8, var(--base-8));
  --color-a9: var(--base-a9, var(--base-9));
  --color-a10: var(--base-a10, var(--base-10));
  --color-a11: var(--base-a11, var(--base-11));
  --color-a12: var(--base-a12, var(--base-12));

  --color-contrast: var(--base-contrast);
  --color-background: var(--base-background);
}

.color-brand,
.color-brand
  *:where(:not([class*='color-']):not(.color-brand [class*='color-'] *)) {
  --color-1: var(--brand-1);
  --color-2: var(--brand-2);
  --color-3: var(--brand-3);
  --color-4: var(--brand-4);
  --color-5: var(--brand-5);
  --color-6: var(--brand-6);
  --color-7: var(--brand-7);
  --color-8: var(--brand-8);
  --color-9: var(--brand-9);
  --color-10: var(--brand-10);
  --color-11: var(--brand-11);
  --color-12: var(--brand-12);

  --color-a1: var(--brand-a1, var(--brand-1));
  --color-a2: var(--brand-a2, var(--brand-2));
  --color-a3: var(--brand-a3, var(--brand-3));
  --color-a4: var(--brand-a4, var(--brand-4));
  --color-a5: var(--brand-a5, var(--brand-5));
  --color-a6: var(--brand-a6, var(--brand-6));
  --color-a7: var(--brand-a7, var(--brand-7));
  --color-a8: var(--brand-a8, var(--brand-8));
  --color-a9: var(--brand-a9, var(--brand-9));
  --color-a10: var(--brand-a10, var(--brand-10));
  --color-a11: var(--brand-a11, var(--brand-11));
  --color-a12: var(--brand-a12, var(--brand-12));

  --color-contrast: var(--brand-contrast);
  --color-background: var(--brand-background);
}

.contrast,
.contrast * {
  --color-9: var(--color-12);
  --color-10: var(--color-12);
  --color-11: var(--color-12);
  --color-contrast: var(--color-1);
}

:where(:root),
:where(.theme-light),
:where(.theme-dark),
:where(.color-base),
:where(.color-brand),
.variant-base,
.variant-base
  *:not([class*='variant-']):not(.variant-base [class*='variant-'] *) {
  --background: var(--color-background, var(--color-1));
  --background-hover: var(--color-1);
  --background-active: var(--color-1);
  --border: var(--color-a6);
  --border-hover: var(--color-a6);
  --text: var(--color-11);
}

.variant-subtle,
.variant-subtle
  *:not([class*='variant-']):not(.variant-subtle [class*='variant-'] *) {
  --background: var(--color-2);
  --background-hover: var(--color-2);
  --background-active: var(--color-2);
  --border: var(--color-a6);
  --border-hover: var(--color-a6);
  --text: var(--color-11);
}

.variant-ghost,
.variant-ghost
  *:not([class*='variant-']):not(.variant-ghost [class*='variant-'] *) {
  --background: transparent;
  --background-hover: var(--color-3);
  --background-active: var(--color-4);
  --border: transparent;
  --border-hover: transparent;
  --text: var(--color-11);
}

.variant-outline,
.variant-outline
  *:not([class*='variant-']):not(.variant-outline [class*='variant-'] *) {
  --background: transparent;
  --background-hover: var(--color-a3);
  --background-active: var(--color-a5);
  --border: var(--color-a7);
  --border-hover: var(--color-a8);
  --text: var(--color-11);
}

.variant-soft,
.variant-soft
  *:not([class*='variant-']):not(.variant-soft [class*='variant-'] *) {
  --background: var(--color-a3);
  --background-hover: var(--color-a4);
  --background-active: var(--color-a5);
  --border: transparent;
  --border-hover: transparent;
  --text: var(--color-11);
}

.variant-surface,
.variant-surface
  *:not([class*='variant-']):not(.variant-surface [class*='variant-'] *) {
  --background: var(--color-a3);
  --background-hover: var(--color-a4);
  --background-active: var(--color-a5);
  --border: var(--color-a7);
  --border-hover: var(--color-a8);
  --text: var(--color-11);
}

.variant-solid,
.variant-solid
  *:not([class*='variant-']):not(.variant-solid [class*='variant-'] *) {
  --background: var(--color-9);
  --background-hover: var(--color-10);
  --background-active: var(--color-10);
  --border: transparent;
  --border-hover: transparent;
  --text: var(--color-contrast);
}

:root,
.full {
  --transition: cubic-bezier(0.4, 0, 0.2, 1) 0.15s;

  --font-family: 'Raleway', sans-serif;
  --font-weight: 400;

  --text-heading-font-family: var(--font-family);
  --text-heading-font-weight: 700;

  --button-font-family: var(--font-family);
  --button-font-weight: 500;
}

.full + .full,
.full + .box,
.full + .masonry,
.full + .carousel,
.image + .full,
.icon + .full {
  --space-auto: var(--space-6);
}

.full + .group,
.full + .row,
.full + .wrap,
.full + .button,
.full + .price,
.full + .switch {
  --space-auto: var(--space-5);
}

.full + .heading,
.full + .link,
.full + .list,
.full + .paragraph,
.full + .text,
.full + .tagline,
.full + .input,
.full + .textarea,
.full + .select,
.full + .badge,
.full + .rating {
  --space-auto: var(--space-4);
}

.paragraph + .paragraph,
.text + .text,
.button + .button,
.input + .button {
  --space-auto: var(--space-3);
}

.full + .label,
.label + .input,
.label + .textarea,
.label + .select,
.icon + .icon {
  --space-auto: var(--space-2);
}

.rating + .text,
.text + .rating {
  --space-auto: var(--space-1);
}

.image + .full,
.icon + .full {
  --space-auto: var(--space-6);
}

/* // .button:not(.variant-link) + .button:not(.variant-link) {
//   margin-top: var(--space-3);
// }

// .variant-link + .variant-link{
//   margin-top: var(--space-2);
// } */

:root {
  --space-sm-1: 3px;
  --space-sm-2: 6px;
  --space-sm-3: 9px;
  --space-sm-4: 12px;
  --space-sm-5: 24px;
  --space-sm-6: 48px;
  --space-sm-7: 72px;
  --space-md-1: 4px;
  --space-md-2: 8px;
  --space-md-3: 12px;
  --space-md-4: 16px;
  --space-md-5: 32px;
  --space-md-6: 64px;
  --space-md-7: 96px;
  --space-lg-1: 5px;
  --space-lg-2: 10px;
  --space-lg-3: 15px;
  --space-lg-4: 20px;
  --space-lg-5: 40px;
  --space-lg-6: 80px;
  --space-lg-7: 120px;
  --text-xs-1: 12px;
  --text-xs-2: 12px;
  --text-xs-3: 12px;
  --text-xs-4: 14px;
  --text-xs-5: 16px;
  --text-xs-6: 18px;
  --text-xs-7: 20px;
  --text-sm-1: 12px;
  --text-sm-2: 14px;
  --text-sm-3: 14px;
  --text-sm-4: 16px;
  --text-sm-5: 18px;
  --text-sm-6: 20px;
  --text-sm-7: 24px;
  --text-md-1: 14px;
  --text-md-2: 16px;
  --text-md-3: 16px;
  --text-md-4: 18px;
  --text-md-5: 20px;
  --text-md-6: 24px;
  --text-md-7: 30px;
  --text-lg-1: 16px;
  --text-lg-2: 18px;
  --text-lg-3: 18px;
  --text-lg-4: 20px;
  --text-lg-5: 24px;
  --text-lg-6: 30px;
  --text-lg-7: 36px;
  --text-xl-1: 16px;
  --text-xl-2: 18px;
  --text-xl-3: 20px;
  --text-xl-4: 24px;
  --text-xl-5: 30px;
  --text-xl-6: 36px;
  --text-xl-7: 48px;
}
@media (min-width: 768px) {
  :root {
    --text-xs-3: 14px;
    --text-xs-4: 16px;
    --text-xs-5: 18px;
    --text-xs-6: 20px;
    --text-xs-7: 24px;
    --text-sm-3: 16px;
    --text-sm-4: 18px;
    --text-sm-5: 20px;
    --text-sm-6: 24px;
    --text-sm-7: 30px;
    --text-md-3: 18px;
    --text-md-4: 20px;
    --text-md-5: 24px;
    --text-md-6: 30px;
    --text-md-7: 36px;
    --text-lg-3: 20px;
    --text-lg-4: 24px;
    --text-lg-5: 30px;
    --text-lg-6: 36px;
    --text-lg-7: 48px;
    --text-xl-2: 20px;
    --text-xl-3: 24px;
    --text-xl-4: 30px;
    --text-xl-5: 36px;
    --text-xl-6: 48px;
    --text-xl-7: 60px;
  }
}

.compact {
  --space-sm-1: 3px;
  --space-sm-2: 6px;
  --space-sm-3: 7.5px;
  --space-sm-4: 9px;
  --space-sm-5: 12px;
  --space-sm-6: 15px;
  --space-sm-7: 18px;
  --space-md-1: 4px;
  --space-md-2: 8px;
  --space-md-3: 10px;
  --space-md-4: 12px;
  --space-md-5: 16px;
  --space-md-6: 20px;
  --space-md-7: 24px;
  --space-lg-1: 5px;
  --space-lg-2: 10px;
  --space-lg-3: 12.5px;
  --space-lg-4: 15px;
  --space-lg-5: 20px;
  --space-lg-6: 25px;
  --space-lg-7: 30px;
  --text-xs-1: 12px;
  --text-xs-2: 12px;
  --text-xs-3: 12px;
  --text-xs-4: 14px;
  --text-xs-5: 16px;
  --text-xs-6: 18px;
  --text-xs-7: 20px;
  --text-sm-1: 12px;
  --text-sm-2: 14px;
  --text-sm-3: 14px;
  --text-sm-4: 16px;
  --text-sm-5: 18px;
  --text-sm-6: 20px;
  --text-sm-7: 24px;
  --text-md-1: 14px;
  --text-md-2: 16px;
  --text-md-3: 16px;
  --text-md-4: 18px;
  --text-md-5: 20px;
  --text-md-6: 24px;
  --text-md-7: 30px;
  --text-lg-1: 16px;
  --text-lg-2: 18px;
  --text-lg-3: 18px;
  --text-lg-4: 20px;
  --text-lg-5: 24px;
  --text-lg-6: 30px;
  --text-lg-7: 30px;
  --text-xl-1: 16px;
  --text-xl-2: 18px;
  --text-xl-3: 20px;
  --text-xl-4: 24px;
  --text-xl-5: 30px;
  --text-xl-6: 30px;
  --text-xl-7: 30px;
}

/* --------------------------- */
/* Generate sizes */
/* --------------------------- */
.size-xs,
.size-xs,
.size-xs .compact:not(.size-xs [class*=size-] .compact):not(.size-xs [class*=size-].compact) {
  --space-1: var(--space-sm-1);
  --space-2: var(--space-sm-2);
  --space-3: var(--space-sm-3);
  --space-4: var(--space-sm-4);
  --space-5: var(--space-sm-5);
  --space-6: var(--space-sm-6);
  --space-7: var(--space-sm-7);
  --radius-1: calc(var(--border-radius, 1) * var(--space-sm-1));
  --radius-2: calc(var(--border-radius, 1) * var(--space-sm-2));
  --radius-3: calc(var(--border-radius, 1) * var(--space-sm-3));
  --text-1: var(--text-xs-1);
  --text-2: var(--text-xs-2);
  --text-3: var(--text-xs-3);
  --text-4: var(--text-xs-4);
  --text-5: var(--text-xs-5);
  --text-6: var(--text-xs-6);
  --text-7: var(--text-xs-7);
}

.size-sm,
.size-sm,
.size-sm .compact:not(.size-sm [class*=size-] .compact):not(.size-sm [class*=size-].compact) {
  --space-1: var(--space-sm-1);
  --space-2: var(--space-sm-2);
  --space-3: var(--space-sm-3);
  --space-4: var(--space-sm-4);
  --space-5: var(--space-sm-5);
  --space-6: var(--space-sm-6);
  --space-7: var(--space-sm-7);
  --radius-1: calc(var(--border-radius, 1) * var(--space-sm-1));
  --radius-2: calc(var(--border-radius, 1) * var(--space-sm-2));
  --radius-3: calc(var(--border-radius, 1) * var(--space-sm-3));
  --text-1: var(--text-sm-1);
  --text-2: var(--text-sm-2);
  --text-3: var(--text-sm-3);
  --text-4: var(--text-sm-4);
  --text-5: var(--text-sm-5);
  --text-6: var(--text-sm-6);
  --text-7: var(--text-sm-7);
}

:where(:root), :where(.compact),
.size-md,
.size-md .compact:not(.size-md [class*=size-] .compact):not(.size-md [class*=size-].compact) {
  --space-1: var(--space-md-1);
  --space-2: var(--space-md-2);
  --space-3: var(--space-md-3);
  --space-4: var(--space-md-4);
  --space-5: var(--space-md-5);
  --space-6: var(--space-md-6);
  --space-7: var(--space-md-7);
  --radius-1: calc(var(--border-radius, 1) * var(--space-md-1));
  --radius-2: calc(var(--border-radius, 1) * var(--space-md-2));
  --radius-3: calc(var(--border-radius, 1) * var(--space-md-3));
  --text-1: var(--text-md-1);
  --text-2: var(--text-md-2);
  --text-3: var(--text-md-3);
  --text-4: var(--text-md-4);
  --text-5: var(--text-md-5);
  --text-6: var(--text-md-6);
  --text-7: var(--text-md-7);
}

.size-lg,
.size-lg,
.size-lg .compact:not(.size-lg [class*=size-] .compact):not(.size-lg [class*=size-].compact) {
  --space-1: var(--space-lg-1);
  --space-2: var(--space-lg-2);
  --space-3: var(--space-lg-3);
  --space-4: var(--space-lg-4);
  --space-5: var(--space-lg-5);
  --space-6: var(--space-lg-6);
  --space-7: var(--space-lg-7);
  --radius-1: calc(var(--border-radius, 1) * var(--space-lg-1));
  --radius-2: calc(var(--border-radius, 1) * var(--space-lg-2));
  --radius-3: calc(var(--border-radius, 1) * var(--space-lg-3));
  --text-1: var(--text-lg-1);
  --text-2: var(--text-lg-2);
  --text-3: var(--text-lg-3);
  --text-4: var(--text-lg-4);
  --text-5: var(--text-lg-5);
  --text-6: var(--text-lg-6);
  --text-7: var(--text-lg-7);
}

.size-xl,
.size-xl,
.size-xl .compact:not(.size-xl [class*=size-] .compact):not(.size-xl [class*=size-].compact) {
  --space-1: var(--space-lg-1);
  --space-2: var(--space-lg-2);
  --space-3: var(--space-lg-3);
  --space-4: var(--space-lg-4);
  --space-5: var(--space-lg-5);
  --space-6: var(--space-lg-6);
  --space-7: var(--space-lg-7);
  --radius-1: calc(var(--border-radius, 1) * var(--space-lg-1));
  --radius-2: calc(var(--border-radius, 1) * var(--space-lg-2));
  --radius-3: calc(var(--border-radius, 1) * var(--space-lg-3));
  --text-1: var(--text-xl-1);
  --text-2: var(--text-xl-2);
  --text-3: var(--text-xl-3);
  --text-4: var(--text-xl-4);
  --text-5: var(--text-xl-5);
  --text-6: var(--text-xl-6);
  --text-7: var(--text-xl-7);
}

@layer fulldev {
  .full.full {
    z-index: 1;
    box-sizing: border-box;
  }
}@layer fulldev {
  .full.icon {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 1em;
    height: 1em;
    color: var(--text);
    font-size: var(--text-2);
  }
  .full.icon svg {
    position: absolute;
    width: 120%;
    height: 120%;
  }
}@layer fulldev {
  .full.badge {
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    gap: var(--space-2);
    transition: var(--transition);
    border: 1px solid var(--border);
    background-color: var(--background);
    padding-right: var(--space-3);
    padding-left: var(--space-3);
    height: calc(var(--text-1) + 2 * var(--space-2));
    color: var(--text);
    font-weight: var(--button-font-weight);
    font-size: var(--text-1);
    line-height: 1.625;
    font-family: var(--button-font-family);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }
  .full.badge.radius-none {
    border-radius: 0;
  }
  .full.badge.radius-auto {
    border-radius: var(--radius-1);
  }
  .full.badge.radius-full {
    border-radius: 9999px;
  }
}@layer fulldev {
  .full.avatar {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
    width: calc(4.4 * var(--space-3)) !important;
    height: calc(4.4 * var(--space-3)) !important;
    object-fit: cover;
  }
  .full.avatar.radius-none {
    border-radius: 0;
  }
  .full.avatar.radius-auto {
    border-radius: var(--radius-1);
  }
  .full.avatar.radius-full {
    border-radius: 9999px;
  }
}@layer fulldev {
  .full.button {
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    gap: var(--space-2);
    transition: background-color var(--transition);
    cursor: pointer;
    outline: none !important;
    border: 1px solid var(--border);
    background-color: var(--background);
    padding-right: var(--space-4);
    padding-left: var(--space-4);
    height: calc(var(--text-1) + 2 * var(--space-4));
    color: var(--text);
    font-weight: var(--button-font-weight);
    font-size: var(--text-1);
    line-height: 1.625;
    font-family: var(--button-font-family);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }
  .full.button:hover {
    background-color: var(--background-hover);
  }
  .full.button:active {
    background-color: var(--background-active);
  }
  .full.button .avatar {
    margin-right: calc(-1 * (var(--space-4)));
    margin-left: var(--space-1);
    padding: calc(var(--space-1) / 3);
    width: calc(var(--text-1) + 2 * var(--space-4)) !important;
    height: calc(var(--text-1) + 2 * var(--space-4)) !important;
  }
  .full.button:focus-visible {
    outline: 2px solid var(--focus) !important;
    outline-offset: 2px;
  }
  .full.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
  .full.button.variant-link {
    box-shadow: none;
    border-color: transparent;
    background-color: transparent;
    padding: 0;
    height: auto;
  }
  .full.button.variant-link:hover {
    color: var(--colo-12);
  }
  .full.button.radius-none {
    border-radius: 0;
  }
  .full.button.radius-auto {
    border-radius: var(--radius-1);
  }
  .full.button.radius-full {
    border-radius: 9999px;
  }
}@layer fulldev {
  .full.image {
    display: block;
    width: 100%;
    height: auto;
  }
  .full.image.mask-sm {
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 30%);
    mask-image: linear-gradient(to top, transparent 0%, black 30%);
  }
  .full.image.mask-md {
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 65%);
    mask-image: linear-gradient(to top, transparent 0%, black 65%);
  }
  .full.image.mask-lg {
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);
    mask-image: linear-gradient(to top, transparent 0%, black 100%);
  }
  .full.image.radius-none {
    border-radius: 0;
  }
  .full.image.radius-auto {
    border-radius: var(--radius-2);
  }
  .full.image.radius-full {
    border-radius: 9999px;
  }
  .full.image.position-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: 0 !important;
    border-radius: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
  }
  .full.image.position-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .full.image.position-container {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
  .full.image.position-inset {
    object-fit: cover;
  }
  .full.image.position-inset:is(.structure-column > .full.image.position-inset) {
    margin-right: calc(var(--inner-x) * -1);
    margin-left: calc(var(--inner-x) * -1);
    width: calc(100% + var(--inner-x) * 2);
  }
  .full.image.position-inset:is(.structure-column > .full.image.position-inset).image:first-child {
    margin-top: calc(var(--inner-y) * -1);
    height: calc(100% + var(--inner-y) * 1);
  }
  .full.image.position-inset:is(.structure-column > .full.image.position-inset).image:last-child {
    margin-bottom: calc(var(--inner-y) * -1);
    height: calc(100% + var(--inner-y) * 1);
  }
  @media (max-width: 1023.999px) {
    .full.image.position-inset:is(.structure-split > .full.image.position-inset) {
      margin-right: calc(var(--inner-x) * -1);
      margin-left: calc(var(--inner-x) * -1);
      width: calc(100% + var(--inner-x) * 2);
    }
    .full.image.position-inset:is(.structure-split > .full.image.position-inset).image:first-child {
      margin-top: calc(var(--inner-y) * -1);
      height: calc(100% + var(--inner-y) * 1);
    }
    .full.image.position-inset:is(.structure-split > .full.image.position-inset).image:last-child {
      margin-bottom: calc(var(--inner-y) * -1);
      height: calc(100% + var(--inner-y) * 1);
    }
  }
  @media (min-width: 1024px) {
    .full.image.position-inset:is(.structure-split > .full.image.position-inset) {
      margin-top: calc(var(--inner-y) * -1);
      margin-bottom: calc(var(--inner-y) * -1);
      height: calc(100% + var(--inner-y) * 2);
    }
    .full.image.position-inset:is(.structure-split > .full.image.position-inset).image:first-child {
      margin-left: calc(var(--inner-x) * -1);
      width: calc(100% + var(--inner-x) * 1);
    }
    .full.image.position-inset:is(.structure-split > .full.image.position-inset).image:last-child {
      margin-right: calc(var(--inner-x) * -1);
      width: calc(100% + var(--inner-x) * 1);
    }
  }
  .full.image.ratio-landscape {
    aspect-ratio: 4/3;
  }
  .full.image.ratio-square {
    aspect-ratio: 1/1;
  }
  .full.image.ratio-portrait {
    aspect-ratio: 3/4;
  }
}@layer fulldev {
  .full.logo {
    max-width: calc(15 * var(--space-2));
    height: 100%;
    object-fit: contain;
  }
}@layer fulldev {
  .full.rating {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
}@layer fulldev {
  .full.label {
    display: flex;
    flex-direction: column;
    color: var(--text);
    font-weight: var(--font-weight);
    font-size: var(--text-1);
    line-height: 1;
    font-family: var(--font-family);
    text-align: left;
    white-space: nowrap;
  }
}@layer fulldev {
  .full.checkbox-element {
    display: block;
    width: var(--text-1);
    height: var(--text-1);
    accent-color: var(--color-9);
  }
}@layer fulldev {
  .full.input-element {
    display: flex;
    position: relative;
    align-items: center;
    outline: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-1);
    background-color: var(--background);
    padding: var(--space-3);
    width: 100%;
    min-width: var(--space-3);
    height: calc(var(--text-1) + 2 * var(--space-4));
    color: var(--text);
    font-weight: var(--font-weight);
    font-size: var(--text-1);
    line-height: 1.25;
    font-family: var(--font-family);
  }
  .full.input-element::placeholder {
    color: var(--text);
  }
  .full.input-element:hover {
    outline: none;
  }
  .full.input-element:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border);
  }
  .full.input-element:disabled {
    opacity: 50%;
    cursor: not-allowed;
    pointer-events: none;
  }
}@layer fulldev {
  .full.input {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
  }
  .full.input .icon {
    position: absolute;
    top: 50%;
    right: var(--space-3);
    transform: translateY(-50%);
  }
}@layer fulldev {
  .full.select-element {
    display: flex;
    position: relative;
    align-items: center;
    appearance: none;
    appearance: none;
    outline: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-1);
    background-color: var(--background);
    padding: var(--space-3);
    width: 100%;
    min-width: var(--space-3);
    height: calc(var(--text-1) + 2 * var(--space-4));
    color: var(--text);
    font-weight: var(--font-weight);
    font-size: var(--text-1);
    line-height: 1.25;
    font-family: var(--font-family);
  }
  .full.select-element:hover {
    outline: none;
  }
  .full.select-element:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border);
  }
  .full.select-element:disabled {
    opacity: 50%;
    cursor: not-allowed;
    pointer-events: none;
  }
}@layer fulldev {
  .full.select-option {
    color: var(--text);
    font-weight: var(--font-weight);
    font-size: var(--text-1);
    line-height: 1;
    font-family: var(--font-family);
  }
}@layer fulldev {
  .full.select {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
  }
  .full.select .icon {
    position: absolute;
    right: var(--space-4);
    bottom: var(--space-4);
    width: var(--text-1);
    height: var(--text-1);
  }
}@layer fulldev {
  .full.switch-element {
    display: block;
    position: relative;
    transition: var(--transition);
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 999px;
    background-color: var(--background);
    padding: var(--space-1);
    width: fit-content;
    min-width: calc(var(--text-1) + 2 * var(--space-2) * 2 + 2 * var(--space-1));
    height: calc(var(--text-1) + 2 * var(--space-2));
  }
  .full.switch-element .checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  .full.switch-element .checkmark {
    transform: 0%;
    transition: var(--transition);
    border-radius: 999px;
    background-color: var(--border);
    width: 50%;
    height: 100%;
  }
  .full.switch-element .checkbox:checked ~ .checkmark {
    transform: translateX(100%);
    background-color: var(--color-12);
  }
  .full.switch-element:hover {
    background-color: var(--hover);
  }
  .full.switch-element:focus-visible {
    outline: 2px solid var(--focus) !important;
    outline-offset: 2px;
  }
  .full.switch-element:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
}@layer fulldev {
  .full.switch {
    position: relative;
    align-items: center;
    gap: var(--space-1);
    width: 100%;
  }
}@layer fulldev {
  .full.table-cell {
    vertical-align: middle;
    padding: var(--space-3) var(--space-4);
    color: var(--color-11);
    font-size: var(--text-1);
  }
}@layer fulldev {
  .full.table-row {
    border-bottom: 1px solid var(--color-6);
    background-color: var(--color-2);
  }
  .full.table-row:is(.table-header > .full.table-row), .full.table-row:is(.table-footer > .full.table-row) {
    background-color: var(--color-3);
  }
  .full.table-row:last-child {
    border-bottom: none;
  }
}@layer fulldev {
  .full.table-body {
    display: table-row-group;
    vertical-align: middle;
    unicode-bidi: isolate;
  }
}@layer fulldev {
  .full.table-footer {
    display: table-footer-group;
    border-top: 1px solid var(--border);
    background-color: var(--color-3);
    color: var(--color-12);
  }
  .full.table-footer:last-child {
    border-bottom: none;
  }
}@layer fulldev {
  .full.table-head {
    vertical-align: middle;
    padding: var(--space-3) var(--space-4);
    color: var(--color-12);
    font-size: var(--text-1);
    text-align: left;
  }
}@layer fulldev {
  .full.table-header {
    border-bottom: 1px solid var(--color-6);
    background-color: var(--color-3);
  }
  .full.table-header:last-child {
    border-bottom: none;
  }
}@layer fulldev {
  .full.table {
    display: table;
    box-shadow: 0 0 0 1px var(--border);
    border-radius: var(--radius-1);
    border-collapse: collapse;
    width: 100%;
    caption-side: bottom;
    overflow: hidden;
  }
}@layer fulldev {
  .full.textarea-element {
    display: flex;
    position: relative;
    align-items: center;
    outline: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-1);
    background-color: var(--background);
    padding: var(--space-3);
    width: 100%;
    height: calc((var(--text-1) + 2 * var(--space-4)) * 2);
    min-height: calc((var(--text-1) + 2 * var(--space-4)) * 2);
    resize: vertical;
    color: var(--text);
    font-weight: var(--font-weight);
    font-size: var(--text-1);
    line-height: 1.25;
    font-family: var(--font-family);
  }
  .full.textarea-element::placeholder {
    color: var(--text);
  }
  .full.textarea-element:hover {
    outline: none;
  }
  .full.textarea-element:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--border);
  }
  .full.textarea-element:disabled {
    opacity: 50%;
    cursor: not-allowed;
    pointer-events: none;
  }
}@layer fulldev {
  .full.textarea {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
  }
  .full.textarea .icon {
    position: absolute;
    top: 50%;
    right: var(--space-3);
    transform: translateY(-50%);
  }
}@layer fulldev {
  .full.heading {
    margin: 0;
    max-width: calc(var(--space-4) * 36);
    scroll-margin: var(--space-5);
    color: var(--color-11);
    font-weight: var(--heading-font-weight);
    font-weight: 700;
    line-height: 1.1;
    font-family: var(--heading-font-family);
    letter-spacing: -0.025em;
    text-decoration: none;
  }
  .full.heading.level-1 {
    font-size: var(--text-7);
  }
  .full.heading.level-2 {
    font-size: var(--text-6);
  }
  .full.heading.level-3 {
    font-size: var(--text-5);
  }
  .full.heading.level-4 {
    font-size: var(--text-4);
  }
  .full.heading.level-5 {
    font-size: var(--text-3);
  }
  .full.heading.level-6 {
    font-size: var(--text-2);
  }
}@layer fulldev {
  .full.link {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    border: none;
    background: none;
    color: var(--text);
    font-weight: var(--font-weight);
    font-size: var(--text-2);
    font-family: var(--font-family);
    text-decoration-color: var(--border);
    white-space: nowrap;
  }
  .full.link:hover {
    color: var(--color-12);
  }
  .full.link.underline-auto {
    text-decoration: none;
  }
  .full.link.underline-auto:is(p > .full.link.underline-auto) {
    text-decoration: underline;
  }
  .full.link.underline-always {
    text-decoration: underline;
  }
  .full.link.underline-hover {
    text-decoration: none;
  }
  .full.link.underline-hover:hover {
    text-decoration: underline;
  }
  .full.link.underline-none {
    text-decoration: none;
  }
}@layer fulldev {
  .full.list-item {
    align-items: center;
    max-width: calc(var(--space-4) * 36);
    color: var(--text);
    font-weight: var(--font-weight);
    font-size: var(--text-2);
    line-height: 1.625;
    font-family: var(--font-family);
  }
}@layer fulldev {
  .full.list {
    display: flex;
    flex-direction: column;
    padding-left: var(--space-5);
    color: var(--text);
    font-weight: var(--font-weight);
    font-size: var(--text-2);
    line-height: 1.625;
    font-family: var(--font-family);
    list-style-type: disc;
  }
}@layer fulldev {
  .full.paragraph {
    margin: 0;
    max-width: calc(var(--space-4) * 36);
    color: var(--text);
    font-weight: var(--font-weight);
    font-size: var(--text-2);
    line-height: 1.625;
    font-family: var(--font-family);
  }
}@layer fulldev {
  .full.tagline {
    margin: 0;
    max-width: calc(var(--space-4) * 36);
    color: var(--text);
    font-weight: var(--font-weight);
    font-size: var(--text-1);
    line-height: 1.25;
    font-family: var(--font-family);
  }
}@layer fulldev {
  .full.text {
    margin: 0;
    max-width: calc(var(--space-4) * 36);
    color: var(--text, var(--color-11));
    font-weight: var(--font-weight);
    font-size: var(--text-2);
    line-height: 1.625;
    font-family: var(--font-family);
  }
}@layer fulldev {
  .full.body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    background: var(--background);
    padding: 0;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    min-height: 100vh;
    color: var(--text);
    font-size: var(--text-2);
    font-family: var(--font-family);
  }
}@layer fulldev {
  .full.main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
}@layer fulldev {
  .full.nav {
    margin-left: auto;
    width: max-content;
  }
  .full.nav.align-start {
    align-items: flex-start;
    text-align: left;
  }
  .full.nav.align-center {
    align-items: center;
  }
  .full.nav.align-end {
    align-items: flex-end;
  }
}@layer fulldev {
  .full.form {
    display: flex;
    width: 100%;
    max-width: calc(var(--space-4) * 36);
  }
}.full.prose {
  color: var(--text);
  color: var(--color-11);
  font-weight: var(--font-weight);
  font-size: var(--text-2);
  line-height: 1.7;
  font-family: var(--font-family);
}
.full.prose h1,
.full.prose h2,
.full.prose h3,
.full.prose h4,
.full.prose h5,
.full.prose h6 {
  color: var(--color-12);
  line-height: 1.2;
}
.full.prose h1 {
  font-size: var(--text-7);
}
.full.prose h2 {
  font-size: var(--text-6);
}
.full.prose h3 {
  font-size: var(--text-5);
}
.full.prose h4 {
  font-size: var(--text-4);
}
.full.prose h5 {
  font-size: var(--text-3);
}
.full.prose h6 {
  font-size: var(--text-2);
}
.full.prose .display {
  display: grid;
  width: 100%;
  max-width: none;
}
.full.prose .display table h1,
.full.prose .display table h2,
.full.prose .display table h3,
.full.prose .display table h4,
.full.prose .display table h5,
.full.prose .display table h6 {
  margin: var(--space-2) 0;
  font: 600 var(--text-2) "Saira";
}
.full.prose .display table h1 + p,
.full.prose .display table h2 + p,
.full.prose .display table h3 + p,
.full.prose .display table h4 + p,
.full.prose .display table h5 + p,
.full.prose .display table h6 + p {
  color: var(--hue11);
}
.full.prose table {
  margin: var(--space-5) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-1) !important;
  border-collapse: collapse;
  width: 100%;
}
.full.prose th {
  border-bottom: 1px solid var(--border);
  background: var(--raised-background) !important;
  color: var(--muted-foreground) !important;
  font-weight: 500 !important;
  font-size: var(--text-1) !important;
}
.full.prose td {
  color: var(--muted-foreground) !important;
}
.full.prose th,
.full.prose td {
  padding: var(--space-2);
}
.full.prose table a {
  color: var(--solid) !important;
  font-size: var(--text-1) !important;
  line-height: 1 !important;
  white-space: nowrap;
}
.full.prose h6 {
  margin: var(--space-2) 0;
  font-size: var(--text-2) !important;
}
.full.prose table a:hover {
  text-decoration: underline;
}@layer fulldev {}@layer fulldev {
  .full.card {
    position: relative;
    text-decoration: none;
  }
  .full.card[href] {
    cursor: pointer;
  }
  .full.card[href] > .full.image {
    transition: var(--transition);
  }
  .full.card[href]:hover > .full.image {
    opacity: 0.85;
  }
  .full.card.ratio-landscape {
    aspect-ratio: 4/3;
  }
  .full.card.ratio-square {
    aspect-ratio: 1/1;
  }
  .full.card.ratio-portrait {
    aspect-ratio: 3/4;
  }
  .full.card.frame-fill {
    border-radius: 0 !important;
  }
  .full.card.frame-panel {
    --inner-x: var(--space-7);
    --inner-y: var(--space-7);
    border: 1px solid var(--border);
    background-color: var(--background);
    padding: var(--inner-y) var(--inner-x);
    overflow: hidden;
  }
  .full.card.frame-panel[href]:hover {
    border: 1px solid var(--border-hover);
  }
  .full.card.frame-panel.radius-none {
    border-radius: 0;
  }
  .full.card.frame-panel.radius-auto {
    border-radius: var(--radius-2);
  }
}@layer fulldev {
  .full.footer {
    --screen: 1536px;
    --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
    margin: var(--outer-y) var(--outer-x);
    background: var(--background);
    padding: var(--inner-y) var(--inner-x);
    width: 100%;
    max-width: calc(100% - 2 * var(--outer-x));
  }
  .full.footer.frame-fill {
    border-top: 1px solid var(--border);
    --inner-x: var(--gutter);
    --outer-x: 0;
    --inner-y: var(--space-7);
    --outer-y: 0;
  }
  .full.footer.frame-panel {
    margin-top: var(--space-2);
    margin-right: var(--gutter);
    margin-left: var(--gutter);
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
    --inner-x: var(--gutter);
    --outer-x: 0;
    --inner-y: var(--space-7);
    --outer-y: 0;
  }
  .full.footer.frame-contain {
    --inner-x: max(4vw, var(--space-7));
    --outer-x: max(0px, calc(var(--gutter) - var(--inner-x)));
    --inner-y: var(--space-7);
    --outer-y: 0;
  }
  .full.footer.align-start {
    align-items: flex-start;
    text-align: left;
  }
  .full.footer.align-center {
    align-items: center;
  }
  .full.footer.align-end {
    align-items: flex-end;
  }
}:root {
  --header-height: calc(
    var(--text-1) + 2 * var(--space-4) + 2 * var(--space-3)
  );
}

@layer fulldev {
  .full.header {
    --screen: 1536px;
    --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
    display: flex;
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    margin: var(--outer-y) var(--outer-x);
    border-bottom: 1px solid var(--border);
    background-color: var(--background);
    padding: 0 var(--inner-x);
    width: 100%;
    max-width: calc(100% - 2 * var(--outer-x));
    height: var(--header-height);
  }
  .full.header.frame-fill {
    --inner-x: var(--gutter);
    --outer-y: 0;
  }
  .full.header.frame-contain {
    --inner-x: max(4vw, var(--space-3));
    --outer-x: max(0px, calc(var(--gutter) - var(--inner-x)));
    --outer-y: 0;
  }
  .full.header.frame-panel {
    --inner-x: min(4vw, var(--space-3));
    --outer-x: var(--gutter);
    --outer-y: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
  }
  .full.header.position-fixed {
    position: fixed;
  }
  .full.header.position-absolute {
    position: absolute;
  }
  .full.header.position-sticky {
    position: sticky;
  }
}@layer fulldev {
  .full.section {
    --screen: 1536px;
    --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
    position: relative;
    margin: var(--outer-y) var(--outer-x);
    background-color: var(--background);
    padding: var(--inner-y) var(--inner-x);
    width: 100%;
    max-width: calc(100% - 2 * var(--outer-x));
  }
  .full.section.frame-fill {
    --inner-x: var(--gutter);
    --outer-x: 0;
    --inner-y: var(--space-7);
    --outer-y: 0;
  }
  .full.section.frame-viewport {
    --inner-x: var(--gutter);
    --outer-x: 0;
    --inner-y: var(--space-7);
    --outer-y: 0;
    min-height: 100vh;
  }
  .full.section.frame-contain {
    --inner-x: max(4vw);
    --outer-x: max(0px, calc(var(--gutter) - var(--inner-x)));
    --inner-y: var(--space-7);
    --outer-y: 0;
  }
  .full.section.frame-panel {
    --inner-x: min(4vw, var(--space-7));
    --outer-x: var(--gutter);
    --inner-y: var(--space-7);
    --outer-y: var(--space-7);
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
    overflow: hidden;
  }
}@layer fulldev {
  .full.bento {
    display: grid;
    position: relative;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    width: 100%;
  }
  @media (min-width: 1024px) {
    .full.bento {
      grid-template-columns: repeat(5, 1fr);
    }
    .full.bento > * {
      grid-column: span 2;
    }
    .full.bento > *:nth-child(3n+2), .full.bento > *:nth-child(3n+3) {
      grid-column: span 3;
    }
  }
}@layer fulldev {
  .full.carousel {
    --column-width: calc(16 * var(--space-4));
    display: flex;
    position: relative;
    position: relative;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
  }
  .full.carousel > .full {
    flex-grow: 0;
    flex-shrink: 0;
    width: var(--column-width);
    scroll-snap-align: center;
  }
  .full.carousel.position-inset {
    margin-right: calc(var(--inner-x) * -1);
    margin-left: calc(var(--inner-x) * -1);
    padding-right: var(--inner-x);
    padding-left: var(--inner-x);
    width: calc(100% + var(--inner-x) * 2);
  }
}@layer fulldev {
  .full.column {
    display: flex;
    position: relative;
    flex-direction: column;
  }
  .full.column.align-start {
    align-items: flex-start;
    text-align: left;
  }
  .full.column.align-center {
    align-items: center;
    text-align: center;
  }
  .full.column.align-center > *:not(.align-center) > *:not(.align-center) {
    text-align: left;
  }
  .full.column.align-end {
    align-items: flex-end;
  }
  .full.column.space-auto > * + * {
    margin-top: var(--space-auto);
  }
  .full.column.space-auto > * + .carousel {
    margin-top: 0;
    padding-top: var(--space-auto);
  }
}@layer fulldev {
  .full.grid {
    --column-width: calc(15 * var(--space-4));
    display: grid;
    position: relative;
    grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
    gap: var(--space-4);
    width: 100%;
  }
}@layer fulldev {
  .full.masonry {
    --column-width: calc(16 * var(--space-4));
    --gap: var(--space-4);
    position: relative;
    column-gap: var(--gap);
    column-fill: balance;
    column-width: var(--column-width);
    column-count: 6;
    break-inside: avoid;
    width: 100%;
  }
  .full.masonry > .full + .full {
    break-inside: avoid;
    margin-top: var(--gap);
    margin-bottom: var(--gap);
  }
}@layer fulldev {
  .full.row {
    display: flex;
  }
  .full.row.align-start {
    align-items: flex-start;
    text-align: left;
  }
  .full.row.align-center {
    align-items: center;
  }
  .full.row.align-end {
    align-items: flex-end;
  }
  .full.row.space-auto > * + * {
    margin-left: var(--space-auto);
  }
}@layer fulldev {
  .full.split {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--space-6);
    width: 100%;
  }
  @media (max-width: 1023.9999px) {
    .full.split.space-auto > * + * {
      margin-top: var(--space-auto);
    }
  }
  @media (min-width: 1024px) {
    .full.split {
      grid-auto-columns: 1fr;
      grid-auto-flow: column;
    }
  }
  .full.split.align-start {
    align-items: flex-start;
    text-align: left;
  }
  .full.split.align-center {
    align-items: center;
  }
  .full.split.align-end {
    align-items: flex-end;
  }
}@layer fulldev {
  .full.spread {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-5);
    width: 100%;
  }
  .full.spread.align-start {
    align-items: flex-start;
    text-align: left;
  }
  .full.spread.align-center {
    align-items: center;
  }
  .full.spread.align-end {
    align-items: flex-end;
  }
}@layer fulldev {
  .full.wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: stretch;
    gap: var(--space-2);
  }
  .full.wrap.align-start {
    align-items: flex-start;
    text-align: left;
  }
  .full.wrap.align-center {
    align-items: center;
  }
  .full.wrap.align-end {
    align-items: flex-end;
  }
}.channel[data-astro-cid-pitsvg3f] {
  gap: var(--space-4);

  & * {
    margin: 0;
  }

  & .column {
    gap: var(--space-1);

    & * {
      margin: 0;
    }
  }
}
@layer fulldev {
  .full.price {
    margin: 0;
    max-width: calc(var(--space-4) * 36);
    color: var(--text, var(--color-11));
    font-weight: var(--font-weight);
    font-size: var(--text-5);
    line-height: 1.25;
    font-family: var(--font-family);
  }
}.channel[data-astro-cid-rrnrfebe] {
  gap: var(--space-4);

  & * {
    margin: 0;
  }

  & .column {
    gap: var(--space-1);

    & * {
      margin: 0;
    }
  }
}
footer[data-astro-cid-r3c3awwr] {
  & .button.meet-new-faces {
    display: none;
  }
}

html[slug*="voor-jongeren/meet-new-faces"] footer[data-astro-cid-r3c3awwr] {
  background-color: var(--brand-1);
  padding-top: 8px;
  padding-bottom: 8px;

  & .button {
    display: none;
  }

  & .button.meet-new-faces {
    display: inline-flex;
  }
}
@media (width <= 910px) {
  .logo-heading[data-astro-cid-zg327zsk] {
    display: none;
  }
}

.header[data-astro-cid-zg327zsk] {
  flex-wrap: nowrap;

  & .header-link {
    display: none;

    @media (width >= 768px) {
      display: flex;
    }
  }

  & .hamburger {
    @media (width >= 768px) {
      display: none;
    }
  }

  & .dropdown {
    display: none;
  }

  & .hamburger[aria-expanded="true"] ~ .dropdown[data-astro-cid-zg327zsk] {
    display: flex;
  }

  & .dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    gap: var(--space-4);
    box-shadow: 0 100px 100px #0003;
    border-bottom: 1px solid var(--color-6);
    background: var(--color-1);
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);

    @media (width >= 768px) {
      display: none !important;
    }
  }
}