/* ==========================================================================
   UTILITY CSS
   Gegenereerd door tools/generate-css.py — pas tokens hieronder gerust aan,
   maar zet eigen CSS in style.css (opnieuw genereren overschrijft dit bestand).

   - Classnamen in px, waarden in rem (16px = 1rem): .p--16 = 1rem
   - Ruimte in veelvouden van 8; tekst ook in 12 / 14 / 18 / 20
   - Responsive: t--{class} = tablet (≤1024px), m--{class} = mobiel (≤767px)
   - Kleuren: .bg--primary, .bg--primary--50 (= 50% opacity), .text--, .border--
   - Koppen schalen automatisch tussen mobiel en desktop (zie tokens)
   - Layout: <div class="section"><div class="wrapper">…</div></div>
   ========================================================================== */

/* ============================================
   1. TOKENS
   ============================================ */

:root {
    /* Kleuren: pas deze 5 aan, alle varianten volgen automatisch */
    --primary:   #D77900;
    --secondary: #232323;
    --dark:      #0A0A0B;
    --light:     #F3F3F3;
    --muted:     #AAAAAA;

    --white: #FFFFFF;
    --black: #000000;
    --gradient-primary: linear-gradient(135deg, #E47708 0%, #BB4617 100%);

    /* Lettertypes (laden in inc/enqueue.php) */
    --font-heading: "acumin-pro-extra-condensed", sans-serif;
    --font-body:    "Inter", sans-serif;
    --font-accent:  "Sometype Mono", monospace;

    /* Koppen: stijl */
    --heading-weight: 700;
    --heading-transform: uppercase;
    --heading-tracking: -0.02em;

    /* Koppen: desktopgrootte in px + regelhoogte. Mobiel wordt berekend met
       --fluid-ratio, of vul zelf een mobiele waarde in, bv. --h1-mobile: 40; */
    --display: 120; --display-leading: 0.85;
    --h1: 64;       --h1-leading: 0.9;
    --h2: 64;       --h2-leading: 0.9;
    --h3: 32;       --h3-leading: 1;
    --h4: 24;       --h4-leading: 1.05;
    --h5: 20;       --h5-leading: 1.1;
    --h6: 16;       --h6-leading: 1.1;

    --fluid-ratio: 0.5;    /* 0 = alles 16px op mobiel, 1 = niet verkleinen */
    --fluid-min-vw: 375;   /* viewport (px) waarop de mobiele grootte geldt */
    --fluid-max-vw: 1728;  /* viewport (px) waarop de desktopgrootte geldt (breedte Figma-design) */

    /* Layout: .section (zijmarge) > .wrapper (max-breedte + ruimte boven/onder) */
    --section-x: 5vw;
    --wrapper-max: 1800px;  /* 100% = niet boxed, volle breedte */
    --section-y: 8rem;      /* 128 */
    --section-y-sm: 5rem;   /* 80 */
    --header-height: 0px;   /* hoogte van een vaste header, voor h--screen--header */
}

@media (max-width: 1024px) {
    :root {
        --section-y: 6rem;      /* 96 */
        --section-y-sm: 4rem;   /* 64 */
    }
}

@media (max-width: 767px) {
    :root {
        --section-y: 4rem;      /* 64 */
        --section-y-sm: 3rem;   /* 48 */
    }
}

/* ============================================
   2. BASE
   ============================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

/* Zichtbare focus voor toetsenbordgebruikers */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Geen animaties voor bezoekers met "verminder beweging" aan */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   3. KOPPEN (VLOEIEND)
   ============================================ */

h1, h2, h3, h4, h5, h6,
.display, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    font-weight: var(--heading-weight);
    letter-spacing: var(--heading-tracking);
    text-transform: var(--heading-transform);
    font-size: clamp(
        calc(var(--fs-min) / 16 * 1rem),
        calc(var(--fs-min) / 16 * 1rem + (var(--fs) - var(--fs-min)) * (100vw - var(--fluid-min-vw) * 1px) / (var(--fluid-max-vw) - var(--fluid-min-vw))),
        calc(var(--fs) / 16 * 1rem)
    );
}
.display { --fs: var(--display); --fs-min: var(--display-mobile, calc(16 + (var(--display) - 16) * var(--fluid-ratio))); line-height: var(--display-leading); }
h1, .h1 { --fs: var(--h1); --fs-min: var(--h1-mobile, calc(16 + (var(--h1) - 16) * var(--fluid-ratio))); line-height: var(--h1-leading); }
h2, .h2 { --fs: var(--h2); --fs-min: var(--h2-mobile, calc(16 + (var(--h2) - 16) * var(--fluid-ratio))); line-height: var(--h2-leading); }
h3, .h3 { --fs: var(--h3); --fs-min: var(--h3-mobile, calc(16 + (var(--h3) - 16) * var(--fluid-ratio))); line-height: var(--h3-leading); }
h4, .h4 { --fs: var(--h4); --fs-min: var(--h4-mobile, calc(16 + (var(--h4) - 16) * var(--fluid-ratio))); line-height: var(--h4-leading); }
h5, .h5 { --fs: var(--h5); --fs-min: var(--h5-mobile, calc(16 + (var(--h5) - 16) * var(--fluid-ratio))); line-height: var(--h5-leading); }
h6, .h6 { --fs: var(--h6); --fs-min: var(--h6-mobile, calc(16 + (var(--h6) - 16) * var(--fluid-ratio))); line-height: var(--h6-leading); }

/* ============================================
   4. LAYOUT
   ============================================ */

.section {
    display: flex;
    justify-content: center;
    padding-inline: var(--section-x);
}

.wrapper {
    width: 100%;
    max-width: var(--wrapper-max);
    padding-block: var(--section-y);
}

.wrapper--sm { padding-block: var(--section-y-sm); }
/* Smallere wrapper, bv. <div class="wrapper wrapper--1088"> */
.wrapper--640 { --wrapper-max: 40rem; }
.wrapper--800 { --wrapper-max: 50rem; }
.wrapper--1088 { --wrapper-max: 68rem; }
.wrapper--1280 { --wrapper-max: 80rem; }


/* Laat een volle-breedte element (bv. slider) uitlijnen met de wrapper */
.pl--wrapper { padding-left: max(var(--section-x), calc((100% - var(--wrapper-max)) / 2)); }
.pr--wrapper { padding-right: max(var(--section-x), calc((100% - var(--wrapper-max)) / 2)); }

/* Tekst uit de WordPress-editor: <div class="content"><?php the_content(); ?></div> */
.content > * { margin-block: 0; }
.content > * + * { margin-top: 1.5rem; }
.content > :is(h2, h3, h4, h5, h6) { margin-top: 3rem; }
.content > :is(h2, h3, h4, h5, h6) + * { margin-top: 1rem; }
.content > :first-child { margin-top: 0; }
.content a { color: var(--primary); text-decoration: underline; text-underline-offset: 0.15em; }
.content a:hover { text-decoration: none; }
.content :is(ul, ol) { padding-left: 1.25em; }
.content li + li { margin-top: 0.5em; }
.content :is(img, video) { max-width: 100%; height: auto; }
.content figure { margin-inline: 0; }
.content figcaption { margin-top: 0.5em; font-size: 0.875rem; color: var(--muted); }
.content blockquote { margin-inline: 0; padding-left: 1.5rem; border-left: 2px solid var(--primary); font-size: 1.25rem; }
.content hr { border: 0; border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.content table { width: 100%; border-collapse: collapse; }
.content :is(th, td) { padding: 0.5rem 0.75rem; border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); text-align: left; }

/* Parallax */
.parallax-section {
    position: relative;
    overflow: hidden;
}

.parallax-section .parallax-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 130% !important;
    object-fit: cover;
    will-change: transform;
}

/* Toegankelijkheid */
.sr-only,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ============================================
   4b. LIST STYLES
   ============================================ */
.list--none { list-style: none; padding-left: 0; }
.list--disc { list-style-type: disc; }
.list--decimal { list-style-type: decimal; }
.list--inside { list-style-position: inside; }
.list--outside { list-style-position: outside; }
.list--gap--8 li + li { margin-top: 0.5rem; }
.list--gap--16 li + li { margin-top: 1rem; }
.list--gap--24 li + li { margin-top: 1.5rem; }

/* ============================================
   5. SPACING - MARGIN
   ============================================ */
.m--0 { margin: 0; }
.m--8 { margin: 0.5rem; }
.m--16 { margin: 1rem; }
.m--24 { margin: 1.5rem; }
.m--32 { margin: 2rem; }
.m--40 { margin: 2.5rem; }
.m--48 { margin: 3rem; }
.m--56 { margin: 3.5rem; }
.m--64 { margin: 4rem; }
.m--72 { margin: 4.5rem; }
.m--80 { margin: 5rem; }
.m--96 { margin: 6rem; }
.m--112 { margin: 7rem; }
.m--128 { margin: 8rem; }
.m--160 { margin: 10rem; }
.m--192 { margin: 12rem; }
.m--224 { margin: 14rem; }
.m--256 { margin: 16rem; }
.m--auto { margin: auto; }

.mt--0 { margin-top: 0; }
.mt--8 { margin-top: 0.5rem; }
.mt--16 { margin-top: 1rem; }
.mt--24 { margin-top: 1.5rem; }
.mt--32 { margin-top: 2rem; }
.mt--40 { margin-top: 2.5rem; }
.mt--48 { margin-top: 3rem; }
.mt--56 { margin-top: 3.5rem; }
.mt--64 { margin-top: 4rem; }
.mt--72 { margin-top: 4.5rem; }
.mt--80 { margin-top: 5rem; }
.mt--96 { margin-top: 6rem; }
.mt--112 { margin-top: 7rem; }
.mt--128 { margin-top: 8rem; }
.mt--160 { margin-top: 10rem; }
.mt--192 { margin-top: 12rem; }
.mt--224 { margin-top: 14rem; }
.mt--256 { margin-top: 16rem; }
.mt--auto { margin-top: auto; }

.mr--0 { margin-right: 0; }
.mr--8 { margin-right: 0.5rem; }
.mr--16 { margin-right: 1rem; }
.mr--24 { margin-right: 1.5rem; }
.mr--32 { margin-right: 2rem; }
.mr--40 { margin-right: 2.5rem; }
.mr--48 { margin-right: 3rem; }
.mr--56 { margin-right: 3.5rem; }
.mr--64 { margin-right: 4rem; }
.mr--72 { margin-right: 4.5rem; }
.mr--80 { margin-right: 5rem; }
.mr--96 { margin-right: 6rem; }
.mr--112 { margin-right: 7rem; }
.mr--128 { margin-right: 8rem; }
.mr--160 { margin-right: 10rem; }
.mr--192 { margin-right: 12rem; }
.mr--224 { margin-right: 14rem; }
.mr--256 { margin-right: 16rem; }
.mr--auto { margin-right: auto; }

.mb--0 { margin-bottom: 0; }
.mb--8 { margin-bottom: 0.5rem; }
.mb--16 { margin-bottom: 1rem; }
.mb--24 { margin-bottom: 1.5rem; }
.mb--32 { margin-bottom: 2rem; }
.mb--40 { margin-bottom: 2.5rem; }
.mb--48 { margin-bottom: 3rem; }
.mb--56 { margin-bottom: 3.5rem; }
.mb--64 { margin-bottom: 4rem; }
.mb--72 { margin-bottom: 4.5rem; }
.mb--80 { margin-bottom: 5rem; }
.mb--96 { margin-bottom: 6rem; }
.mb--112 { margin-bottom: 7rem; }
.mb--128 { margin-bottom: 8rem; }
.mb--160 { margin-bottom: 10rem; }
.mb--192 { margin-bottom: 12rem; }
.mb--224 { margin-bottom: 14rem; }
.mb--256 { margin-bottom: 16rem; }
.mb--auto { margin-bottom: auto; }

.ml--0 { margin-left: 0; }
.ml--8 { margin-left: 0.5rem; }
.ml--16 { margin-left: 1rem; }
.ml--24 { margin-left: 1.5rem; }
.ml--32 { margin-left: 2rem; }
.ml--40 { margin-left: 2.5rem; }
.ml--48 { margin-left: 3rem; }
.ml--56 { margin-left: 3.5rem; }
.ml--64 { margin-left: 4rem; }
.ml--72 { margin-left: 4.5rem; }
.ml--80 { margin-left: 5rem; }
.ml--96 { margin-left: 6rem; }
.ml--112 { margin-left: 7rem; }
.ml--128 { margin-left: 8rem; }
.ml--160 { margin-left: 10rem; }
.ml--192 { margin-left: 12rem; }
.ml--224 { margin-left: 14rem; }
.ml--256 { margin-left: 16rem; }
.ml--auto { margin-left: auto; }

.mx--0 { margin-inline: 0; }
.mx--8 { margin-inline: 0.5rem; }
.mx--16 { margin-inline: 1rem; }
.mx--24 { margin-inline: 1.5rem; }
.mx--32 { margin-inline: 2rem; }
.mx--40 { margin-inline: 2.5rem; }
.mx--48 { margin-inline: 3rem; }
.mx--56 { margin-inline: 3.5rem; }
.mx--64 { margin-inline: 4rem; }
.mx--72 { margin-inline: 4.5rem; }
.mx--80 { margin-inline: 5rem; }
.mx--96 { margin-inline: 6rem; }
.mx--112 { margin-inline: 7rem; }
.mx--128 { margin-inline: 8rem; }
.mx--160 { margin-inline: 10rem; }
.mx--192 { margin-inline: 12rem; }
.mx--224 { margin-inline: 14rem; }
.mx--256 { margin-inline: 16rem; }
.mx--auto { margin-inline: auto; }

.my--0 { margin-block: 0; }
.my--8 { margin-block: 0.5rem; }
.my--16 { margin-block: 1rem; }
.my--24 { margin-block: 1.5rem; }
.my--32 { margin-block: 2rem; }
.my--40 { margin-block: 2.5rem; }
.my--48 { margin-block: 3rem; }
.my--56 { margin-block: 3.5rem; }
.my--64 { margin-block: 4rem; }
.my--72 { margin-block: 4.5rem; }
.my--80 { margin-block: 5rem; }
.my--96 { margin-block: 6rem; }
.my--112 { margin-block: 7rem; }
.my--128 { margin-block: 8rem; }
.my--160 { margin-block: 10rem; }
.my--192 { margin-block: 12rem; }
.my--224 { margin-block: 14rem; }
.my--256 { margin-block: 16rem; }
.my--auto { margin-block: auto; }

/* ============================================
   6. SPACING - PADDING
   ============================================ */
.p--0 { padding: 0; }
.p--8 { padding: 0.5rem; }
.p--16 { padding: 1rem; }
.p--24 { padding: 1.5rem; }
.p--32 { padding: 2rem; }
.p--40 { padding: 2.5rem; }
.p--48 { padding: 3rem; }
.p--56 { padding: 3.5rem; }
.p--64 { padding: 4rem; }
.p--72 { padding: 4.5rem; }
.p--80 { padding: 5rem; }
.p--96 { padding: 6rem; }
.p--112 { padding: 7rem; }
.p--128 { padding: 8rem; }
.p--160 { padding: 10rem; }
.p--192 { padding: 12rem; }
.p--224 { padding: 14rem; }
.p--256 { padding: 16rem; }

.pt--0 { padding-top: 0; }
.pt--8 { padding-top: 0.5rem; }
.pt--16 { padding-top: 1rem; }
.pt--24 { padding-top: 1.5rem; }
.pt--32 { padding-top: 2rem; }
.pt--40 { padding-top: 2.5rem; }
.pt--48 { padding-top: 3rem; }
.pt--56 { padding-top: 3.5rem; }
.pt--64 { padding-top: 4rem; }
.pt--72 { padding-top: 4.5rem; }
.pt--80 { padding-top: 5rem; }
.pt--96 { padding-top: 6rem; }
.pt--112 { padding-top: 7rem; }
.pt--128 { padding-top: 8rem; }
.pt--160 { padding-top: 10rem; }
.pt--192 { padding-top: 12rem; }
.pt--224 { padding-top: 14rem; }
.pt--256 { padding-top: 16rem; }

.pr--0 { padding-right: 0; }
.pr--8 { padding-right: 0.5rem; }
.pr--16 { padding-right: 1rem; }
.pr--24 { padding-right: 1.5rem; }
.pr--32 { padding-right: 2rem; }
.pr--40 { padding-right: 2.5rem; }
.pr--48 { padding-right: 3rem; }
.pr--56 { padding-right: 3.5rem; }
.pr--64 { padding-right: 4rem; }
.pr--72 { padding-right: 4.5rem; }
.pr--80 { padding-right: 5rem; }
.pr--96 { padding-right: 6rem; }
.pr--112 { padding-right: 7rem; }
.pr--128 { padding-right: 8rem; }
.pr--160 { padding-right: 10rem; }
.pr--192 { padding-right: 12rem; }
.pr--224 { padding-right: 14rem; }
.pr--256 { padding-right: 16rem; }

.pb--0 { padding-bottom: 0; }
.pb--8 { padding-bottom: 0.5rem; }
.pb--16 { padding-bottom: 1rem; }
.pb--24 { padding-bottom: 1.5rem; }
.pb--32 { padding-bottom: 2rem; }
.pb--40 { padding-bottom: 2.5rem; }
.pb--48 { padding-bottom: 3rem; }
.pb--56 { padding-bottom: 3.5rem; }
.pb--64 { padding-bottom: 4rem; }
.pb--72 { padding-bottom: 4.5rem; }
.pb--80 { padding-bottom: 5rem; }
.pb--96 { padding-bottom: 6rem; }
.pb--112 { padding-bottom: 7rem; }
.pb--128 { padding-bottom: 8rem; }
.pb--160 { padding-bottom: 10rem; }
.pb--192 { padding-bottom: 12rem; }
.pb--224 { padding-bottom: 14rem; }
.pb--256 { padding-bottom: 16rem; }

.pl--0 { padding-left: 0; }
.pl--8 { padding-left: 0.5rem; }
.pl--16 { padding-left: 1rem; }
.pl--24 { padding-left: 1.5rem; }
.pl--32 { padding-left: 2rem; }
.pl--40 { padding-left: 2.5rem; }
.pl--48 { padding-left: 3rem; }
.pl--56 { padding-left: 3.5rem; }
.pl--64 { padding-left: 4rem; }
.pl--72 { padding-left: 4.5rem; }
.pl--80 { padding-left: 5rem; }
.pl--96 { padding-left: 6rem; }
.pl--112 { padding-left: 7rem; }
.pl--128 { padding-left: 8rem; }
.pl--160 { padding-left: 10rem; }
.pl--192 { padding-left: 12rem; }
.pl--224 { padding-left: 14rem; }
.pl--256 { padding-left: 16rem; }

.px--0 { padding-inline: 0; }
.px--8 { padding-inline: 0.5rem; }
.px--16 { padding-inline: 1rem; }
.px--24 { padding-inline: 1.5rem; }
.px--32 { padding-inline: 2rem; }
.px--40 { padding-inline: 2.5rem; }
.px--48 { padding-inline: 3rem; }
.px--56 { padding-inline: 3.5rem; }
.px--64 { padding-inline: 4rem; }
.px--72 { padding-inline: 4.5rem; }
.px--80 { padding-inline: 5rem; }
.px--96 { padding-inline: 6rem; }
.px--112 { padding-inline: 7rem; }
.px--128 { padding-inline: 8rem; }
.px--160 { padding-inline: 10rem; }
.px--192 { padding-inline: 12rem; }
.px--224 { padding-inline: 14rem; }
.px--256 { padding-inline: 16rem; }

.py--0 { padding-block: 0; }
.py--8 { padding-block: 0.5rem; }
.py--16 { padding-block: 1rem; }
.py--24 { padding-block: 1.5rem; }
.py--32 { padding-block: 2rem; }
.py--40 { padding-block: 2.5rem; }
.py--48 { padding-block: 3rem; }
.py--56 { padding-block: 3.5rem; }
.py--64 { padding-block: 4rem; }
.py--72 { padding-block: 4.5rem; }
.py--80 { padding-block: 5rem; }
.py--96 { padding-block: 6rem; }
.py--112 { padding-block: 7rem; }
.py--128 { padding-block: 8rem; }
.py--160 { padding-block: 10rem; }
.py--192 { padding-block: 12rem; }
.py--224 { padding-block: 14rem; }
.py--256 { padding-block: 16rem; }

/* ============================================
   7. SPACING - GAP
   ============================================ */
.gap--0 { gap: 0; }
.gap--8 { gap: 0.5rem; }
.gap--16 { gap: 1rem; }
.gap--24 { gap: 1.5rem; }
.gap--32 { gap: 2rem; }
.gap--40 { gap: 2.5rem; }
.gap--48 { gap: 3rem; }
.gap--56 { gap: 3.5rem; }
.gap--64 { gap: 4rem; }
.gap--72 { gap: 4.5rem; }
.gap--80 { gap: 5rem; }
.gap--96 { gap: 6rem; }
.gap--112 { gap: 7rem; }
.gap--128 { gap: 8rem; }
.gap--160 { gap: 10rem; }
.gap--192 { gap: 12rem; }
.gap--224 { gap: 14rem; }
.gap--256 { gap: 16rem; }

.gap-x--0 { column-gap: 0; }
.gap-x--8 { column-gap: 0.5rem; }
.gap-x--16 { column-gap: 1rem; }
.gap-x--24 { column-gap: 1.5rem; }
.gap-x--32 { column-gap: 2rem; }
.gap-x--40 { column-gap: 2.5rem; }
.gap-x--48 { column-gap: 3rem; }
.gap-x--56 { column-gap: 3.5rem; }
.gap-x--64 { column-gap: 4rem; }
.gap-x--72 { column-gap: 4.5rem; }
.gap-x--80 { column-gap: 5rem; }
.gap-x--96 { column-gap: 6rem; }
.gap-x--112 { column-gap: 7rem; }
.gap-x--128 { column-gap: 8rem; }
.gap-x--160 { column-gap: 10rem; }
.gap-x--192 { column-gap: 12rem; }
.gap-x--224 { column-gap: 14rem; }
.gap-x--256 { column-gap: 16rem; }

.gap-y--0 { row-gap: 0; }
.gap-y--8 { row-gap: 0.5rem; }
.gap-y--16 { row-gap: 1rem; }
.gap-y--24 { row-gap: 1.5rem; }
.gap-y--32 { row-gap: 2rem; }
.gap-y--40 { row-gap: 2.5rem; }
.gap-y--48 { row-gap: 3rem; }
.gap-y--56 { row-gap: 3.5rem; }
.gap-y--64 { row-gap: 4rem; }
.gap-y--72 { row-gap: 4.5rem; }
.gap-y--80 { row-gap: 5rem; }
.gap-y--96 { row-gap: 6rem; }
.gap-y--112 { row-gap: 7rem; }
.gap-y--128 { row-gap: 8rem; }
.gap-y--160 { row-gap: 10rem; }
.gap-y--192 { row-gap: 12rem; }
.gap-y--224 { row-gap: 14rem; }
.gap-y--256 { row-gap: 16rem; }

/* ============================================
   8. TYPOGRAPHY - FONT SIZE
   ============================================ */
.text--8 { font-size: 0.5rem; }
.text--12 { font-size: 0.75rem; }
.text--14 { font-size: 0.875rem; }
.text--16 { font-size: 1rem; }
.text--18 { font-size: 1.125rem; }
.text--20 { font-size: 1.25rem; }
.text--24 { font-size: 1.5rem; }
.text--32 { font-size: 2rem; }
.text--40 { font-size: 2.5rem; }
.text--48 { font-size: 3rem; }
.text--56 { font-size: 3.5rem; }
.text--64 { font-size: 4rem; }
.text--72 { font-size: 4.5rem; }
.text--80 { font-size: 5rem; }
.text--96 { font-size: 6rem; }
.text--112 { font-size: 7rem; }
.text--128 { font-size: 8rem; }

/* ============================================
   9. TYPOGRAPHY - LINE HEIGHT
   ============================================ */
.leading--16 { line-height: 1rem; }
.leading--24 { line-height: 1.5rem; }
.leading--32 { line-height: 2rem; }
.leading--40 { line-height: 2.5rem; }
.leading--48 { line-height: 3rem; }
.leading--56 { line-height: 3.5rem; }
.leading--64 { line-height: 4rem; }
.leading--72 { line-height: 4.5rem; }
.leading--80 { line-height: 5rem; }
.leading--96 { line-height: 6rem; }
.leading--none { line-height: 1; }
.leading--tight { line-height: 1.25; }
.leading--snug { line-height: 1.375; }
.leading--normal { line-height: 1.5; }
.leading--relaxed { line-height: 1.625; }
.leading--loose { line-height: 2; }

/* ============================================
   10. TYPOGRAPHY - FONT FAMILY & WEIGHT
   ============================================ */
.font--heading { font-family: var(--font-heading); }
.font--body { font-family: var(--font-body); }
.font--accent { font-family: var(--font-accent); }

.font--100 { font-weight: 100; }
.font--200 { font-weight: 200; }
.font--300 { font-weight: 300; }
.font--400 { font-weight: 400; }
.font--500 { font-weight: 500; }
.font--600 { font-weight: 600; }
.font--700 { font-weight: 700; }
.font--800 { font-weight: 800; }
.font--900 { font-weight: 900; }

/* ============================================
   11. TYPOGRAPHY - ALIGN, DECORATION, TRANSFORM
   ============================================ */
.text--left { text-align: left; }
.text--center { text-align: center; }
.text--right { text-align: right; }
.text--justify { text-align: justify; }

.underline { text-decoration: underline; }
.line--through { text-decoration: line-through; }
.no--underline { text-decoration: none; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal--case { text-transform: none; }

.text--balance { text-wrap: balance; }
.text--pretty { text-wrap: pretty; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.line-clamp--1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
.line-clamp--2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.line-clamp--3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.line-clamp--4 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }

.tracking--tight { letter-spacing: -0.02em; }
.tracking--normal { letter-spacing: 0; }
.tracking--wide { letter-spacing: 0.05em; }
.tracking--wider { letter-spacing: 0.1em; }

/* ============================================
   12. DISPLAY
   ============================================ */
.block { display: block; }
.inline--block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline--flex { display: inline-flex; }
.grid { display: grid; }
.inline--grid { display: inline-grid; }
.hidden { display: none; }

/* ============================================
   13. FLEXBOX
   ============================================ */
.flex--row { flex-direction: row; }
.flex--row-reverse { flex-direction: row-reverse; }
.flex--col { flex-direction: column; }
.flex--col-reverse { flex-direction: column-reverse; }
.flex--wrap { flex-wrap: wrap; }
.flex--nowrap { flex-wrap: nowrap; }
.flex--wrap-reverse { flex-wrap: wrap-reverse; }

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

.items--start { align-items: flex-start; }
.items--end { align-items: flex-end; }
.items--center { align-items: center; }
.items--baseline { align-items: baseline; }
.items--stretch { align-items: stretch; }

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

.self--auto { align-self: auto; }
.self--start { align-self: flex-start; }
.self--end { align-self: flex-end; }
.self--center { align-self: center; }
.self--stretch { align-self: stretch; }
.self--baseline { align-self: baseline; }

.flex--1 { flex: 1 1 0%; }
.flex--auto { flex: 1 1 auto; }
.flex--initial { flex: 0 1 auto; }
.flex--none { flex: none; }
.basis--10pct { flex: 1 1 10%; }
.basis--20pct { flex: 1 1 20%; }
.basis--25pct { flex: 1 1 25%; }
.basis--30pct { flex: 1 1 30%; }
.basis--33pct { flex: 1 1 33.3333%; }
.basis--40pct { flex: 1 1 40%; }
.basis--50pct { flex: 1 1 50%; }
.basis--60pct { flex: 1 1 60%; }
.basis--66pct { flex: 1 1 66.6667%; }
.basis--70pct { flex: 1 1 70%; }
.basis--75pct { flex: 1 1 75%; }
.basis--80pct { flex: 1 1 80%; }
.basis--90pct { flex: 1 1 90%; }
.basis--100pct { flex: 1 1 100%; }

.order--first { order: -1; }
.order--last { order: 999; }
.order--0 { order: 0; }
.order--1 { order: 1; }
.order--2 { order: 2; }
.order--3 { order: 3; }
.columns--1 { column-count: 1; }
.columns--2 { column-count: 2; }
.columns--3 { column-count: 3; }

/* ============================================
   13b. GRID
   ============================================ */
.cols--1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cols--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cols--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cols--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.cols--9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.cols--10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.cols--11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.cols--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.col-span--1 { grid-column: span 1 / span 1; }
.col-span--2 { grid-column: span 2 / span 2; }
.col-span--3 { grid-column: span 3 / span 3; }
.col-span--4 { grid-column: span 4 / span 4; }
.col-span--5 { grid-column: span 5 / span 5; }
.col-span--6 { grid-column: span 6 / span 6; }
.col-span--7 { grid-column: span 7 / span 7; }
.col-span--8 { grid-column: span 8 / span 8; }
.col-span--9 { grid-column: span 9 / span 9; }
.col-span--10 { grid-column: span 10 / span 10; }
.col-span--11 { grid-column: span 11 / span 11; }
.col-span--12 { grid-column: span 12 / span 12; }
.col-span--full { grid-column: 1 / -1; }

.grid--auto-160 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }
.grid--auto-200 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr)); }
.grid--auto-240 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.grid--auto-280 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr)); }
.grid--auto-320 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.grid--auto-360 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22.5rem, 100%), 1fr)); }
.grid--auto-400 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr)); }

/* ============================================
   14. POSITION
   ============================================ */
.static { position: static; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }

.top--0 { top: 0; }
.top--8 { top: 0.5rem; }
.top--16 { top: 1rem; }
.top--24 { top: 1.5rem; }
.top--32 { top: 2rem; }
.top--40 { top: 2.5rem; }
.top--48 { top: 3rem; }
.top--56 { top: 3.5rem; }
.top--64 { top: 4rem; }
.top--80 { top: 5rem; }
.top--96 { top: 6rem; }
.top--128 { top: 8rem; }

.right--0 { right: 0; }
.right--8 { right: 0.5rem; }
.right--16 { right: 1rem; }
.right--24 { right: 1.5rem; }
.right--32 { right: 2rem; }
.right--40 { right: 2.5rem; }
.right--48 { right: 3rem; }
.right--56 { right: 3.5rem; }
.right--64 { right: 4rem; }
.right--80 { right: 5rem; }
.right--96 { right: 6rem; }
.right--128 { right: 8rem; }

.bottom--0 { bottom: 0; }
.bottom--8 { bottom: 0.5rem; }
.bottom--16 { bottom: 1rem; }
.bottom--24 { bottom: 1.5rem; }
.bottom--32 { bottom: 2rem; }
.bottom--40 { bottom: 2.5rem; }
.bottom--48 { bottom: 3rem; }
.bottom--56 { bottom: 3.5rem; }
.bottom--64 { bottom: 4rem; }
.bottom--80 { bottom: 5rem; }
.bottom--96 { bottom: 6rem; }
.bottom--128 { bottom: 8rem; }

.left--0 { left: 0; }
.left--8 { left: 0.5rem; }
.left--16 { left: 1rem; }
.left--24 { left: 1.5rem; }
.left--32 { left: 2rem; }
.left--40 { left: 2.5rem; }
.left--48 { left: 3rem; }
.left--56 { left: 3.5rem; }
.left--64 { left: 4rem; }
.left--80 { left: 5rem; }
.left--96 { left: 6rem; }
.left--128 { left: 8rem; }

.inset--0 { inset: 0; }
.inset--8 { inset: 0.5rem; }
.inset--16 { inset: 1rem; }
.inset--24 { inset: 1.5rem; }
.inset--32 { inset: 2rem; }

/* ============================================
   15. WIDTH & HEIGHT
   ============================================ */
.w--auto { width: auto; }
.w--full { width: 100%; }
.w--screen { width: 100vw; }
.w--min { width: min-content; }
.w--max { width: max-content; }
.w--fit { width: fit-content; }
.w--10pct { width: 10%; }
.w--20pct { width: 20%; }
.w--25pct { width: 25%; }
.w--30pct { width: 30%; }
.w--33pct { width: 33.3333%; }
.w--40pct { width: 40%; }
.w--50pct { width: 50%; }
.w--60pct { width: 60%; }
.w--66pct { width: 66.6667%; }
.w--70pct { width: 70%; }
.w--75pct { width: 75%; }
.w--80pct { width: 80%; }
.w--90pct { width: 90%; }
.w--100pct { width: 100%; }
.w--8 { width: 0.5rem; }
.w--16 { width: 1rem; }
.w--24 { width: 1.5rem; }
.w--32 { width: 2rem; }
.w--40 { width: 2.5rem; }
.w--48 { width: 3rem; }
.w--56 { width: 3.5rem; }
.w--64 { width: 4rem; }
.w--72 { width: 4.5rem; }
.w--80 { width: 5rem; }
.w--96 { width: 6rem; }
.w--112 { width: 7rem; }
.w--128 { width: 8rem; }
.w--160 { width: 10rem; }
.w--192 { width: 12rem; }
.w--224 { width: 14rem; }
.w--256 { width: 16rem; }
.w--320 { width: 20rem; }
.w--384 { width: 24rem; }
.w--448 { width: 28rem; }
.w--512 { width: 32rem; }

.h--auto { height: auto; }
.h--full { height: 100%; }
.h--screen { height: 100vh; }
.h--screen--header { height: calc(100vh - var(--header-height, 0px)); }
.h--min { height: min-content; }
.h--max { height: max-content; }
.h--fit { height: fit-content; }
.h--40vh { height: 40vh; }
.h--50vh { height: 50vh; }
.h--60vh { height: 60vh; }
.h--70vh { height: 70vh; }
.h--80vh { height: 80vh; }
.h--8 { height: 0.5rem; }
.h--16 { height: 1rem; }
.h--24 { height: 1.5rem; }
.h--32 { height: 2rem; }
.h--40 { height: 2.5rem; }
.h--48 { height: 3rem; }
.h--56 { height: 3.5rem; }
.h--64 { height: 4rem; }
.h--72 { height: 4.5rem; }
.h--80 { height: 5rem; }
.h--96 { height: 6rem; }
.h--112 { height: 7rem; }
.h--128 { height: 8rem; }
.h--160 { height: 10rem; }
.h--192 { height: 12rem; }
.h--224 { height: 14rem; }
.h--256 { height: 16rem; }
.h--320 { height: 20rem; }
.h--384 { height: 24rem; }
.h--448 { height: 28rem; }
.h--512 { height: 32rem; }

.min-w--0 { min-width: 0; }
.min-w--full { min-width: 100%; }
.min-w--min { min-width: min-content; }
.min-w--max { min-width: max-content; }
.min-w--fit { min-width: fit-content; }
.min-h--0 { min-height: 0; }
.min-h--full { min-height: 100%; }
.min-h--screen { min-height: 100vh; }

.max-w--none { max-width: none; }
.max-w--full { max-width: 100%; }
.max-w--256 { max-width: 16rem; }
.max-w--320 { max-width: 20rem; }
.max-w--384 { max-width: 24rem; }
.max-w--448 { max-width: 28rem; }
.max-w--512 { max-width: 32rem; }
.max-w--640 { max-width: 40rem; }
.max-w--768 { max-width: 48rem; }
.max-w--1024 { max-width: 64rem; }
.max-w--1280 { max-width: 80rem; }
.max-w--1536 { max-width: 96rem; }

.max-h--none { max-height: none; }
.max-h--full { max-height: 100%; }
.max-h--screen { max-height: 100vh; }

.aspect--1-1 { aspect-ratio: 1 / 1; }
.aspect--4-3 { aspect-ratio: 4 / 3; }
.aspect--3-4 { aspect-ratio: 3 / 4; }
.aspect--3-2 { aspect-ratio: 3 / 2; }
.aspect--2-3 { aspect-ratio: 2 / 3; }
.aspect--16-9 { aspect-ratio: 16 / 9; }
.aspect--9-16 { aspect-ratio: 9 / 16; }
.aspect--21-9 { aspect-ratio: 21 / 9; }
.aspect--auto { aspect-ratio: auto; }

/* ============================================
   16. BORDER WIDTH & STYLE
   ============================================ */
.border--0 { border-width: 0; }
.border--1 { border-width: 1px; }
.border--2 { border-width: 2px; }

.border-t--0 { border-top-width: 0; }
.border-t--1 { border-top-width: 1px; }
.border-t--2 { border-top-width: 2px; }

.border-r--0 { border-right-width: 0; }
.border-r--1 { border-right-width: 1px; }
.border-r--2 { border-right-width: 2px; }

.border-b--0 { border-bottom-width: 0; }
.border-b--1 { border-bottom-width: 1px; }
.border-b--2 { border-bottom-width: 2px; }

.border-l--0 { border-left-width: 0; }
.border-l--1 { border-left-width: 1px; }
.border-l--2 { border-left-width: 2px; }

.border-x--0 { border-left-width: 0; border-right-width: 0; }
.border-x--1 { border-left-width: 1px; border-right-width: 1px; }
.border-x--2 { border-left-width: 2px; border-right-width: 2px; }

.border-y--0 { border-top-width: 0; border-bottom-width: 0; }
.border-y--1 { border-top-width: 1px; border-bottom-width: 1px; }
.border-y--2 { border-top-width: 2px; border-bottom-width: 2px; }

.border--solid { border-style: solid; }
.border--dashed { border-style: dashed; }
.border--dotted { border-style: dotted; }
.border--none { border-style: none; }

/* ============================================
   17. BORDER RADIUS
   ============================================ */
.rounded--0 { border-radius: 0; }
.rounded--8 { border-radius: 8px; }
.rounded--16 { border-radius: 16px; }
.rounded--24 { border-radius: 24px; }
.rounded--32 { border-radius: 32px; }
.rounded--40 { border-radius: 40px; }
.rounded--48 { border-radius: 48px; }
.rounded--full { border-radius: 9999px; }

.rounded-t--0 { border-top-left-radius: 0; border-top-right-radius: 0; }
.rounded-t--8 { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.rounded-t--16 { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.rounded-t--24 { border-top-left-radius: 24px; border-top-right-radius: 24px; }
.rounded-t--32 { border-top-left-radius: 32px; border-top-right-radius: 32px; }

.rounded-r--0 { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rounded-r--8 { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.rounded-r--16 { border-top-right-radius: 16px; border-bottom-right-radius: 16px; }
.rounded-r--24 { border-top-right-radius: 24px; border-bottom-right-radius: 24px; }
.rounded-r--32 { border-top-right-radius: 32px; border-bottom-right-radius: 32px; }

.rounded-b--0 { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rounded-b--8 { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.rounded-b--16 { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
.rounded-b--24 { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
.rounded-b--32 { border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; }

.rounded-l--0 { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rounded-l--8 { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.rounded-l--16 { border-top-left-radius: 16px; border-bottom-left-radius: 16px; }
.rounded-l--24 { border-top-left-radius: 24px; border-bottom-left-radius: 24px; }
.rounded-l--32 { border-top-left-radius: 32px; border-bottom-left-radius: 32px; }

.rounded-tl--0 { border-top-left-radius: 0; }
.rounded-tl--8 { border-top-left-radius: 8px; }
.rounded-tl--16 { border-top-left-radius: 16px; }
.rounded-tl--24 { border-top-left-radius: 24px; }
.rounded-tl--32 { border-top-left-radius: 32px; }

.rounded-tr--0 { border-top-right-radius: 0; }
.rounded-tr--8 { border-top-right-radius: 8px; }
.rounded-tr--16 { border-top-right-radius: 16px; }
.rounded-tr--24 { border-top-right-radius: 24px; }
.rounded-tr--32 { border-top-right-radius: 32px; }

.rounded-br--0 { border-bottom-right-radius: 0; }
.rounded-br--8 { border-bottom-right-radius: 8px; }
.rounded-br--16 { border-bottom-right-radius: 16px; }
.rounded-br--24 { border-bottom-right-radius: 24px; }
.rounded-br--32 { border-bottom-right-radius: 32px; }

.rounded-bl--0 { border-bottom-left-radius: 0; }
.rounded-bl--8 { border-bottom-left-radius: 8px; }
.rounded-bl--16 { border-bottom-left-radius: 16px; }
.rounded-bl--24 { border-bottom-left-radius: 24px; }
.rounded-bl--32 { border-bottom-left-radius: 32px; }

/* ============================================
   18. OBJECT FIT & POSITION
   ============================================ */
.object--contain { object-fit: contain; }
.object--cover { object-fit: cover; }
.object--fill { object-fit: fill; }
.object--none { object-fit: none; }
.object--scale-down { object-fit: scale-down; }

.object--bottom { object-position: bottom; }
.object--center { object-position: center; }
.object--left { object-position: left; }
.object--left-bottom { object-position: left bottom; }
.object--left-top { object-position: left top; }
.object--right { object-position: right; }
.object--right-bottom { object-position: right bottom; }
.object--right-top { object-position: right top; }
.object--top { object-position: top; }

/* ============================================
   19. OVERFLOW
   ============================================ */
.overflow--auto { overflow: auto; }
.overflow--hidden { overflow: hidden; }
.overflow--visible { overflow: visible; }
.overflow--scroll { overflow: scroll; }
.overflow--clip { overflow: clip; }

.overflow-x--auto { overflow-x: auto; }
.overflow-x--hidden { overflow-x: hidden; }
.overflow-x--visible { overflow-x: visible; }
.overflow-x--scroll { overflow-x: scroll; }
.overflow-x--clip { overflow-x: clip; }

.overflow-y--auto { overflow-y: auto; }
.overflow-y--hidden { overflow-y: hidden; }
.overflow-y--visible { overflow-y: visible; }
.overflow-y--scroll { overflow-y: scroll; }
.overflow-y--clip { overflow-y: clip; }

/* ============================================
   20. Z-INDEX
   ============================================ */
.z--0 { z-index: 0; }
.z--10 { z-index: 10; }
.z--20 { z-index: 20; }
.z--30 { z-index: 30; }
.z--40 { z-index: 40; }
.z--50 { z-index: 50; }
.z--100 { z-index: 100; }
.z--auto { z-index: auto; }

/* ============================================
   21. OPACITY
   ============================================ */
.opacity--0 { opacity: 0; }
.opacity--10 { opacity: 0.1; }
.opacity--20 { opacity: 0.2; }
.opacity--25 { opacity: 0.25; }
.opacity--30 { opacity: 0.3; }
.opacity--40 { opacity: 0.4; }
.opacity--50 { opacity: 0.5; }
.opacity--60 { opacity: 0.6; }
.opacity--70 { opacity: 0.7; }
.opacity--75 { opacity: 0.75; }
.opacity--80 { opacity: 0.8; }
.opacity--90 { opacity: 0.9; }
.opacity--100 { opacity: 1; }

/* ============================================
   21b. EFFECTS
   ============================================ */
.backdrop-blur--8 { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.backdrop-blur--16 { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.backdrop-blur--24 { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.backdrop-blur--32 { -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px); }

.transition { transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s; }
.transition--none { transition: none; }

/* ============================================
   22. INTERACTION
   ============================================ */
.cursor--auto { cursor: auto; }
.cursor--default { cursor: default; }
.cursor--pointer { cursor: pointer; }
.cursor--wait { cursor: wait; }
.cursor--text { cursor: text; }
.cursor--move { cursor: move; }
.cursor--help { cursor: help; }
.cursor--not-allowed { cursor: not-allowed; }
.cursor--none { cursor: none; }
.cursor--grab { cursor: grab; }
.cursor--grabbing { cursor: grabbing; }

.pointer--none { pointer-events: none; }
.pointer--auto { pointer-events: auto; }

.select--none { user-select: none; }
.select--text { user-select: text; }
.select--all { user-select: all; }
.select--auto { user-select: auto; }

/* ============================================
   23. COLORS - TEXT
   ============================================ */
.text--primary { color: var(--primary); }
.text--primary--5 { color: color-mix(in srgb, var(--primary) 5%, transparent); }
.text--primary--10 { color: color-mix(in srgb, var(--primary) 10%, transparent); }
.text--primary--20 { color: color-mix(in srgb, var(--primary) 20%, transparent); }
.text--primary--30 { color: color-mix(in srgb, var(--primary) 30%, transparent); }
.text--primary--40 { color: color-mix(in srgb, var(--primary) 40%, transparent); }
.text--primary--50 { color: color-mix(in srgb, var(--primary) 50%, transparent); }
.text--primary--60 { color: color-mix(in srgb, var(--primary) 60%, transparent); }
.text--primary--70 { color: color-mix(in srgb, var(--primary) 70%, transparent); }
.text--primary--80 { color: color-mix(in srgb, var(--primary) 80%, transparent); }
.text--primary--90 { color: color-mix(in srgb, var(--primary) 90%, transparent); }

.text--secondary { color: var(--secondary); }
.text--secondary--5 { color: color-mix(in srgb, var(--secondary) 5%, transparent); }
.text--secondary--10 { color: color-mix(in srgb, var(--secondary) 10%, transparent); }
.text--secondary--20 { color: color-mix(in srgb, var(--secondary) 20%, transparent); }
.text--secondary--30 { color: color-mix(in srgb, var(--secondary) 30%, transparent); }
.text--secondary--40 { color: color-mix(in srgb, var(--secondary) 40%, transparent); }
.text--secondary--50 { color: color-mix(in srgb, var(--secondary) 50%, transparent); }
.text--secondary--60 { color: color-mix(in srgb, var(--secondary) 60%, transparent); }
.text--secondary--70 { color: color-mix(in srgb, var(--secondary) 70%, transparent); }
.text--secondary--80 { color: color-mix(in srgb, var(--secondary) 80%, transparent); }
.text--secondary--90 { color: color-mix(in srgb, var(--secondary) 90%, transparent); }

.text--dark { color: var(--dark); }
.text--dark--5 { color: color-mix(in srgb, var(--dark) 5%, transparent); }
.text--dark--10 { color: color-mix(in srgb, var(--dark) 10%, transparent); }
.text--dark--20 { color: color-mix(in srgb, var(--dark) 20%, transparent); }
.text--dark--30 { color: color-mix(in srgb, var(--dark) 30%, transparent); }
.text--dark--40 { color: color-mix(in srgb, var(--dark) 40%, transparent); }
.text--dark--50 { color: color-mix(in srgb, var(--dark) 50%, transparent); }
.text--dark--60 { color: color-mix(in srgb, var(--dark) 60%, transparent); }
.text--dark--70 { color: color-mix(in srgb, var(--dark) 70%, transparent); }
.text--dark--80 { color: color-mix(in srgb, var(--dark) 80%, transparent); }
.text--dark--90 { color: color-mix(in srgb, var(--dark) 90%, transparent); }

.text--light { color: var(--light); }
.text--light--5 { color: color-mix(in srgb, var(--light) 5%, transparent); }
.text--light--10 { color: color-mix(in srgb, var(--light) 10%, transparent); }
.text--light--20 { color: color-mix(in srgb, var(--light) 20%, transparent); }
.text--light--30 { color: color-mix(in srgb, var(--light) 30%, transparent); }
.text--light--40 { color: color-mix(in srgb, var(--light) 40%, transparent); }
.text--light--50 { color: color-mix(in srgb, var(--light) 50%, transparent); }
.text--light--60 { color: color-mix(in srgb, var(--light) 60%, transparent); }
.text--light--70 { color: color-mix(in srgb, var(--light) 70%, transparent); }
.text--light--80 { color: color-mix(in srgb, var(--light) 80%, transparent); }
.text--light--90 { color: color-mix(in srgb, var(--light) 90%, transparent); }

.text--muted { color: var(--muted); }
.text--muted--5 { color: color-mix(in srgb, var(--muted) 5%, transparent); }
.text--muted--10 { color: color-mix(in srgb, var(--muted) 10%, transparent); }
.text--muted--20 { color: color-mix(in srgb, var(--muted) 20%, transparent); }
.text--muted--30 { color: color-mix(in srgb, var(--muted) 30%, transparent); }
.text--muted--40 { color: color-mix(in srgb, var(--muted) 40%, transparent); }
.text--muted--50 { color: color-mix(in srgb, var(--muted) 50%, transparent); }
.text--muted--60 { color: color-mix(in srgb, var(--muted) 60%, transparent); }
.text--muted--70 { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.text--muted--80 { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.text--muted--90 { color: color-mix(in srgb, var(--muted) 90%, transparent); }

.text--white { color: var(--white); }
.text--white--5 { color: color-mix(in srgb, var(--white) 5%, transparent); }
.text--white--10 { color: color-mix(in srgb, var(--white) 10%, transparent); }
.text--white--20 { color: color-mix(in srgb, var(--white) 20%, transparent); }
.text--white--30 { color: color-mix(in srgb, var(--white) 30%, transparent); }
.text--white--40 { color: color-mix(in srgb, var(--white) 40%, transparent); }
.text--white--50 { color: color-mix(in srgb, var(--white) 50%, transparent); }
.text--white--60 { color: color-mix(in srgb, var(--white) 60%, transparent); }
.text--white--70 { color: color-mix(in srgb, var(--white) 70%, transparent); }
.text--white--80 { color: color-mix(in srgb, var(--white) 80%, transparent); }
.text--white--90 { color: color-mix(in srgb, var(--white) 90%, transparent); }

.text--black { color: var(--black); }
.text--black--5 { color: color-mix(in srgb, var(--black) 5%, transparent); }
.text--black--10 { color: color-mix(in srgb, var(--black) 10%, transparent); }
.text--black--20 { color: color-mix(in srgb, var(--black) 20%, transparent); }
.text--black--30 { color: color-mix(in srgb, var(--black) 30%, transparent); }
.text--black--40 { color: color-mix(in srgb, var(--black) 40%, transparent); }
.text--black--50 { color: color-mix(in srgb, var(--black) 50%, transparent); }
.text--black--60 { color: color-mix(in srgb, var(--black) 60%, transparent); }
.text--black--70 { color: color-mix(in srgb, var(--black) 70%, transparent); }
.text--black--80 { color: color-mix(in srgb, var(--black) 80%, transparent); }
.text--black--90 { color: color-mix(in srgb, var(--black) 90%, transparent); }

.text--transparent { color: transparent; }

/* ============================================
   24. COLORS - BACKGROUND
   ============================================ */
.bg--primary { background-color: var(--primary); }
.bg--primary--5 { background-color: color-mix(in srgb, var(--primary) 5%, transparent); }
.bg--primary--10 { background-color: color-mix(in srgb, var(--primary) 10%, transparent); }
.bg--primary--20 { background-color: color-mix(in srgb, var(--primary) 20%, transparent); }
.bg--primary--30 { background-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.bg--primary--40 { background-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.bg--primary--50 { background-color: color-mix(in srgb, var(--primary) 50%, transparent); }
.bg--primary--60 { background-color: color-mix(in srgb, var(--primary) 60%, transparent); }
.bg--primary--70 { background-color: color-mix(in srgb, var(--primary) 70%, transparent); }
.bg--primary--80 { background-color: color-mix(in srgb, var(--primary) 80%, transparent); }
.bg--primary--90 { background-color: color-mix(in srgb, var(--primary) 90%, transparent); }

.bg--secondary { background-color: var(--secondary); }
.bg--secondary--5 { background-color: color-mix(in srgb, var(--secondary) 5%, transparent); }
.bg--secondary--10 { background-color: color-mix(in srgb, var(--secondary) 10%, transparent); }
.bg--secondary--20 { background-color: color-mix(in srgb, var(--secondary) 20%, transparent); }
.bg--secondary--30 { background-color: color-mix(in srgb, var(--secondary) 30%, transparent); }
.bg--secondary--40 { background-color: color-mix(in srgb, var(--secondary) 40%, transparent); }
.bg--secondary--50 { background-color: color-mix(in srgb, var(--secondary) 50%, transparent); }
.bg--secondary--60 { background-color: color-mix(in srgb, var(--secondary) 60%, transparent); }
.bg--secondary--70 { background-color: color-mix(in srgb, var(--secondary) 70%, transparent); }
.bg--secondary--80 { background-color: color-mix(in srgb, var(--secondary) 80%, transparent); }
.bg--secondary--90 { background-color: color-mix(in srgb, var(--secondary) 90%, transparent); }

.bg--dark { background-color: var(--dark); }
.bg--dark--5 { background-color: color-mix(in srgb, var(--dark) 5%, transparent); }
.bg--dark--10 { background-color: color-mix(in srgb, var(--dark) 10%, transparent); }
.bg--dark--20 { background-color: color-mix(in srgb, var(--dark) 20%, transparent); }
.bg--dark--30 { background-color: color-mix(in srgb, var(--dark) 30%, transparent); }
.bg--dark--40 { background-color: color-mix(in srgb, var(--dark) 40%, transparent); }
.bg--dark--50 { background-color: color-mix(in srgb, var(--dark) 50%, transparent); }
.bg--dark--60 { background-color: color-mix(in srgb, var(--dark) 60%, transparent); }
.bg--dark--70 { background-color: color-mix(in srgb, var(--dark) 70%, transparent); }
.bg--dark--80 { background-color: color-mix(in srgb, var(--dark) 80%, transparent); }
.bg--dark--90 { background-color: color-mix(in srgb, var(--dark) 90%, transparent); }

.bg--light { background-color: var(--light); }
.bg--light--5 { background-color: color-mix(in srgb, var(--light) 5%, transparent); }
.bg--light--10 { background-color: color-mix(in srgb, var(--light) 10%, transparent); }
.bg--light--20 { background-color: color-mix(in srgb, var(--light) 20%, transparent); }
.bg--light--30 { background-color: color-mix(in srgb, var(--light) 30%, transparent); }
.bg--light--40 { background-color: color-mix(in srgb, var(--light) 40%, transparent); }
.bg--light--50 { background-color: color-mix(in srgb, var(--light) 50%, transparent); }
.bg--light--60 { background-color: color-mix(in srgb, var(--light) 60%, transparent); }
.bg--light--70 { background-color: color-mix(in srgb, var(--light) 70%, transparent); }
.bg--light--80 { background-color: color-mix(in srgb, var(--light) 80%, transparent); }
.bg--light--90 { background-color: color-mix(in srgb, var(--light) 90%, transparent); }

.bg--muted { background-color: var(--muted); }
.bg--muted--5 { background-color: color-mix(in srgb, var(--muted) 5%, transparent); }
.bg--muted--10 { background-color: color-mix(in srgb, var(--muted) 10%, transparent); }
.bg--muted--20 { background-color: color-mix(in srgb, var(--muted) 20%, transparent); }
.bg--muted--30 { background-color: color-mix(in srgb, var(--muted) 30%, transparent); }
.bg--muted--40 { background-color: color-mix(in srgb, var(--muted) 40%, transparent); }
.bg--muted--50 { background-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.bg--muted--60 { background-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.bg--muted--70 { background-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.bg--muted--80 { background-color: color-mix(in srgb, var(--muted) 80%, transparent); }
.bg--muted--90 { background-color: color-mix(in srgb, var(--muted) 90%, transparent); }

.bg--white { background-color: var(--white); }
.bg--white--5 { background-color: color-mix(in srgb, var(--white) 5%, transparent); }
.bg--white--10 { background-color: color-mix(in srgb, var(--white) 10%, transparent); }
.bg--white--20 { background-color: color-mix(in srgb, var(--white) 20%, transparent); }
.bg--white--30 { background-color: color-mix(in srgb, var(--white) 30%, transparent); }
.bg--white--40 { background-color: color-mix(in srgb, var(--white) 40%, transparent); }
.bg--white--50 { background-color: color-mix(in srgb, var(--white) 50%, transparent); }
.bg--white--60 { background-color: color-mix(in srgb, var(--white) 60%, transparent); }
.bg--white--70 { background-color: color-mix(in srgb, var(--white) 70%, transparent); }
.bg--white--80 { background-color: color-mix(in srgb, var(--white) 80%, transparent); }
.bg--white--90 { background-color: color-mix(in srgb, var(--white) 90%, transparent); }

.bg--black { background-color: var(--black); }
.bg--black--5 { background-color: color-mix(in srgb, var(--black) 5%, transparent); }
.bg--black--10 { background-color: color-mix(in srgb, var(--black) 10%, transparent); }
.bg--black--20 { background-color: color-mix(in srgb, var(--black) 20%, transparent); }
.bg--black--30 { background-color: color-mix(in srgb, var(--black) 30%, transparent); }
.bg--black--40 { background-color: color-mix(in srgb, var(--black) 40%, transparent); }
.bg--black--50 { background-color: color-mix(in srgb, var(--black) 50%, transparent); }
.bg--black--60 { background-color: color-mix(in srgb, var(--black) 60%, transparent); }
.bg--black--70 { background-color: color-mix(in srgb, var(--black) 70%, transparent); }
.bg--black--80 { background-color: color-mix(in srgb, var(--black) 80%, transparent); }
.bg--black--90 { background-color: color-mix(in srgb, var(--black) 90%, transparent); }

.bg--transparent { background-color: transparent; }
.bg--gradient-primary { background-image: var(--gradient-primary); }

/* ============================================
   25. COLORS - BORDER
   ============================================ */
.border--primary { border-color: var(--primary); }
.border--primary--5 { border-color: color-mix(in srgb, var(--primary) 5%, transparent); }
.border--primary--10 { border-color: color-mix(in srgb, var(--primary) 10%, transparent); }
.border--primary--20 { border-color: color-mix(in srgb, var(--primary) 20%, transparent); }
.border--primary--30 { border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.border--primary--40 { border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.border--primary--50 { border-color: color-mix(in srgb, var(--primary) 50%, transparent); }
.border--primary--60 { border-color: color-mix(in srgb, var(--primary) 60%, transparent); }
.border--primary--70 { border-color: color-mix(in srgb, var(--primary) 70%, transparent); }
.border--primary--80 { border-color: color-mix(in srgb, var(--primary) 80%, transparent); }
.border--primary--90 { border-color: color-mix(in srgb, var(--primary) 90%, transparent); }

.border--secondary { border-color: var(--secondary); }
.border--secondary--5 { border-color: color-mix(in srgb, var(--secondary) 5%, transparent); }
.border--secondary--10 { border-color: color-mix(in srgb, var(--secondary) 10%, transparent); }
.border--secondary--20 { border-color: color-mix(in srgb, var(--secondary) 20%, transparent); }
.border--secondary--30 { border-color: color-mix(in srgb, var(--secondary) 30%, transparent); }
.border--secondary--40 { border-color: color-mix(in srgb, var(--secondary) 40%, transparent); }
.border--secondary--50 { border-color: color-mix(in srgb, var(--secondary) 50%, transparent); }
.border--secondary--60 { border-color: color-mix(in srgb, var(--secondary) 60%, transparent); }
.border--secondary--70 { border-color: color-mix(in srgb, var(--secondary) 70%, transparent); }
.border--secondary--80 { border-color: color-mix(in srgb, var(--secondary) 80%, transparent); }
.border--secondary--90 { border-color: color-mix(in srgb, var(--secondary) 90%, transparent); }

.border--dark { border-color: var(--dark); }
.border--dark--5 { border-color: color-mix(in srgb, var(--dark) 5%, transparent); }
.border--dark--10 { border-color: color-mix(in srgb, var(--dark) 10%, transparent); }
.border--dark--20 { border-color: color-mix(in srgb, var(--dark) 20%, transparent); }
.border--dark--30 { border-color: color-mix(in srgb, var(--dark) 30%, transparent); }
.border--dark--40 { border-color: color-mix(in srgb, var(--dark) 40%, transparent); }
.border--dark--50 { border-color: color-mix(in srgb, var(--dark) 50%, transparent); }
.border--dark--60 { border-color: color-mix(in srgb, var(--dark) 60%, transparent); }
.border--dark--70 { border-color: color-mix(in srgb, var(--dark) 70%, transparent); }
.border--dark--80 { border-color: color-mix(in srgb, var(--dark) 80%, transparent); }
.border--dark--90 { border-color: color-mix(in srgb, var(--dark) 90%, transparent); }

.border--light { border-color: var(--light); }
.border--light--5 { border-color: color-mix(in srgb, var(--light) 5%, transparent); }
.border--light--10 { border-color: color-mix(in srgb, var(--light) 10%, transparent); }
.border--light--20 { border-color: color-mix(in srgb, var(--light) 20%, transparent); }
.border--light--30 { border-color: color-mix(in srgb, var(--light) 30%, transparent); }
.border--light--40 { border-color: color-mix(in srgb, var(--light) 40%, transparent); }
.border--light--50 { border-color: color-mix(in srgb, var(--light) 50%, transparent); }
.border--light--60 { border-color: color-mix(in srgb, var(--light) 60%, transparent); }
.border--light--70 { border-color: color-mix(in srgb, var(--light) 70%, transparent); }
.border--light--80 { border-color: color-mix(in srgb, var(--light) 80%, transparent); }
.border--light--90 { border-color: color-mix(in srgb, var(--light) 90%, transparent); }

.border--muted { border-color: var(--muted); }
.border--muted--5 { border-color: color-mix(in srgb, var(--muted) 5%, transparent); }
.border--muted--10 { border-color: color-mix(in srgb, var(--muted) 10%, transparent); }
.border--muted--20 { border-color: color-mix(in srgb, var(--muted) 20%, transparent); }
.border--muted--30 { border-color: color-mix(in srgb, var(--muted) 30%, transparent); }
.border--muted--40 { border-color: color-mix(in srgb, var(--muted) 40%, transparent); }
.border--muted--50 { border-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.border--muted--60 { border-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.border--muted--70 { border-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.border--muted--80 { border-color: color-mix(in srgb, var(--muted) 80%, transparent); }
.border--muted--90 { border-color: color-mix(in srgb, var(--muted) 90%, transparent); }

.border--white { border-color: var(--white); }
.border--white--5 { border-color: color-mix(in srgb, var(--white) 5%, transparent); }
.border--white--10 { border-color: color-mix(in srgb, var(--white) 10%, transparent); }
.border--white--20 { border-color: color-mix(in srgb, var(--white) 20%, transparent); }
.border--white--30 { border-color: color-mix(in srgb, var(--white) 30%, transparent); }
.border--white--40 { border-color: color-mix(in srgb, var(--white) 40%, transparent); }
.border--white--50 { border-color: color-mix(in srgb, var(--white) 50%, transparent); }
.border--white--60 { border-color: color-mix(in srgb, var(--white) 60%, transparent); }
.border--white--70 { border-color: color-mix(in srgb, var(--white) 70%, transparent); }
.border--white--80 { border-color: color-mix(in srgb, var(--white) 80%, transparent); }
.border--white--90 { border-color: color-mix(in srgb, var(--white) 90%, transparent); }

.border--black { border-color: var(--black); }
.border--black--5 { border-color: color-mix(in srgb, var(--black) 5%, transparent); }
.border--black--10 { border-color: color-mix(in srgb, var(--black) 10%, transparent); }
.border--black--20 { border-color: color-mix(in srgb, var(--black) 20%, transparent); }
.border--black--30 { border-color: color-mix(in srgb, var(--black) 30%, transparent); }
.border--black--40 { border-color: color-mix(in srgb, var(--black) 40%, transparent); }
.border--black--50 { border-color: color-mix(in srgb, var(--black) 50%, transparent); }
.border--black--60 { border-color: color-mix(in srgb, var(--black) 60%, transparent); }
.border--black--70 { border-color: color-mix(in srgb, var(--black) 70%, transparent); }
.border--black--80 { border-color: color-mix(in srgb, var(--black) 80%, transparent); }
.border--black--90 { border-color: color-mix(in srgb, var(--black) 90%, transparent); }

.border--transparent { border-color: transparent; }

/* ============================================
   26. COLORS - HOVER
   ============================================ */
.hover--text--primary:hover { color: var(--primary); }
.hover--text--secondary:hover { color: var(--secondary); }
.hover--text--dark:hover { color: var(--dark); }
.hover--text--light:hover { color: var(--light); }
.hover--text--muted:hover { color: var(--muted); }
.hover--text--white:hover { color: var(--white); }
.hover--text--black:hover { color: var(--black); }

.hover--bg--primary:hover { background-color: var(--primary); }
.hover--bg--secondary:hover { background-color: var(--secondary); }
.hover--bg--dark:hover { background-color: var(--dark); }
.hover--bg--light:hover { background-color: var(--light); }
.hover--bg--muted:hover { background-color: var(--muted); }
.hover--bg--white:hover { background-color: var(--white); }
.hover--bg--black:hover { background-color: var(--black); }

.hover--border--primary:hover { border-color: var(--primary); }
.hover--border--secondary:hover { border-color: var(--secondary); }
.hover--border--dark:hover { border-color: var(--dark); }
.hover--border--light:hover { border-color: var(--light); }
.hover--border--muted:hover { border-color: var(--muted); }
.hover--border--white:hover { border-color: var(--white); }
.hover--border--black:hover { border-color: var(--black); }

.hover--bg--primary--5:hover { background-color: color-mix(in srgb, var(--primary) 5%, transparent); }
.hover--bg--primary--10:hover { background-color: color-mix(in srgb, var(--primary) 10%, transparent); }
.hover--bg--primary--20:hover { background-color: color-mix(in srgb, var(--primary) 20%, transparent); }
.hover--bg--primary--30:hover { background-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.hover--bg--primary--40:hover { background-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.hover--bg--primary--50:hover { background-color: color-mix(in srgb, var(--primary) 50%, transparent); }
.hover--bg--primary--60:hover { background-color: color-mix(in srgb, var(--primary) 60%, transparent); }
.hover--bg--primary--70:hover { background-color: color-mix(in srgb, var(--primary) 70%, transparent); }
.hover--bg--primary--80:hover { background-color: color-mix(in srgb, var(--primary) 80%, transparent); }
.hover--bg--primary--90:hover { background-color: color-mix(in srgb, var(--primary) 90%, transparent); }

.hover--bg--secondary--5:hover { background-color: color-mix(in srgb, var(--secondary) 5%, transparent); }
.hover--bg--secondary--10:hover { background-color: color-mix(in srgb, var(--secondary) 10%, transparent); }
.hover--bg--secondary--20:hover { background-color: color-mix(in srgb, var(--secondary) 20%, transparent); }
.hover--bg--secondary--30:hover { background-color: color-mix(in srgb, var(--secondary) 30%, transparent); }
.hover--bg--secondary--40:hover { background-color: color-mix(in srgb, var(--secondary) 40%, transparent); }
.hover--bg--secondary--50:hover { background-color: color-mix(in srgb, var(--secondary) 50%, transparent); }
.hover--bg--secondary--60:hover { background-color: color-mix(in srgb, var(--secondary) 60%, transparent); }
.hover--bg--secondary--70:hover { background-color: color-mix(in srgb, var(--secondary) 70%, transparent); }
.hover--bg--secondary--80:hover { background-color: color-mix(in srgb, var(--secondary) 80%, transparent); }
.hover--bg--secondary--90:hover { background-color: color-mix(in srgb, var(--secondary) 90%, transparent); }

.hover--bg--dark--5:hover { background-color: color-mix(in srgb, var(--dark) 5%, transparent); }
.hover--bg--dark--10:hover { background-color: color-mix(in srgb, var(--dark) 10%, transparent); }
.hover--bg--dark--20:hover { background-color: color-mix(in srgb, var(--dark) 20%, transparent); }
.hover--bg--dark--30:hover { background-color: color-mix(in srgb, var(--dark) 30%, transparent); }
.hover--bg--dark--40:hover { background-color: color-mix(in srgb, var(--dark) 40%, transparent); }
.hover--bg--dark--50:hover { background-color: color-mix(in srgb, var(--dark) 50%, transparent); }
.hover--bg--dark--60:hover { background-color: color-mix(in srgb, var(--dark) 60%, transparent); }
.hover--bg--dark--70:hover { background-color: color-mix(in srgb, var(--dark) 70%, transparent); }
.hover--bg--dark--80:hover { background-color: color-mix(in srgb, var(--dark) 80%, transparent); }
.hover--bg--dark--90:hover { background-color: color-mix(in srgb, var(--dark) 90%, transparent); }

.hover--bg--light--5:hover { background-color: color-mix(in srgb, var(--light) 5%, transparent); }
.hover--bg--light--10:hover { background-color: color-mix(in srgb, var(--light) 10%, transparent); }
.hover--bg--light--20:hover { background-color: color-mix(in srgb, var(--light) 20%, transparent); }
.hover--bg--light--30:hover { background-color: color-mix(in srgb, var(--light) 30%, transparent); }
.hover--bg--light--40:hover { background-color: color-mix(in srgb, var(--light) 40%, transparent); }
.hover--bg--light--50:hover { background-color: color-mix(in srgb, var(--light) 50%, transparent); }
.hover--bg--light--60:hover { background-color: color-mix(in srgb, var(--light) 60%, transparent); }
.hover--bg--light--70:hover { background-color: color-mix(in srgb, var(--light) 70%, transparent); }
.hover--bg--light--80:hover { background-color: color-mix(in srgb, var(--light) 80%, transparent); }
.hover--bg--light--90:hover { background-color: color-mix(in srgb, var(--light) 90%, transparent); }

.hover--bg--muted--5:hover { background-color: color-mix(in srgb, var(--muted) 5%, transparent); }
.hover--bg--muted--10:hover { background-color: color-mix(in srgb, var(--muted) 10%, transparent); }
.hover--bg--muted--20:hover { background-color: color-mix(in srgb, var(--muted) 20%, transparent); }
.hover--bg--muted--30:hover { background-color: color-mix(in srgb, var(--muted) 30%, transparent); }
.hover--bg--muted--40:hover { background-color: color-mix(in srgb, var(--muted) 40%, transparent); }
.hover--bg--muted--50:hover { background-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.hover--bg--muted--60:hover { background-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.hover--bg--muted--70:hover { background-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.hover--bg--muted--80:hover { background-color: color-mix(in srgb, var(--muted) 80%, transparent); }
.hover--bg--muted--90:hover { background-color: color-mix(in srgb, var(--muted) 90%, transparent); }

.hover--bg--white--5:hover { background-color: color-mix(in srgb, var(--white) 5%, transparent); }
.hover--bg--white--10:hover { background-color: color-mix(in srgb, var(--white) 10%, transparent); }
.hover--bg--white--20:hover { background-color: color-mix(in srgb, var(--white) 20%, transparent); }
.hover--bg--white--30:hover { background-color: color-mix(in srgb, var(--white) 30%, transparent); }
.hover--bg--white--40:hover { background-color: color-mix(in srgb, var(--white) 40%, transparent); }
.hover--bg--white--50:hover { background-color: color-mix(in srgb, var(--white) 50%, transparent); }
.hover--bg--white--60:hover { background-color: color-mix(in srgb, var(--white) 60%, transparent); }
.hover--bg--white--70:hover { background-color: color-mix(in srgb, var(--white) 70%, transparent); }
.hover--bg--white--80:hover { background-color: color-mix(in srgb, var(--white) 80%, transparent); }
.hover--bg--white--90:hover { background-color: color-mix(in srgb, var(--white) 90%, transparent); }

.hover--bg--black--5:hover { background-color: color-mix(in srgb, var(--black) 5%, transparent); }
.hover--bg--black--10:hover { background-color: color-mix(in srgb, var(--black) 10%, transparent); }
.hover--bg--black--20:hover { background-color: color-mix(in srgb, var(--black) 20%, transparent); }
.hover--bg--black--30:hover { background-color: color-mix(in srgb, var(--black) 30%, transparent); }
.hover--bg--black--40:hover { background-color: color-mix(in srgb, var(--black) 40%, transparent); }
.hover--bg--black--50:hover { background-color: color-mix(in srgb, var(--black) 50%, transparent); }
.hover--bg--black--60:hover { background-color: color-mix(in srgb, var(--black) 60%, transparent); }
.hover--bg--black--70:hover { background-color: color-mix(in srgb, var(--black) 70%, transparent); }
.hover--bg--black--80:hover { background-color: color-mix(in srgb, var(--black) 80%, transparent); }
.hover--bg--black--90:hover { background-color: color-mix(in srgb, var(--black) 90%, transparent); }

/* ============================================
   28. TABLET (t--) — max-width: 1024px
   ============================================ */
@media (max-width: 1024px) {
  /* Margin */
  .t--m--0 { margin: 0; }
  .t--m--8 { margin: 0.5rem; }
  .t--m--16 { margin: 1rem; }
  .t--m--24 { margin: 1.5rem; }
  .t--m--32 { margin: 2rem; }
  .t--m--40 { margin: 2.5rem; }
  .t--m--48 { margin: 3rem; }
  .t--m--56 { margin: 3.5rem; }
  .t--m--64 { margin: 4rem; }
  .t--m--72 { margin: 4.5rem; }
  .t--m--80 { margin: 5rem; }
  .t--m--96 { margin: 6rem; }
  .t--m--112 { margin: 7rem; }
  .t--m--128 { margin: 8rem; }
  .t--m--auto { margin: auto; }

  .t--mt--0 { margin-top: 0; }
  .t--mt--8 { margin-top: 0.5rem; }
  .t--mt--16 { margin-top: 1rem; }
  .t--mt--24 { margin-top: 1.5rem; }
  .t--mt--32 { margin-top: 2rem; }
  .t--mt--40 { margin-top: 2.5rem; }
  .t--mt--48 { margin-top: 3rem; }
  .t--mt--56 { margin-top: 3.5rem; }
  .t--mt--64 { margin-top: 4rem; }
  .t--mt--72 { margin-top: 4.5rem; }
  .t--mt--80 { margin-top: 5rem; }
  .t--mt--96 { margin-top: 6rem; }
  .t--mt--112 { margin-top: 7rem; }
  .t--mt--128 { margin-top: 8rem; }
  .t--mt--auto { margin-top: auto; }

  .t--mr--0 { margin-right: 0; }
  .t--mr--8 { margin-right: 0.5rem; }
  .t--mr--16 { margin-right: 1rem; }
  .t--mr--24 { margin-right: 1.5rem; }
  .t--mr--32 { margin-right: 2rem; }
  .t--mr--40 { margin-right: 2.5rem; }
  .t--mr--48 { margin-right: 3rem; }
  .t--mr--56 { margin-right: 3.5rem; }
  .t--mr--64 { margin-right: 4rem; }
  .t--mr--72 { margin-right: 4.5rem; }
  .t--mr--80 { margin-right: 5rem; }
  .t--mr--96 { margin-right: 6rem; }
  .t--mr--112 { margin-right: 7rem; }
  .t--mr--128 { margin-right: 8rem; }
  .t--mr--auto { margin-right: auto; }

  .t--mb--0 { margin-bottom: 0; }
  .t--mb--8 { margin-bottom: 0.5rem; }
  .t--mb--16 { margin-bottom: 1rem; }
  .t--mb--24 { margin-bottom: 1.5rem; }
  .t--mb--32 { margin-bottom: 2rem; }
  .t--mb--40 { margin-bottom: 2.5rem; }
  .t--mb--48 { margin-bottom: 3rem; }
  .t--mb--56 { margin-bottom: 3.5rem; }
  .t--mb--64 { margin-bottom: 4rem; }
  .t--mb--72 { margin-bottom: 4.5rem; }
  .t--mb--80 { margin-bottom: 5rem; }
  .t--mb--96 { margin-bottom: 6rem; }
  .t--mb--112 { margin-bottom: 7rem; }
  .t--mb--128 { margin-bottom: 8rem; }
  .t--mb--auto { margin-bottom: auto; }

  .t--ml--0 { margin-left: 0; }
  .t--ml--8 { margin-left: 0.5rem; }
  .t--ml--16 { margin-left: 1rem; }
  .t--ml--24 { margin-left: 1.5rem; }
  .t--ml--32 { margin-left: 2rem; }
  .t--ml--40 { margin-left: 2.5rem; }
  .t--ml--48 { margin-left: 3rem; }
  .t--ml--56 { margin-left: 3.5rem; }
  .t--ml--64 { margin-left: 4rem; }
  .t--ml--72 { margin-left: 4.5rem; }
  .t--ml--80 { margin-left: 5rem; }
  .t--ml--96 { margin-left: 6rem; }
  .t--ml--112 { margin-left: 7rem; }
  .t--ml--128 { margin-left: 8rem; }
  .t--ml--auto { margin-left: auto; }

  .t--mx--0 { margin-inline: 0; }
  .t--mx--8 { margin-inline: 0.5rem; }
  .t--mx--16 { margin-inline: 1rem; }
  .t--mx--24 { margin-inline: 1.5rem; }
  .t--mx--32 { margin-inline: 2rem; }
  .t--mx--40 { margin-inline: 2.5rem; }
  .t--mx--48 { margin-inline: 3rem; }
  .t--mx--56 { margin-inline: 3.5rem; }
  .t--mx--64 { margin-inline: 4rem; }
  .t--mx--72 { margin-inline: 4.5rem; }
  .t--mx--80 { margin-inline: 5rem; }
  .t--mx--96 { margin-inline: 6rem; }
  .t--mx--112 { margin-inline: 7rem; }
  .t--mx--128 { margin-inline: 8rem; }
  .t--mx--auto { margin-inline: auto; }

  .t--my--0 { margin-block: 0; }
  .t--my--8 { margin-block: 0.5rem; }
  .t--my--16 { margin-block: 1rem; }
  .t--my--24 { margin-block: 1.5rem; }
  .t--my--32 { margin-block: 2rem; }
  .t--my--40 { margin-block: 2.5rem; }
  .t--my--48 { margin-block: 3rem; }
  .t--my--56 { margin-block: 3.5rem; }
  .t--my--64 { margin-block: 4rem; }
  .t--my--72 { margin-block: 4.5rem; }
  .t--my--80 { margin-block: 5rem; }
  .t--my--96 { margin-block: 6rem; }
  .t--my--112 { margin-block: 7rem; }
  .t--my--128 { margin-block: 8rem; }
  .t--my--auto { margin-block: auto; }

  /* Padding */
  .t--p--0 { padding: 0; }
  .t--p--8 { padding: 0.5rem; }
  .t--p--16 { padding: 1rem; }
  .t--p--24 { padding: 1.5rem; }
  .t--p--32 { padding: 2rem; }
  .t--p--40 { padding: 2.5rem; }
  .t--p--48 { padding: 3rem; }
  .t--p--56 { padding: 3.5rem; }
  .t--p--64 { padding: 4rem; }
  .t--p--72 { padding: 4.5rem; }
  .t--p--80 { padding: 5rem; }
  .t--p--96 { padding: 6rem; }
  .t--p--112 { padding: 7rem; }
  .t--p--128 { padding: 8rem; }

  .t--pt--0 { padding-top: 0; }
  .t--pt--8 { padding-top: 0.5rem; }
  .t--pt--16 { padding-top: 1rem; }
  .t--pt--24 { padding-top: 1.5rem; }
  .t--pt--32 { padding-top: 2rem; }
  .t--pt--40 { padding-top: 2.5rem; }
  .t--pt--48 { padding-top: 3rem; }
  .t--pt--56 { padding-top: 3.5rem; }
  .t--pt--64 { padding-top: 4rem; }
  .t--pt--72 { padding-top: 4.5rem; }
  .t--pt--80 { padding-top: 5rem; }
  .t--pt--96 { padding-top: 6rem; }
  .t--pt--112 { padding-top: 7rem; }
  .t--pt--128 { padding-top: 8rem; }

  .t--pr--0 { padding-right: 0; }
  .t--pr--8 { padding-right: 0.5rem; }
  .t--pr--16 { padding-right: 1rem; }
  .t--pr--24 { padding-right: 1.5rem; }
  .t--pr--32 { padding-right: 2rem; }
  .t--pr--40 { padding-right: 2.5rem; }
  .t--pr--48 { padding-right: 3rem; }
  .t--pr--56 { padding-right: 3.5rem; }
  .t--pr--64 { padding-right: 4rem; }
  .t--pr--72 { padding-right: 4.5rem; }
  .t--pr--80 { padding-right: 5rem; }
  .t--pr--96 { padding-right: 6rem; }
  .t--pr--112 { padding-right: 7rem; }
  .t--pr--128 { padding-right: 8rem; }

  .t--pb--0 { padding-bottom: 0; }
  .t--pb--8 { padding-bottom: 0.5rem; }
  .t--pb--16 { padding-bottom: 1rem; }
  .t--pb--24 { padding-bottom: 1.5rem; }
  .t--pb--32 { padding-bottom: 2rem; }
  .t--pb--40 { padding-bottom: 2.5rem; }
  .t--pb--48 { padding-bottom: 3rem; }
  .t--pb--56 { padding-bottom: 3.5rem; }
  .t--pb--64 { padding-bottom: 4rem; }
  .t--pb--72 { padding-bottom: 4.5rem; }
  .t--pb--80 { padding-bottom: 5rem; }
  .t--pb--96 { padding-bottom: 6rem; }
  .t--pb--112 { padding-bottom: 7rem; }
  .t--pb--128 { padding-bottom: 8rem; }

  .t--pl--0 { padding-left: 0; }
  .t--pl--8 { padding-left: 0.5rem; }
  .t--pl--16 { padding-left: 1rem; }
  .t--pl--24 { padding-left: 1.5rem; }
  .t--pl--32 { padding-left: 2rem; }
  .t--pl--40 { padding-left: 2.5rem; }
  .t--pl--48 { padding-left: 3rem; }
  .t--pl--56 { padding-left: 3.5rem; }
  .t--pl--64 { padding-left: 4rem; }
  .t--pl--72 { padding-left: 4.5rem; }
  .t--pl--80 { padding-left: 5rem; }
  .t--pl--96 { padding-left: 6rem; }
  .t--pl--112 { padding-left: 7rem; }
  .t--pl--128 { padding-left: 8rem; }

  .t--px--0 { padding-inline: 0; }
  .t--px--8 { padding-inline: 0.5rem; }
  .t--px--16 { padding-inline: 1rem; }
  .t--px--24 { padding-inline: 1.5rem; }
  .t--px--32 { padding-inline: 2rem; }
  .t--px--40 { padding-inline: 2.5rem; }
  .t--px--48 { padding-inline: 3rem; }
  .t--px--56 { padding-inline: 3.5rem; }
  .t--px--64 { padding-inline: 4rem; }
  .t--px--72 { padding-inline: 4.5rem; }
  .t--px--80 { padding-inline: 5rem; }
  .t--px--96 { padding-inline: 6rem; }
  .t--px--112 { padding-inline: 7rem; }
  .t--px--128 { padding-inline: 8rem; }

  .t--py--0 { padding-block: 0; }
  .t--py--8 { padding-block: 0.5rem; }
  .t--py--16 { padding-block: 1rem; }
  .t--py--24 { padding-block: 1.5rem; }
  .t--py--32 { padding-block: 2rem; }
  .t--py--40 { padding-block: 2.5rem; }
  .t--py--48 { padding-block: 3rem; }
  .t--py--56 { padding-block: 3.5rem; }
  .t--py--64 { padding-block: 4rem; }
  .t--py--72 { padding-block: 4.5rem; }
  .t--py--80 { padding-block: 5rem; }
  .t--py--96 { padding-block: 6rem; }
  .t--py--112 { padding-block: 7rem; }
  .t--py--128 { padding-block: 8rem; }

  /* Gap */
  .t--gap--0 { gap: 0; }
  .t--gap--8 { gap: 0.5rem; }
  .t--gap--16 { gap: 1rem; }
  .t--gap--24 { gap: 1.5rem; }
  .t--gap--32 { gap: 2rem; }
  .t--gap--40 { gap: 2.5rem; }
  .t--gap--48 { gap: 3rem; }
  .t--gap--56 { gap: 3.5rem; }
  .t--gap--64 { gap: 4rem; }
  .t--gap--72 { gap: 4.5rem; }
  .t--gap--80 { gap: 5rem; }
  .t--gap--96 { gap: 6rem; }
  .t--gap--112 { gap: 7rem; }
  .t--gap--128 { gap: 8rem; }

  .t--gap-x--0 { column-gap: 0; }
  .t--gap-x--8 { column-gap: 0.5rem; }
  .t--gap-x--16 { column-gap: 1rem; }
  .t--gap-x--24 { column-gap: 1.5rem; }
  .t--gap-x--32 { column-gap: 2rem; }
  .t--gap-x--40 { column-gap: 2.5rem; }
  .t--gap-x--48 { column-gap: 3rem; }
  .t--gap-x--56 { column-gap: 3.5rem; }
  .t--gap-x--64 { column-gap: 4rem; }
  .t--gap-x--72 { column-gap: 4.5rem; }
  .t--gap-x--80 { column-gap: 5rem; }
  .t--gap-x--96 { column-gap: 6rem; }
  .t--gap-x--112 { column-gap: 7rem; }
  .t--gap-x--128 { column-gap: 8rem; }

  .t--gap-y--0 { row-gap: 0; }
  .t--gap-y--8 { row-gap: 0.5rem; }
  .t--gap-y--16 { row-gap: 1rem; }
  .t--gap-y--24 { row-gap: 1.5rem; }
  .t--gap-y--32 { row-gap: 2rem; }
  .t--gap-y--40 { row-gap: 2.5rem; }
  .t--gap-y--48 { row-gap: 3rem; }
  .t--gap-y--56 { row-gap: 3.5rem; }
  .t--gap-y--64 { row-gap: 4rem; }
  .t--gap-y--72 { row-gap: 4.5rem; }
  .t--gap-y--80 { row-gap: 5rem; }
  .t--gap-y--96 { row-gap: 6rem; }
  .t--gap-y--112 { row-gap: 7rem; }
  .t--gap-y--128 { row-gap: 8rem; }

  /* Typografie */
  .t--text--8 { font-size: 0.5rem; }
  .t--text--12 { font-size: 0.75rem; }
  .t--text--14 { font-size: 0.875rem; }
  .t--text--16 { font-size: 1rem; }
  .t--text--18 { font-size: 1.125rem; }
  .t--text--20 { font-size: 1.25rem; }
  .t--text--24 { font-size: 1.5rem; }
  .t--text--32 { font-size: 2rem; }
  .t--text--40 { font-size: 2.5rem; }
  .t--text--48 { font-size: 3rem; }
  .t--text--56 { font-size: 3.5rem; }
  .t--text--64 { font-size: 4rem; }
  .t--text--72 { font-size: 4.5rem; }
  .t--text--80 { font-size: 5rem; }
  .t--text--96 { font-size: 6rem; }
  .t--text--112 { font-size: 7rem; }
  .t--text--128 { font-size: 8rem; }
  .t--text--left { text-align: left; }
  .t--text--center { text-align: center; }
  .t--text--right { text-align: right; }
  .t--text--justify { text-align: justify; }

  /* Kleuren */
  .t--text--primary { color: var(--primary); }
  .t--text--secondary { color: var(--secondary); }
  .t--text--dark { color: var(--dark); }
  .t--text--light { color: var(--light); }
  .t--text--muted { color: var(--muted); }
  .t--text--white { color: var(--white); }
  .t--text--black { color: var(--black); }
  .t--bg--primary { background-color: var(--primary); }
  .t--bg--secondary { background-color: var(--secondary); }
  .t--bg--dark { background-color: var(--dark); }
  .t--bg--light { background-color: var(--light); }
  .t--bg--muted { background-color: var(--muted); }
  .t--bg--white { background-color: var(--white); }
  .t--bg--black { background-color: var(--black); }

  /* Display & positie */
  .t--block { display: block; }
  .t--inline--block { display: inline-block; }
  .t--inline { display: inline; }
  .t--flex { display: flex; }
  .t--inline--flex { display: inline-flex; }
  .t--grid { display: grid; }
  .t--inline--grid { display: inline-grid; }
  .t--hidden { display: none !important; }
  .t--static { position: static; }
  .t--relative { position: relative; }
  .t--absolute { position: absolute; }

  /* Flexbox */
  .t--flex--row { flex-direction: row; }
  .t--flex--row-reverse { flex-direction: row-reverse; }
  .t--flex--col { flex-direction: column; }
  .t--flex--col-reverse { flex-direction: column-reverse; }
  .t--flex--wrap { flex-wrap: wrap; }
  .t--flex--nowrap { flex-wrap: nowrap; }
  .t--flex--wrap-reverse { flex-wrap: wrap-reverse; }

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

  .t--items--start { align-items: flex-start; }
  .t--items--end { align-items: flex-end; }
  .t--items--center { align-items: center; }
  .t--items--baseline { align-items: baseline; }
  .t--items--stretch { align-items: stretch; }

  .t--content--start { align-content: flex-start; }
  .t--content--end { align-content: flex-end; }
  .t--content--center { align-content: center; }
  .t--content--between { align-content: space-between; }
  .t--content--around { align-content: space-around; }
  .t--content--evenly { align-content: space-evenly; }

  .t--self--auto { align-self: auto; }
  .t--self--start { align-self: flex-start; }
  .t--self--end { align-self: flex-end; }
  .t--self--center { align-self: center; }
  .t--self--stretch { align-self: stretch; }
  .t--self--baseline { align-self: baseline; }

  .t--flex--1 { flex: 1 1 0%; }
  .t--flex--auto { flex: 1 1 auto; }
  .t--flex--initial { flex: 0 1 auto; }
  .t--flex--none { flex: none; }
  .t--basis--10pct { flex: 1 1 10%; }
  .t--basis--20pct { flex: 1 1 20%; }
  .t--basis--25pct { flex: 1 1 25%; }
  .t--basis--30pct { flex: 1 1 30%; }
  .t--basis--33pct { flex: 1 1 33.3333%; }
  .t--basis--40pct { flex: 1 1 40%; }
  .t--basis--50pct { flex: 1 1 50%; }
  .t--basis--60pct { flex: 1 1 60%; }
  .t--basis--66pct { flex: 1 1 66.6667%; }
  .t--basis--70pct { flex: 1 1 70%; }
  .t--basis--75pct { flex: 1 1 75%; }
  .t--basis--80pct { flex: 1 1 80%; }
  .t--basis--90pct { flex: 1 1 90%; }
  .t--basis--100pct { flex: 1 1 100%; }

  .t--order--first { order: -1; }
  .t--order--last { order: 999; }
  .t--order--0 { order: 0; }
  .t--order--1 { order: 1; }
  .t--order--2 { order: 2; }
  .t--order--3 { order: 3; }
  .t--columns--1 { column-count: 1; }
  .t--columns--2 { column-count: 2; }
  .t--columns--3 { column-count: 3; }

  /* Grid */
  .t--cols--1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .t--cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t--cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .t--cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .t--cols--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .t--cols--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .t--cols--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .t--cols--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .t--cols--9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .t--cols--10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .t--cols--11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .t--cols--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  .t--col-span--1 { grid-column: span 1 / span 1; }
  .t--col-span--2 { grid-column: span 2 / span 2; }
  .t--col-span--3 { grid-column: span 3 / span 3; }
  .t--col-span--4 { grid-column: span 4 / span 4; }
  .t--col-span--5 { grid-column: span 5 / span 5; }
  .t--col-span--6 { grid-column: span 6 / span 6; }
  .t--col-span--7 { grid-column: span 7 / span 7; }
  .t--col-span--8 { grid-column: span 8 / span 8; }
  .t--col-span--9 { grid-column: span 9 / span 9; }
  .t--col-span--10 { grid-column: span 10 / span 10; }
  .t--col-span--11 { grid-column: span 11 / span 11; }
  .t--col-span--12 { grid-column: span 12 / span 12; }
  .t--col-span--full { grid-column: 1 / -1; }

  .t--grid--auto-160 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }
  .t--grid--auto-200 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr)); }
  .t--grid--auto-240 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
  .t--grid--auto-280 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr)); }
  .t--grid--auto-320 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
  .t--grid--auto-360 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22.5rem, 100%), 1fr)); }
  .t--grid--auto-400 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr)); }

  /* Breedte, hoogte & verhouding */
  .t--w--auto { width: auto; }
  .t--w--full { width: 100%; }
  .t--w--screen { width: 100vw; }
  .t--w--min { width: min-content; }
  .t--w--max { width: max-content; }
  .t--w--fit { width: fit-content; }
  .t--w--10pct { width: 10%; }
  .t--w--20pct { width: 20%; }
  .t--w--25pct { width: 25%; }
  .t--w--30pct { width: 30%; }
  .t--w--33pct { width: 33.3333%; }
  .t--w--40pct { width: 40%; }
  .t--w--50pct { width: 50%; }
  .t--w--60pct { width: 60%; }
  .t--w--66pct { width: 66.6667%; }
  .t--w--70pct { width: 70%; }
  .t--w--75pct { width: 75%; }
  .t--w--80pct { width: 80%; }
  .t--w--90pct { width: 90%; }
  .t--w--100pct { width: 100%; }
  .t--w--8 { width: 0.5rem; }
  .t--w--16 { width: 1rem; }
  .t--w--24 { width: 1.5rem; }
  .t--w--32 { width: 2rem; }
  .t--w--40 { width: 2.5rem; }
  .t--w--48 { width: 3rem; }
  .t--w--56 { width: 3.5rem; }
  .t--w--64 { width: 4rem; }
  .t--w--72 { width: 4.5rem; }
  .t--w--80 { width: 5rem; }
  .t--w--96 { width: 6rem; }
  .t--w--112 { width: 7rem; }
  .t--w--128 { width: 8rem; }
  .t--w--160 { width: 10rem; }
  .t--w--192 { width: 12rem; }
  .t--w--224 { width: 14rem; }
  .t--w--256 { width: 16rem; }
  .t--w--320 { width: 20rem; }
  .t--w--384 { width: 24rem; }
  .t--w--448 { width: 28rem; }
  .t--w--512 { width: 32rem; }

  .t--h--auto { height: auto; }
  .t--h--full { height: 100%; }
  .t--h--screen { height: 100vh; }
  .t--h--screen--header { height: calc(100vh - var(--header-height, 0px)); }
  .t--h--min { height: min-content; }
  .t--h--max { height: max-content; }
  .t--h--fit { height: fit-content; }
  .t--h--40vh { height: 40vh; }
  .t--h--50vh { height: 50vh; }
  .t--h--60vh { height: 60vh; }
  .t--h--70vh { height: 70vh; }
  .t--h--80vh { height: 80vh; }
  .t--h--8 { height: 0.5rem; }
  .t--h--16 { height: 1rem; }
  .t--h--24 { height: 1.5rem; }
  .t--h--32 { height: 2rem; }
  .t--h--40 { height: 2.5rem; }
  .t--h--48 { height: 3rem; }
  .t--h--56 { height: 3.5rem; }
  .t--h--64 { height: 4rem; }
  .t--h--72 { height: 4.5rem; }
  .t--h--80 { height: 5rem; }
  .t--h--96 { height: 6rem; }
  .t--h--112 { height: 7rem; }
  .t--h--128 { height: 8rem; }
  .t--h--160 { height: 10rem; }
  .t--h--192 { height: 12rem; }
  .t--h--224 { height: 14rem; }
  .t--h--256 { height: 16rem; }
  .t--h--320 { height: 20rem; }
  .t--h--384 { height: 24rem; }
  .t--h--448 { height: 28rem; }
  .t--h--512 { height: 32rem; }

  .t--max-w--none { max-width: none; }
  .t--max-w--full { max-width: 100%; }
  .t--max-w--256 { max-width: 16rem; }
  .t--max-w--320 { max-width: 20rem; }
  .t--max-w--384 { max-width: 24rem; }
  .t--max-w--448 { max-width: 28rem; }
  .t--max-w--512 { max-width: 32rem; }
  .t--max-w--640 { max-width: 40rem; }
  .t--max-w--768 { max-width: 48rem; }
  .t--max-w--1024 { max-width: 64rem; }
  .t--max-w--1280 { max-width: 80rem; }
  .t--max-w--1536 { max-width: 96rem; }

  .t--aspect--1-1 { aspect-ratio: 1 / 1; }
  .t--aspect--4-3 { aspect-ratio: 4 / 3; }
  .t--aspect--3-4 { aspect-ratio: 3 / 4; }
  .t--aspect--3-2 { aspect-ratio: 3 / 2; }
  .t--aspect--2-3 { aspect-ratio: 2 / 3; }
  .t--aspect--16-9 { aspect-ratio: 16 / 9; }
  .t--aspect--9-16 { aspect-ratio: 9 / 16; }
  .t--aspect--21-9 { aspect-ratio: 21 / 9; }
  .t--aspect--auto { aspect-ratio: auto; }

  /* Border width (bv. t--border-r--0) */
  .t--border--0 { border-width: 0; }
  .t--border--1 { border-width: 1px; }
  .t--border--2 { border-width: 2px; }

  .t--border-t--0 { border-top-width: 0; }
  .t--border-t--1 { border-top-width: 1px; }
  .t--border-t--2 { border-top-width: 2px; }

  .t--border-r--0 { border-right-width: 0; }
  .t--border-r--1 { border-right-width: 1px; }
  .t--border-r--2 { border-right-width: 2px; }

  .t--border-b--0 { border-bottom-width: 0; }
  .t--border-b--1 { border-bottom-width: 1px; }
  .t--border-b--2 { border-bottom-width: 2px; }

  .t--border-l--0 { border-left-width: 0; }
  .t--border-l--1 { border-left-width: 1px; }
  .t--border-l--2 { border-left-width: 2px; }

  .t--border-x--0 { border-left-width: 0; border-right-width: 0; }
  .t--border-x--1 { border-left-width: 1px; border-right-width: 1px; }
  .t--border-x--2 { border-left-width: 2px; border-right-width: 2px; }

  .t--border-y--0 { border-top-width: 0; border-bottom-width: 0; }
  .t--border-y--1 { border-top-width: 1px; border-bottom-width: 1px; }
  .t--border-y--2 { border-top-width: 2px; border-bottom-width: 2px; }

  /* Border radius */
  .t--rounded--0 { border-radius: 0; }
  .t--rounded--8 { border-radius: 8px; }
  .t--rounded--16 { border-radius: 16px; }
  .t--rounded--24 { border-radius: 24px; }
  .t--rounded--32 { border-radius: 32px; }
  .t--rounded--40 { border-radius: 40px; }
  .t--rounded--48 { border-radius: 48px; }
  .t--rounded--full { border-radius: 9999px; }
}

/* ============================================
   29. MOBIEL (m--) — max-width: 767px
   ============================================ */
@media (max-width: 767px) {
  /* Margin */
  .m--m--0 { margin: 0; }
  .m--m--8 { margin: 0.5rem; }
  .m--m--16 { margin: 1rem; }
  .m--m--24 { margin: 1.5rem; }
  .m--m--32 { margin: 2rem; }
  .m--m--40 { margin: 2.5rem; }
  .m--m--48 { margin: 3rem; }
  .m--m--56 { margin: 3.5rem; }
  .m--m--64 { margin: 4rem; }
  .m--m--72 { margin: 4.5rem; }
  .m--m--80 { margin: 5rem; }
  .m--m--96 { margin: 6rem; }
  .m--m--112 { margin: 7rem; }
  .m--m--128 { margin: 8rem; }
  .m--m--auto { margin: auto; }

  .m--mt--0 { margin-top: 0; }
  .m--mt--8 { margin-top: 0.5rem; }
  .m--mt--16 { margin-top: 1rem; }
  .m--mt--24 { margin-top: 1.5rem; }
  .m--mt--32 { margin-top: 2rem; }
  .m--mt--40 { margin-top: 2.5rem; }
  .m--mt--48 { margin-top: 3rem; }
  .m--mt--56 { margin-top: 3.5rem; }
  .m--mt--64 { margin-top: 4rem; }
  .m--mt--72 { margin-top: 4.5rem; }
  .m--mt--80 { margin-top: 5rem; }
  .m--mt--96 { margin-top: 6rem; }
  .m--mt--112 { margin-top: 7rem; }
  .m--mt--128 { margin-top: 8rem; }
  .m--mt--auto { margin-top: auto; }

  .m--mr--0 { margin-right: 0; }
  .m--mr--8 { margin-right: 0.5rem; }
  .m--mr--16 { margin-right: 1rem; }
  .m--mr--24 { margin-right: 1.5rem; }
  .m--mr--32 { margin-right: 2rem; }
  .m--mr--40 { margin-right: 2.5rem; }
  .m--mr--48 { margin-right: 3rem; }
  .m--mr--56 { margin-right: 3.5rem; }
  .m--mr--64 { margin-right: 4rem; }
  .m--mr--72 { margin-right: 4.5rem; }
  .m--mr--80 { margin-right: 5rem; }
  .m--mr--96 { margin-right: 6rem; }
  .m--mr--112 { margin-right: 7rem; }
  .m--mr--128 { margin-right: 8rem; }
  .m--mr--auto { margin-right: auto; }

  .m--mb--0 { margin-bottom: 0; }
  .m--mb--8 { margin-bottom: 0.5rem; }
  .m--mb--16 { margin-bottom: 1rem; }
  .m--mb--24 { margin-bottom: 1.5rem; }
  .m--mb--32 { margin-bottom: 2rem; }
  .m--mb--40 { margin-bottom: 2.5rem; }
  .m--mb--48 { margin-bottom: 3rem; }
  .m--mb--56 { margin-bottom: 3.5rem; }
  .m--mb--64 { margin-bottom: 4rem; }
  .m--mb--72 { margin-bottom: 4.5rem; }
  .m--mb--80 { margin-bottom: 5rem; }
  .m--mb--96 { margin-bottom: 6rem; }
  .m--mb--112 { margin-bottom: 7rem; }
  .m--mb--128 { margin-bottom: 8rem; }
  .m--mb--auto { margin-bottom: auto; }

  .m--ml--0 { margin-left: 0; }
  .m--ml--8 { margin-left: 0.5rem; }
  .m--ml--16 { margin-left: 1rem; }
  .m--ml--24 { margin-left: 1.5rem; }
  .m--ml--32 { margin-left: 2rem; }
  .m--ml--40 { margin-left: 2.5rem; }
  .m--ml--48 { margin-left: 3rem; }
  .m--ml--56 { margin-left: 3.5rem; }
  .m--ml--64 { margin-left: 4rem; }
  .m--ml--72 { margin-left: 4.5rem; }
  .m--ml--80 { margin-left: 5rem; }
  .m--ml--96 { margin-left: 6rem; }
  .m--ml--112 { margin-left: 7rem; }
  .m--ml--128 { margin-left: 8rem; }
  .m--ml--auto { margin-left: auto; }

  .m--mx--0 { margin-inline: 0; }
  .m--mx--8 { margin-inline: 0.5rem; }
  .m--mx--16 { margin-inline: 1rem; }
  .m--mx--24 { margin-inline: 1.5rem; }
  .m--mx--32 { margin-inline: 2rem; }
  .m--mx--40 { margin-inline: 2.5rem; }
  .m--mx--48 { margin-inline: 3rem; }
  .m--mx--56 { margin-inline: 3.5rem; }
  .m--mx--64 { margin-inline: 4rem; }
  .m--mx--72 { margin-inline: 4.5rem; }
  .m--mx--80 { margin-inline: 5rem; }
  .m--mx--96 { margin-inline: 6rem; }
  .m--mx--112 { margin-inline: 7rem; }
  .m--mx--128 { margin-inline: 8rem; }
  .m--mx--auto { margin-inline: auto; }

  .m--my--0 { margin-block: 0; }
  .m--my--8 { margin-block: 0.5rem; }
  .m--my--16 { margin-block: 1rem; }
  .m--my--24 { margin-block: 1.5rem; }
  .m--my--32 { margin-block: 2rem; }
  .m--my--40 { margin-block: 2.5rem; }
  .m--my--48 { margin-block: 3rem; }
  .m--my--56 { margin-block: 3.5rem; }
  .m--my--64 { margin-block: 4rem; }
  .m--my--72 { margin-block: 4.5rem; }
  .m--my--80 { margin-block: 5rem; }
  .m--my--96 { margin-block: 6rem; }
  .m--my--112 { margin-block: 7rem; }
  .m--my--128 { margin-block: 8rem; }
  .m--my--auto { margin-block: auto; }

  /* Padding */
  .m--p--0 { padding: 0; }
  .m--p--8 { padding: 0.5rem; }
  .m--p--16 { padding: 1rem; }
  .m--p--24 { padding: 1.5rem; }
  .m--p--32 { padding: 2rem; }
  .m--p--40 { padding: 2.5rem; }
  .m--p--48 { padding: 3rem; }
  .m--p--56 { padding: 3.5rem; }
  .m--p--64 { padding: 4rem; }
  .m--p--72 { padding: 4.5rem; }
  .m--p--80 { padding: 5rem; }
  .m--p--96 { padding: 6rem; }
  .m--p--112 { padding: 7rem; }
  .m--p--128 { padding: 8rem; }

  .m--pt--0 { padding-top: 0; }
  .m--pt--8 { padding-top: 0.5rem; }
  .m--pt--16 { padding-top: 1rem; }
  .m--pt--24 { padding-top: 1.5rem; }
  .m--pt--32 { padding-top: 2rem; }
  .m--pt--40 { padding-top: 2.5rem; }
  .m--pt--48 { padding-top: 3rem; }
  .m--pt--56 { padding-top: 3.5rem; }
  .m--pt--64 { padding-top: 4rem; }
  .m--pt--72 { padding-top: 4.5rem; }
  .m--pt--80 { padding-top: 5rem; }
  .m--pt--96 { padding-top: 6rem; }
  .m--pt--112 { padding-top: 7rem; }
  .m--pt--128 { padding-top: 8rem; }

  .m--pr--0 { padding-right: 0; }
  .m--pr--8 { padding-right: 0.5rem; }
  .m--pr--16 { padding-right: 1rem; }
  .m--pr--24 { padding-right: 1.5rem; }
  .m--pr--32 { padding-right: 2rem; }
  .m--pr--40 { padding-right: 2.5rem; }
  .m--pr--48 { padding-right: 3rem; }
  .m--pr--56 { padding-right: 3.5rem; }
  .m--pr--64 { padding-right: 4rem; }
  .m--pr--72 { padding-right: 4.5rem; }
  .m--pr--80 { padding-right: 5rem; }
  .m--pr--96 { padding-right: 6rem; }
  .m--pr--112 { padding-right: 7rem; }
  .m--pr--128 { padding-right: 8rem; }

  .m--pb--0 { padding-bottom: 0; }
  .m--pb--8 { padding-bottom: 0.5rem; }
  .m--pb--16 { padding-bottom: 1rem; }
  .m--pb--24 { padding-bottom: 1.5rem; }
  .m--pb--32 { padding-bottom: 2rem; }
  .m--pb--40 { padding-bottom: 2.5rem; }
  .m--pb--48 { padding-bottom: 3rem; }
  .m--pb--56 { padding-bottom: 3.5rem; }
  .m--pb--64 { padding-bottom: 4rem; }
  .m--pb--72 { padding-bottom: 4.5rem; }
  .m--pb--80 { padding-bottom: 5rem; }
  .m--pb--96 { padding-bottom: 6rem; }
  .m--pb--112 { padding-bottom: 7rem; }
  .m--pb--128 { padding-bottom: 8rem; }

  .m--pl--0 { padding-left: 0; }
  .m--pl--8 { padding-left: 0.5rem; }
  .m--pl--16 { padding-left: 1rem; }
  .m--pl--24 { padding-left: 1.5rem; }
  .m--pl--32 { padding-left: 2rem; }
  .m--pl--40 { padding-left: 2.5rem; }
  .m--pl--48 { padding-left: 3rem; }
  .m--pl--56 { padding-left: 3.5rem; }
  .m--pl--64 { padding-left: 4rem; }
  .m--pl--72 { padding-left: 4.5rem; }
  .m--pl--80 { padding-left: 5rem; }
  .m--pl--96 { padding-left: 6rem; }
  .m--pl--112 { padding-left: 7rem; }
  .m--pl--128 { padding-left: 8rem; }

  .m--px--0 { padding-inline: 0; }
  .m--px--8 { padding-inline: 0.5rem; }
  .m--px--16 { padding-inline: 1rem; }
  .m--px--24 { padding-inline: 1.5rem; }
  .m--px--32 { padding-inline: 2rem; }
  .m--px--40 { padding-inline: 2.5rem; }
  .m--px--48 { padding-inline: 3rem; }
  .m--px--56 { padding-inline: 3.5rem; }
  .m--px--64 { padding-inline: 4rem; }
  .m--px--72 { padding-inline: 4.5rem; }
  .m--px--80 { padding-inline: 5rem; }
  .m--px--96 { padding-inline: 6rem; }
  .m--px--112 { padding-inline: 7rem; }
  .m--px--128 { padding-inline: 8rem; }

  .m--py--0 { padding-block: 0; }
  .m--py--8 { padding-block: 0.5rem; }
  .m--py--16 { padding-block: 1rem; }
  .m--py--24 { padding-block: 1.5rem; }
  .m--py--32 { padding-block: 2rem; }
  .m--py--40 { padding-block: 2.5rem; }
  .m--py--48 { padding-block: 3rem; }
  .m--py--56 { padding-block: 3.5rem; }
  .m--py--64 { padding-block: 4rem; }
  .m--py--72 { padding-block: 4.5rem; }
  .m--py--80 { padding-block: 5rem; }
  .m--py--96 { padding-block: 6rem; }
  .m--py--112 { padding-block: 7rem; }
  .m--py--128 { padding-block: 8rem; }

  /* Gap */
  .m--gap--0 { gap: 0; }
  .m--gap--8 { gap: 0.5rem; }
  .m--gap--16 { gap: 1rem; }
  .m--gap--24 { gap: 1.5rem; }
  .m--gap--32 { gap: 2rem; }
  .m--gap--40 { gap: 2.5rem; }
  .m--gap--48 { gap: 3rem; }
  .m--gap--56 { gap: 3.5rem; }
  .m--gap--64 { gap: 4rem; }
  .m--gap--72 { gap: 4.5rem; }
  .m--gap--80 { gap: 5rem; }
  .m--gap--96 { gap: 6rem; }
  .m--gap--112 { gap: 7rem; }
  .m--gap--128 { gap: 8rem; }

  .m--gap-x--0 { column-gap: 0; }
  .m--gap-x--8 { column-gap: 0.5rem; }
  .m--gap-x--16 { column-gap: 1rem; }
  .m--gap-x--24 { column-gap: 1.5rem; }
  .m--gap-x--32 { column-gap: 2rem; }
  .m--gap-x--40 { column-gap: 2.5rem; }
  .m--gap-x--48 { column-gap: 3rem; }
  .m--gap-x--56 { column-gap: 3.5rem; }
  .m--gap-x--64 { column-gap: 4rem; }
  .m--gap-x--72 { column-gap: 4.5rem; }
  .m--gap-x--80 { column-gap: 5rem; }
  .m--gap-x--96 { column-gap: 6rem; }
  .m--gap-x--112 { column-gap: 7rem; }
  .m--gap-x--128 { column-gap: 8rem; }

  .m--gap-y--0 { row-gap: 0; }
  .m--gap-y--8 { row-gap: 0.5rem; }
  .m--gap-y--16 { row-gap: 1rem; }
  .m--gap-y--24 { row-gap: 1.5rem; }
  .m--gap-y--32 { row-gap: 2rem; }
  .m--gap-y--40 { row-gap: 2.5rem; }
  .m--gap-y--48 { row-gap: 3rem; }
  .m--gap-y--56 { row-gap: 3.5rem; }
  .m--gap-y--64 { row-gap: 4rem; }
  .m--gap-y--72 { row-gap: 4.5rem; }
  .m--gap-y--80 { row-gap: 5rem; }
  .m--gap-y--96 { row-gap: 6rem; }
  .m--gap-y--112 { row-gap: 7rem; }
  .m--gap-y--128 { row-gap: 8rem; }

  /* Typografie */
  .m--text--8 { font-size: 0.5rem; }
  .m--text--12 { font-size: 0.75rem; }
  .m--text--14 { font-size: 0.875rem; }
  .m--text--16 { font-size: 1rem; }
  .m--text--18 { font-size: 1.125rem; }
  .m--text--20 { font-size: 1.25rem; }
  .m--text--24 { font-size: 1.5rem; }
  .m--text--32 { font-size: 2rem; }
  .m--text--40 { font-size: 2.5rem; }
  .m--text--48 { font-size: 3rem; }
  .m--text--56 { font-size: 3.5rem; }
  .m--text--64 { font-size: 4rem; }
  .m--text--72 { font-size: 4.5rem; }
  .m--text--80 { font-size: 5rem; }
  .m--text--96 { font-size: 6rem; }
  .m--text--112 { font-size: 7rem; }
  .m--text--128 { font-size: 8rem; }
  .m--text--left { text-align: left; }
  .m--text--center { text-align: center; }
  .m--text--right { text-align: right; }
  .m--text--justify { text-align: justify; }

  /* Kleuren */
  .m--text--primary { color: var(--primary); }
  .m--text--secondary { color: var(--secondary); }
  .m--text--dark { color: var(--dark); }
  .m--text--light { color: var(--light); }
  .m--text--muted { color: var(--muted); }
  .m--text--white { color: var(--white); }
  .m--text--black { color: var(--black); }
  .m--bg--primary { background-color: var(--primary); }
  .m--bg--secondary { background-color: var(--secondary); }
  .m--bg--dark { background-color: var(--dark); }
  .m--bg--light { background-color: var(--light); }
  .m--bg--muted { background-color: var(--muted); }
  .m--bg--white { background-color: var(--white); }
  .m--bg--black { background-color: var(--black); }

  /* Display & positie */
  .m--block { display: block; }
  .m--inline--block { display: inline-block; }
  .m--inline { display: inline; }
  .m--flex { display: flex; }
  .m--inline--flex { display: inline-flex; }
  .m--grid { display: grid; }
  .m--inline--grid { display: inline-grid; }
  .m--hidden { display: none !important; }
  .m--static { position: static; }
  .m--relative { position: relative; }
  .m--absolute { position: absolute; }

  /* Flexbox */
  .m--flex--row { flex-direction: row; }
  .m--flex--row-reverse { flex-direction: row-reverse; }
  .m--flex--col { flex-direction: column; }
  .m--flex--col-reverse { flex-direction: column-reverse; }
  .m--flex--wrap { flex-wrap: wrap; }
  .m--flex--nowrap { flex-wrap: nowrap; }
  .m--flex--wrap-reverse { flex-wrap: wrap-reverse; }

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

  .m--items--start { align-items: flex-start; }
  .m--items--end { align-items: flex-end; }
  .m--items--center { align-items: center; }
  .m--items--baseline { align-items: baseline; }
  .m--items--stretch { align-items: stretch; }

  .m--content--start { align-content: flex-start; }
  .m--content--end { align-content: flex-end; }
  .m--content--center { align-content: center; }
  .m--content--between { align-content: space-between; }
  .m--content--around { align-content: space-around; }
  .m--content--evenly { align-content: space-evenly; }

  .m--self--auto { align-self: auto; }
  .m--self--start { align-self: flex-start; }
  .m--self--end { align-self: flex-end; }
  .m--self--center { align-self: center; }
  .m--self--stretch { align-self: stretch; }
  .m--self--baseline { align-self: baseline; }

  .m--flex--1 { flex: 1 1 0%; }
  .m--flex--auto { flex: 1 1 auto; }
  .m--flex--initial { flex: 0 1 auto; }
  .m--flex--none { flex: none; }
  .m--basis--10pct { flex: 1 1 10%; }
  .m--basis--20pct { flex: 1 1 20%; }
  .m--basis--25pct { flex: 1 1 25%; }
  .m--basis--30pct { flex: 1 1 30%; }
  .m--basis--33pct { flex: 1 1 33.3333%; }
  .m--basis--40pct { flex: 1 1 40%; }
  .m--basis--50pct { flex: 1 1 50%; }
  .m--basis--60pct { flex: 1 1 60%; }
  .m--basis--66pct { flex: 1 1 66.6667%; }
  .m--basis--70pct { flex: 1 1 70%; }
  .m--basis--75pct { flex: 1 1 75%; }
  .m--basis--80pct { flex: 1 1 80%; }
  .m--basis--90pct { flex: 1 1 90%; }
  .m--basis--100pct { flex: 1 1 100%; }

  .m--order--first { order: -1; }
  .m--order--last { order: 999; }
  .m--order--0 { order: 0; }
  .m--order--1 { order: 1; }
  .m--order--2 { order: 2; }
  .m--order--3 { order: 3; }
  .m--columns--1 { column-count: 1; }
  .m--columns--2 { column-count: 2; }
  .m--columns--3 { column-count: 3; }

  /* Grid */
  .m--cols--1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .m--cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m--cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m--cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .m--cols--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .m--cols--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .m--cols--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .m--cols--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .m--cols--9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .m--cols--10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .m--cols--11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .m--cols--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  .m--col-span--1 { grid-column: span 1 / span 1; }
  .m--col-span--2 { grid-column: span 2 / span 2; }
  .m--col-span--3 { grid-column: span 3 / span 3; }
  .m--col-span--4 { grid-column: span 4 / span 4; }
  .m--col-span--5 { grid-column: span 5 / span 5; }
  .m--col-span--6 { grid-column: span 6 / span 6; }
  .m--col-span--7 { grid-column: span 7 / span 7; }
  .m--col-span--8 { grid-column: span 8 / span 8; }
  .m--col-span--9 { grid-column: span 9 / span 9; }
  .m--col-span--10 { grid-column: span 10 / span 10; }
  .m--col-span--11 { grid-column: span 11 / span 11; }
  .m--col-span--12 { grid-column: span 12 / span 12; }
  .m--col-span--full { grid-column: 1 / -1; }

  .m--grid--auto-160 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }
  .m--grid--auto-200 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr)); }
  .m--grid--auto-240 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
  .m--grid--auto-280 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr)); }
  .m--grid--auto-320 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
  .m--grid--auto-360 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22.5rem, 100%), 1fr)); }
  .m--grid--auto-400 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr)); }

  /* Breedte, hoogte & verhouding */
  .m--w--auto { width: auto; }
  .m--w--full { width: 100%; }
  .m--w--screen { width: 100vw; }
  .m--w--min { width: min-content; }
  .m--w--max { width: max-content; }
  .m--w--fit { width: fit-content; }
  .m--w--10pct { width: 10%; }
  .m--w--20pct { width: 20%; }
  .m--w--25pct { width: 25%; }
  .m--w--30pct { width: 30%; }
  .m--w--33pct { width: 33.3333%; }
  .m--w--40pct { width: 40%; }
  .m--w--50pct { width: 50%; }
  .m--w--60pct { width: 60%; }
  .m--w--66pct { width: 66.6667%; }
  .m--w--70pct { width: 70%; }
  .m--w--75pct { width: 75%; }
  .m--w--80pct { width: 80%; }
  .m--w--90pct { width: 90%; }
  .m--w--100pct { width: 100%; }
  .m--w--8 { width: 0.5rem; }
  .m--w--16 { width: 1rem; }
  .m--w--24 { width: 1.5rem; }
  .m--w--32 { width: 2rem; }
  .m--w--40 { width: 2.5rem; }
  .m--w--48 { width: 3rem; }
  .m--w--56 { width: 3.5rem; }
  .m--w--64 { width: 4rem; }
  .m--w--72 { width: 4.5rem; }
  .m--w--80 { width: 5rem; }
  .m--w--96 { width: 6rem; }
  .m--w--112 { width: 7rem; }
  .m--w--128 { width: 8rem; }
  .m--w--160 { width: 10rem; }
  .m--w--192 { width: 12rem; }
  .m--w--224 { width: 14rem; }
  .m--w--256 { width: 16rem; }
  .m--w--320 { width: 20rem; }
  .m--w--384 { width: 24rem; }
  .m--w--448 { width: 28rem; }
  .m--w--512 { width: 32rem; }

  .m--h--auto { height: auto; }
  .m--h--full { height: 100%; }
  .m--h--screen { height: 100vh; }
  .m--h--screen--header { height: calc(100vh - var(--header-height, 0px)); }
  .m--h--min { height: min-content; }
  .m--h--max { height: max-content; }
  .m--h--fit { height: fit-content; }
  .m--h--40vh { height: 40vh; }
  .m--h--50vh { height: 50vh; }
  .m--h--60vh { height: 60vh; }
  .m--h--70vh { height: 70vh; }
  .m--h--80vh { height: 80vh; }
  .m--h--8 { height: 0.5rem; }
  .m--h--16 { height: 1rem; }
  .m--h--24 { height: 1.5rem; }
  .m--h--32 { height: 2rem; }
  .m--h--40 { height: 2.5rem; }
  .m--h--48 { height: 3rem; }
  .m--h--56 { height: 3.5rem; }
  .m--h--64 { height: 4rem; }
  .m--h--72 { height: 4.5rem; }
  .m--h--80 { height: 5rem; }
  .m--h--96 { height: 6rem; }
  .m--h--112 { height: 7rem; }
  .m--h--128 { height: 8rem; }
  .m--h--160 { height: 10rem; }
  .m--h--192 { height: 12rem; }
  .m--h--224 { height: 14rem; }
  .m--h--256 { height: 16rem; }
  .m--h--320 { height: 20rem; }
  .m--h--384 { height: 24rem; }
  .m--h--448 { height: 28rem; }
  .m--h--512 { height: 32rem; }

  .m--max-w--none { max-width: none; }
  .m--max-w--full { max-width: 100%; }
  .m--max-w--256 { max-width: 16rem; }
  .m--max-w--320 { max-width: 20rem; }
  .m--max-w--384 { max-width: 24rem; }
  .m--max-w--448 { max-width: 28rem; }
  .m--max-w--512 { max-width: 32rem; }
  .m--max-w--640 { max-width: 40rem; }
  .m--max-w--768 { max-width: 48rem; }
  .m--max-w--1024 { max-width: 64rem; }
  .m--max-w--1280 { max-width: 80rem; }
  .m--max-w--1536 { max-width: 96rem; }

  .m--aspect--1-1 { aspect-ratio: 1 / 1; }
  .m--aspect--4-3 { aspect-ratio: 4 / 3; }
  .m--aspect--3-4 { aspect-ratio: 3 / 4; }
  .m--aspect--3-2 { aspect-ratio: 3 / 2; }
  .m--aspect--2-3 { aspect-ratio: 2 / 3; }
  .m--aspect--16-9 { aspect-ratio: 16 / 9; }
  .m--aspect--9-16 { aspect-ratio: 9 / 16; }
  .m--aspect--21-9 { aspect-ratio: 21 / 9; }
  .m--aspect--auto { aspect-ratio: auto; }

  /* Border width (bv. t--border-r--0) */
  .m--border--0 { border-width: 0; }
  .m--border--1 { border-width: 1px; }
  .m--border--2 { border-width: 2px; }

  .m--border-t--0 { border-top-width: 0; }
  .m--border-t--1 { border-top-width: 1px; }
  .m--border-t--2 { border-top-width: 2px; }

  .m--border-r--0 { border-right-width: 0; }
  .m--border-r--1 { border-right-width: 1px; }
  .m--border-r--2 { border-right-width: 2px; }

  .m--border-b--0 { border-bottom-width: 0; }
  .m--border-b--1 { border-bottom-width: 1px; }
  .m--border-b--2 { border-bottom-width: 2px; }

  .m--border-l--0 { border-left-width: 0; }
  .m--border-l--1 { border-left-width: 1px; }
  .m--border-l--2 { border-left-width: 2px; }

  .m--border-x--0 { border-left-width: 0; border-right-width: 0; }
  .m--border-x--1 { border-left-width: 1px; border-right-width: 1px; }
  .m--border-x--2 { border-left-width: 2px; border-right-width: 2px; }

  .m--border-y--0 { border-top-width: 0; border-bottom-width: 0; }
  .m--border-y--1 { border-top-width: 1px; border-bottom-width: 1px; }
  .m--border-y--2 { border-top-width: 2px; border-bottom-width: 2px; }

  /* Border radius */
  .m--rounded--0 { border-radius: 0; }
  .m--rounded--8 { border-radius: 8px; }
  .m--rounded--16 { border-radius: 16px; }
  .m--rounded--24 { border-radius: 24px; }
  .m--rounded--32 { border-radius: 32px; }
  .m--rounded--40 { border-radius: 40px; }
  .m--rounded--48 { border-radius: 48px; }
  .m--rounded--full { border-radius: 9999px; }
}