:root {
    /* to support syntax like color: light-dark(black, white); */
    color-scheme: light dark; 

    /* BREAKPOINTS */
    /* Mobile is the default! */
    /* --small-upwards: 700px; */
    /* --large-upwards: 1200px; */

    /* COLORS */

    /* Default Color Sections */

    --test: hsl(206, 61%, 47%);
    --hue: 31;
    --bg-light: hsl(var(--hue), 25%, 90%);
    --bg-dark: hsl(var(--hue), 20%, 12%);

    --bg-standout-light: #e7e7e7; 
    --bg-standout-dark: #252525; 

    --text-primary-light: hsl(var(--hue), 30%, 18%);
    --text-primary-dark: hsl(var(--hue), 50%, 93%);

    --text-secondary-light: hsl(var(--hue), 10%, 45%);
    --text-secondary-dark: hsl(var(--hue), 30%, 80%);

    --text-tertiary-light: hsl(var(--hue), 10%, 55%);
    --text-tertiary-dark: hsl(var(--hue), 30%, 70%);

    /* TEXT COLORS */

    --link-light: #293dad;
    --link-dark: #71c9ff;

    --error-light: #870000;
    --error-dark: #ff7171;

    --placeholder-light: #808080; /* ideal: lower opacity of text or text2 */
    --placeholder-dark: #656565;

    /* SPACING */
    --spacing: 4px; /* base variable gets multiplied */

    /* SECTION DEFAULTS */
    --max-w: 840px;
    --section-padding: calc(var(--spacing) * 5);
    --section-padding-desktop: calc(var(--spacing) * 10);

    --border-width: 1px;
    --border-color-light: hsl(var(--hue), 10%, 75%);
    --border-color-dark: hsl(var(--hue), 10%, 34%);

    /* INPUTS */
    --input-border: 2px solid hsl(0, 0%, 51%);
    --input-radius: 8px;
    --input-min-h: 52px;

    /* Hero */

    /* Glow Center */
    --x: -9999px;
    --y: -9999px;

    /* Background Glow */
    --bg: hsl(var(--hue), 45%, 70%);
    --glow: hsl(0, 0%, 100%);
    --grid-lines: hsl(var(--hue), 50%, 75%);

    /* Colors */
    --font-color: hsl(0, 0%, 18%);
  
}

.hero {
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 150%;
    padding: 80px 20px 90px;

    min-height: 50vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    font-family: Switzer, system-ui, sans-serif;
    color: var(--font-color);

    /* GRID */
    background-color: var(--bg);

    background-image: 
    conic-gradient(
        from 270deg at bottom 1px right 1px, 
        var(--bg) 25%, 
        transparent 0
    ),
    radial-gradient(
        180px at var(--x) var(--y), 
        var(--glow), 
        var(--grid-lines)
    );

    background-repeat: repeat, no-repeat;
    background-size: 9.1vw 9.1vw, auto;
}

/* Basics */

html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

.debug * {
    outline: 1px solid gold;
}
  

/* Typography */

body {
    margin: 0;
    /* font-size: 1.5em; */
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    line-height: 150%;
    background-color: light-dark(var(--bg-light), var(--bg-dark));
    color: light-dark(var(--text-primary-light), var(--text-primary-dark));
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { 
    line-height: 130%;
    margin: 0 0 1em;
}

.display {
    font-size: clamp(1.9rem, 6vw, 80px);
    font-family: 'Dela Gothic One', system-ui, sans-serif;
    margin: 0 0 0.3em;
    line-height: 115%;
    font-weight: 900;
}

h1, .h1 {
    font-size: clamp(2rem, 4vw, 3rem);
}

h2, .h2 { 
    font-size: clamp(1.6rem, 3.5vw, 2.3rem);
}

h3, .h3 { 
    font-size: clamp(1.3rem, 3.2vw, 2rem);
}
h4, .h4 { 
    font-size: clamp(1.1rem, 3vw, 1.8rem);
}
h5, .h5, h6, .h6 { 
    font-size: clamp(1rem, 2.2vw, 1.5rem);
}

.small { font-size: 1.25rem; }
.xsmall { font-size: 1rem }


hr {
    margin: 4em 0;
    border-width: 1px;
    border-style: solid;
    border-color: light-dark( var(--border-color-light), var(--border-color-dark) );
}

li { 
    margin: .5em 0;
}

div {
    border-color: light-dark(var(--border-color-light), var(--border-color-dark));
}

/* Basic Layout */
section, article, footer {
    padding: calc(var(--section-padding) * 2) 0;
}

nav {
    padding: var(--section-padding) 0;
    gap: 1rem;
}

.container {
    width: 90%;
    max-width: var(--max-w);
    margin-left: auto;
    margin-right: auto;
}


.carousel {
    padding: 0 calc(50% - min(var(--max-w), 90%) / 2);
    overflow-x: scroll;
    /* scrollbar-width: none; */
    scroll-snap-type: x proximity;
    scroll-padding: 0 calc(50% - min(var(--max-w), 90%) / 2);
}

.carousel-child {
    scroll-snap-align: start;
}

    .carousel-child img, .carousel-child video {
        height: 300px;
        width: auto;

        background-color: #c2c2c246;
        padding: 12px;
    }

    .carousel-nav {
        margin-top: 2rem;
        text-align: left;
        gap: 1rem;
    }

    .carousel-button {
       background-color: transparent;
        border: 2px solid light-dark(var(--text-tertiary-light),var(--text-tertiary-dark));
        width: 56px;
        height: 56px;
        border-radius: 50%;
        cursor: pointer;
    }

    .carousel-button:hover {
        background-color: hsla(0, 0%, 60%, 0.15);
    }

@media (max-width: 600px) {
    .carousel {
        align-items: end; /* Align children to bottom */
    }
    
    .carousel-child {
        max-width: 80vw;
    }

    .carousel-child img, .carousel-child video {
        height: unset;

        padding: 8px;
    }
}
/* Text Colors */

.text-primary {
    color: light-dark(var(--text-primary-light),var(--text-primary-dark)); 
}

.text-secondary {
    color: light-dark(var(--text-secondary-light),var(--text-secondary-dark)); 
}

.text-tertiary {
    color: light-dark(var(--text-tertiary-light),var(--text-tertiary-dark)); 
}

a {
    color: light-dark(var(--link-light),var(--link-dark)); 
    font-weight: 500;
    text-decoration-style: solid;
    text-decoration-thickness: 10%; 
    text-underline-offset: 10%; 
    text-underline-position: from-font;
}

a:hover {
    text-decoration: none;
}

.link {
    color: inherit;
    text-decoration: none;
}

.button-primary, .button-secondary {
    padding: .6em 1.5em .5em;
    text-decoration: none;
    border-radius: 1000px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-items: center;
}

.button-primary {
    color: light-dark(var(--text-primary-dark), var(--text-primary-light));
    background-color: light-dark(var(--bg-dark), var(--bg-light));
}

.button-secondary {
    background-color: light-dark(var(--bg-light), var(--bg-dark));
    border: 3px solid;
    border-color: light-dark(var(--border-color-light), var(--border-color-dark));
    color: inherit;
}

/* Tabs */
.tab { 
    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 8) calc(var(--spacing) * 3);
    color: inherit;
    text-decoration: none;
    font-size: 0.8em;
}

.tab.active {
    border-bottom: calc(var(--spacing) * 1) solid;
    border-color: light-dark(var(--text-primary-light), var(--text-primary-dark));
    font-weight: 700;
}


/* Anna CSS 0.0.2 */
/* Utilities Only */

/* Article Type */

article h1:not(:first-child),
article h2:not(:first-child),
article h3:not(:first-child),
article h4:not(:first-child),
article h5:not(:first-child),
article h6:not(:first-child) {
    margin: 2.5em 0 0.5em;
}

article p {
    line-height: 150%;
}

.b, strong, .strong {
    font-weight: 700;
}

.ws-normal {
    white-space: normal;
}
.nowrap {
    white-space: nowrap;
}

/* Other text  */

del {
    text-decoration: line-through;
    text-decoration-color: rgba(215, 54, 78, 0.6);
    text-decoration-thickness: 4px;
}

/* Grid */

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: calc(var(--spacing) * 2);
}

.span-full {
    grid-column: 1 / -1;
}

/* Positions */

.sticky {
    position: sticky;
    top: 0;
}

img {
    /* width: 100%; */
    height: auto;
}


/* Utilities */
/* TODO: copy to other breakpoints */
.measure { max-width: 40em }
.measure-narrow { max-width: 30em }

.ttu { text-transform: uppercase }
.ttc { text-transform: capitalize }
.ttl { text-transform: lowercase }
.ttn { text-transform: none }
.tc { text-align: center }
.tl { text-align: left }

.tracked { letter-spacing: 0.1em }

.w-100 { width: 100% }
.mw-100 { max-width: 100% }

.min-dvh-100 { min-height: 100dvh }
.min-vh-50 { min-height: 50vh }

.w-fit-content { width: fit-content }
.flex-shrink-0 {
    flex-shrink: 0;
}

.object-fit-cover { object-fit: cover }
.object-fit-contain { object-fit: contain }

.bg-cover { background-size: cover !important; }
.bg-contain { background-size: contain !important; }

.center {
    margin-right: auto;
    margin-left: auto;
}

.ar-1x1 { aspect-ratio: 1 / 1 }
.ar-2x1 { aspect-ratio: 2 / 1 }
.ar-4x3 { aspect-ratio: 4 / 3 }
.ar-5x3 { aspect-ratio: 5 / 3 }

.ar-3x4 { aspect-ratio: 3 / 4 }
.ar-3x5 { aspect-ratio: 3 / 5 }

.ba, .bt, .br, .bb, .bl { 
    border-width: var(--border-width);
    border-color: light-dark(var(--border-color-light), var(--border-color-dark));
}
.ba { border-style: solid }
.bt { border-top-style: solid }
.br { border-right-style: solid }
.bb { border-bottom-style: solid }
.bl { border-left-style: solid }
.bn { border-style: none }

/* Interactions - Same across breakpoints */

/* Opacity */

.dim {
	opacity: 1;
	transition: opacity 0.15s ease-in;
}
.dim:hover, .dim:focus {
	opacity: 0.5;
	transition: opacity 0.15s ease-in;
}
.dim:active {
	opacity: 0.8;
	transition: opacity 0.15s ease-out;
}

/* Translate */

.grow, .grow-large, .raise, .shrink {
	-font-smoothing: grayscale;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: transform 0.25s ease-out;
}
.grow:hover, .grow:focus {
	transform: scale(1.05);
}
.grow:active {
	transform: scale(0.9);
}

.grow-large:hover, .grow-large:focus {
	transform: scale(1.8);
}
.grow-large:active {
	transform: scale(0.95);
}

.raise:hover, .raise:focus {
	transform: translateY(-.1em);
}

.raise:active {
	transform: translateY(-.05em);
}

.shrink:hover, .shrink:focus {
	transform: scale( .95);
}

.shrink:active {
	transform: scale( .9);
}


/* Padding */

/* padding - all sides */
.pa0 { padding: 0}
.pa1 { padding: var(--spacing)}
.pa2 { padding: calc(var(--spacing) * 2)} 
.pa3 { padding: calc(var(--spacing) * 3)}
.pa4 { padding: calc(var(--spacing) * 4)}
.pa5 { padding: calc(var(--spacing) * 5)}
.pa6 { padding: calc(var(--spacing) * 6)}

.pa7 { padding: calc(var(--spacing) * 8)}
.pa8 { padding: calc(var(--spacing) * 10)}
.pa9 { padding: calc(var(--spacing) * 15)}
.pa10 { padding: calc(var(--spacing) * 20)}

/* padding-top */
.pt0 { padding-top: 0}
.pt1 { padding-top: var(--spacing)}
.pt2 { padding-top: calc(var(--spacing) * 2)} 
.pt3 { padding-top: calc(var(--spacing) * 3)}
.pt4 { padding-top: calc(var(--spacing) * 4)}
.pt5 { padding-top: calc(var(--spacing) * 5)}
.pt6 { padding-top: calc(var(--spacing) * 6)}

.pt7 { padding-top: calc(var(--spacing) * 8)}
.pt8 { padding-top: calc(var(--spacing) * 10)}
.pt9 { padding-top: calc(var(--spacing) * 15)}
.pt10 { padding-top: calc(var(--spacing) * 20)}

/* padding-right */
.pr0 { padding-right: 0}
.pr1 { padding-right: var(--spacing)}
.pr2 { padding-right: calc(var(--spacing) * 2)} 
.pr3 { padding-right: calc(var(--spacing) * 3)}
.pr4 { padding-right: calc(var(--spacing) * 4)}
.pr5 { padding-right: calc(var(--spacing) * 5)}
.pr6 { padding-right: calc(var(--spacing) * 6)}

.pr7 { padding-right: calc(var(--spacing) * 8)}
.pr8 { padding-right: calc(var(--spacing) * 10)}
.pr9 { padding-right: calc(var(--spacing) * 15)}
.pr10 { padding-right: calc(var(--spacing) * 20)}

/* padding-bottom  */
.pb0 { padding-bottom: 0}
.pb1 { padding-bottom: var(--spacing)}
.pb2 { padding-bottom: calc(var(--spacing) * 2)} 
.pb3 { padding-bottom: calc(var(--spacing) * 3)}
.pb4 { padding-bottom: calc(var(--spacing) * 4)}
.pb5 { padding-bottom: calc(var(--spacing) * 5)}
.pb6 { padding-bottom: calc(var(--spacing) * 6)}

.pb7 { padding-bottom: calc(var(--spacing) * 8)}
.pb8 { padding-bottom: calc(var(--spacing) * 10)}
.pb9 { padding-bottom: calc(var(--spacing) * 15)}
.pb10 { padding-bottom: calc(var(--spacing) * 20)}

/* padding-left */
.pl0 { padding-left: 0}
.pl1 { padding-left: var(--spacing)}
.pl2 { padding-left: calc(var(--spacing) * 2)} 
.pl3 { padding-left: calc(var(--spacing) * 3)}
.pl4 { padding-left: calc(var(--spacing) * 4)}
.pl5 { padding-left: calc(var(--spacing) * 5)}
.pl6 { padding-left: calc(var(--spacing) * 6)}

.pl7 { padding-left: calc(var(--spacing) * 8)}
.pl8 { padding-left: calc(var(--spacing) * 10)}
.pl9 { padding-left: calc(var(--spacing) * 15)}
.pl10 { padding-left: calc(var(--spacing) * 20)}

/* Margin */

/* margin - all sides */
.ma0 { margin: 0}
.ma1 { margin: var(--spacing)}
.ma2 { margin: calc(var(--spacing) * 2)} 
.ma3 { margin: calc(var(--spacing) * 3)}
.ma4 { margin: calc(var(--spacing) * 4)}
.ma5 { margin: calc(var(--spacing) * 5)}
.ma6 { margin: calc(var(--spacing) * 6)}

.ma7 { margin: calc(var(--spacing) * 8)}
.ma8 { margin: calc(var(--spacing) * 10)}
.ma9 { margin: calc(var(--spacing) * 15)}
.ma10 { margin: calc(var(--spacing) * 20)}

/* margin-top */
.mt0 { margin-top: 0}
.mt1 { margin-top: var(--spacing)}
.mt2 { margin-top: calc(var(--spacing) * 2)} 
.mt3 { margin-top: calc(var(--spacing) * 3)}
.mt4 { margin-top: calc(var(--spacing) * 4)}
.mt5 { margin-top: calc(var(--spacing) * 5)}
.mt6 { margin-top: calc(var(--spacing) * 6)}

.mt7 { margin-top: calc(var(--spacing) * 8)}
.mt8 { margin-top: calc(var(--spacing) * 10)}
.mt9 { margin-top: calc(var(--spacing) * 15)}
.mt10 { margin-top: calc(var(--spacing) * 20)}

/* margin-right */
.mr0 { margin-right: 0}
.mr1 { margin-right: var(--spacing)}
.mr2 { margin-right: calc(var(--spacing) * 2)} 
.mr3 { margin-right: calc(var(--spacing) * 3)}
.mr4 { margin-right: calc(var(--spacing) * 4)}
.mr5 { margin-right: calc(var(--spacing) * 5)}
.mr6 { margin-right: calc(var(--spacing) * 6)}

.mr7 { margin-right: calc(var(--spacing) * 8)}
.mr8 { margin-right: calc(var(--spacing) * 10)}
.mr9 { margin-right: calc(var(--spacing) * 15)}
.mr10 { margin-right: calc(var(--spacing) * 20)}

/* margin-bottom  */
.mb0 { margin-bottom: 0}
.mb1 { margin-bottom: var(--spacing)}
.mb2 { margin-bottom: calc(var(--spacing) * 2)} 
.mb3 { margin-bottom: calc(var(--spacing) * 3)}
.mb4 { margin-bottom: calc(var(--spacing) * 4)}
.mb5 { margin-bottom: calc(var(--spacing) * 5)}
.mb6 { margin-bottom: calc(var(--spacing) * 6)}

.mb7 { margin-bottom: calc(var(--spacing) * 8)}
.mb8 { margin-bottom: calc(var(--spacing) * 10)}
.mb9 { margin-bottom: calc(var(--spacing) * 15)}
.mb10 { margin-bottom: calc(var(--spacing) * 20)}

/* margin-left */
.ml0 { margin-left: 0}
.ml1 { margin-left: var(--spacing)}
.ml2 { margin-left: calc(var(--spacing) * 2)} 
.ml3 { margin-left: calc(var(--spacing) * 3)}
.ml4 { margin-left: calc(var(--spacing) * 4)}
.ml5 { margin-left: calc(var(--spacing) * 5)}
.ml6 { margin-left: calc(var(--spacing) * 6)}

.ml7 { margin-left: calc(var(--spacing) * 8)}
.ml8 { margin-left: calc(var(--spacing) * 10)}
.ml9 { margin-left: calc(var(--spacing) * 15)}
.ml10 { margin-left: calc(var(--spacing) * 20)}

/* Negative Margin */

/* margin - all sides */
.na0 { margin: 0}
.na1 { margin: calc(var(--spacing) * -1)}
.na2 { margin: calc(var(--spacing) * -2)} 
.na3 { margin: calc(var(--spacing) * -3)}
.na4 { margin: calc(var(--spacing) * -4)}
.na5 { margin: calc(var(--spacing) * -5)}
.na6 { margin: calc(var(--spacing) * -6)}

.na7 { margin: calc(var(--spacing) * -8)}
.na8 { margin: calc(var(--spacing) * -10)}
.na9 { margin: calc(var(--spacing) * -15)}
.na10 { margin: calc(var(--spacing) * -20)}

/* margin-top */
.nt0 { margin-top: 0}
.nt1 { margin-top: calc(var(--spacing) * -1)}
.nt2 { margin-top: calc(var(--spacing) * -2)} 
.nt3 { margin-top: calc(var(--spacing) * -3)}
.nt4 { margin-top: calc(var(--spacing) * -4)}
.nt5 { margin-top: calc(var(--spacing) * -5)}
.nt6 { margin-top: calc(var(--spacing) * -6)}

.nt7 { margin-top: calc(var(--spacing) * -8)}
.nt8 { margin-top: calc(var(--spacing) * -10)}
.nt9 { margin-top: calc(var(--spacing) * -15)}
.nt10 { margin-top: calc(var(--spacing) * -20)}

/* margin-right */
.nr0 { margin-right: calc(var(--spacing) * -1)}
.nr1 { margin-right: var(--spacing)}
.nr2 { margin-right: calc(var(--spacing) * -2)} 
.nr3 { margin-right: calc(var(--spacing) * -3)}
.nr4 { margin-right: calc(var(--spacing) * -4)}
.nr5 { margin-right: calc(var(--spacing) * -5)}
.nr6 { margin-right: calc(var(--spacing) * -6)}

.nr7 { margin-right: calc(var(--spacing) * -8)}
.nr8 { margin-right: calc(var(--spacing) * -10)}
.nr9 { margin-right: calc(var(--spacing) * -15)}
.nr10 { margin-right: calc(var(--spacing) * -20)}

/* margin-bottom  */
.nb0 { margin-bottom: calc(var(--spacing) * -1)}
.nb1 { margin-bottom: var(--spacing)}
.nb2 { margin-bottom: calc(var(--spacing) * -2)} 
.nb3 { margin-bottom: calc(var(--spacing) * -3)}
.nb4 { margin-bottom: calc(var(--spacing) * -4)}
.nb5 { margin-bottom: calc(var(--spacing) * -5)}
.nb6 { margin-bottom: calc(var(--spacing) * -6)}

.nb7 { margin-bottom: calc(var(--spacing) * -8)}
.nb8 { margin-bottom: calc(var(--spacing) * -10)}
.nb9 { margin-bottom: calc(var(--spacing) * -15)}
.nb10 { margin-bottom: calc(var(--spacing) * -20)}

/* margin-left */
.nl0 { margin-left: calc(var(--spacing) * -1)}
.nl1 { margin-left: var(--spacing)}
.nl2 { margin-left: calc(var(--spacing) * -2)} 
.nl3 { margin-left: calc(var(--spacing) * -3)}
.nl4 { margin-left: calc(var(--spacing) * -4)}
.nl5 { margin-left: calc(var(--spacing) * -5)}
.nl6 { margin-left: calc(var(--spacing) * -6)}

.nl7 { margin-left: calc(var(--spacing) * -8)}
.nl8 { margin-left: calc(var(--spacing) * -10)}
.nl9 { margin-left: calc(var(--spacing) * -15)}
.nl10 { margin-left: calc(var(--spacing) * -20)}

/* Gap */
.gap0 { gap: 0}
.gap1 { gap: var(--spacing)}
.gap2 { gap: calc(var(--spacing) * 2)} 
.gap3 { gap: calc(var(--spacing) * 3)}
.gap4 { gap: calc(var(--spacing) * 4)}
.gap5 { gap: calc(var(--spacing) * 5)}
.gap6 { gap: calc(var(--spacing) * 6)}

.gap7 { gap: calc(var(--spacing) * 8)}
.gap8 { gap: calc(var(--spacing) * 10)}
.gap9 { gap: calc(var(--spacing) * 15)}
.gap10 { gap: calc(var(--spacing) * 20)}

/* Display */
.dn {
    display: none;
}
.di {
    display: inline;
}
.db {
    display: block;
}
.dib {
    display: inline-block;
}
/* Flex (from Tachyons) */
.flex {
	display: flex;
}
.inline-flex {
	display: inline-flex;
}
.flex-auto {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
}
.flex-none {
	flex: none;
}
.flex-column {
	flex-direction: column;
}
.flex-row {
	flex-direction: row;
}
.flex-wrap {
	flex-wrap: wrap;
}
.flex-nowrap {
	flex-wrap: nowrap;
}
.flex-wrap-reverse {
	flex-wrap: wrap-reverse;
}
.flex-column-reverse {
	flex-direction: column-reverse;
}
.flex-row-reverse {
	flex-direction: row-reverse;
}
.flex-center {
	align-items: center;
    justify-content: center;
}
.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;
}
.self-start {
	align-self: flex-start;
}
.self-end {
	align-self: flex-end;
}
.self-center {
	align-self: center;
}
.self-baseline {
	align-self: baseline;
}
.self-stretch {
	align-self: stretch;
}
.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;
}
.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-stretch {
	align-content: stretch;
}

.fw1 { font-weight: 100; }
.fw2 { font-weight: 200; }
.fw3 { font-weight: 300; }
.fw4 { font-weight: 400; }
.fw5 { font-weight: 500; }
.fw6 { font-weight: 600; }
.fw7 { font-weight: 700; }
.fw8 { font-weight: 800; }
.fw9 { font-weight: 900; }

/* Border Radius */
.br0 { border-radius: 0; }
.br1 { border-radius: 0.125rem; }
.br2 { border-radius: 0.25rem; }
.br3 { border-radius: 0.5rem; }
.br4 { border-radius: 1rem; }
.br-100 { border-radius: 100%; }
.br-pill { border-radius: 9999px; }

@media screen and (min-width: 700px) {

    section, article, footer {
        padding: calc(var(--section-padding-desktop) * 1.5) 0;
    }

    nav {
        padding: calc(var(--section-padding-desktop) * .5) 0;
    }
    /* -ns */

    /* Positions -ns */

    .center-ns {
        margin-right: auto;
        margin-left: auto;
    }

    /* Padding -ns */

    /* padding - all sides */
    .pa0-ns { padding: 0}
    .pa1-ns { padding: var(--spacing)}
    .pa2-ns { padding: calc(var(--spacing) * 2)} 
    .pa3-ns { padding: calc(var(--spacing) * 3)}
    .pa4-ns { padding: calc(var(--spacing) * 4)}
    .pa5-ns { padding: calc(var(--spacing) * 5)}
    .pa6-ns { padding: calc(var(--spacing) * 6)}

    .pa7-ns { padding: calc(var(--spacing) * 8)}
    .pa8-ns { padding: calc(var(--spacing) * 10)}
    .pa9-ns { padding: calc(var(--spacing) * 15)}
    .pa10-ns { padding: calc(var(--spacing) * 20)}

    /* padding-top */
    .pt0-ns { padding-top: 0}
    .pt1-ns { padding-top: var(--spacing)}
    .pt2-ns { padding-top: calc(var(--spacing) * 2)} 
    .pt3-ns { padding-top: calc(var(--spacing) * 3)}
    .pt4-ns { padding-top: calc(var(--spacing) * 4)}
    .pt5-ns { padding-top: calc(var(--spacing) * 5)}
    .pt6-ns { padding-top: calc(var(--spacing) * 6)}

    .pt7-ns { padding-top: calc(var(--spacing) * 8)}
    .pt8-ns { padding-top: calc(var(--spacing) * 10)}
    .pt9-ns { padding-top: calc(var(--spacing) * 15)}
    .pt10-ns { padding-top: calc(var(--spacing) * 20)}

    /* padding-right */
    .pr0-ns { padding-right: 0}
    .pr1-ns { padding-right: var(--spacing)}
    .pr2-ns { padding-right: calc(var(--spacing) * 2)} 
    .pr3-ns { padding-right: calc(var(--spacing) * 3)}
    .pr4-ns { padding-right: calc(var(--spacing) * 4)}
    .pr5-ns { padding-right: calc(var(--spacing) * 5)}
    .pr6-ns { padding-right: calc(var(--spacing) * 6)}

    .pr7-ns { padding-right: calc(var(--spacing) * 8)}
    .pr8-ns { padding-right: calc(var(--spacing) * 10)}
    .pr9-ns { padding-right: calc(var(--spacing) * 15)}
    .pr10-ns { padding-right: calc(var(--spacing) * 20)}

    /* padding-bottom  */
    .pb0-ns { padding-bottom: 0}
    .pb1-ns { padding-bottom: var(--spacing)}
    .pb2-ns { padding-bottom: calc(var(--spacing) * 2)} 
    .pb3-ns { padding-bottom: calc(var(--spacing) * 3)}
    .pb4-ns { padding-bottom: calc(var(--spacing) * 4)}
    .pb5-ns { padding-bottom: calc(var(--spacing) * 5)}
    .pb6-ns { padding-bottom: calc(var(--spacing) * 6)}

    .pb7-ns { padding-bottom: calc(var(--spacing) * 8)}
    .pb8-ns { padding-bottom: calc(var(--spacing) * 10)}
    .pb9-ns { padding-bottom: calc(var(--spacing) * 15)}
    .pb10-ns { padding-bottom: calc(var(--spacing) * 20)}

    /* padding-left */
    .pl0-ns { padding-left: 0}
    .pl1-ns { padding-left: var(--spacing)}
    .pl2-ns { padding-left: calc(var(--spacing) * 2)} 
    .pl3-ns { padding-left: calc(var(--spacing) * 3)}
    .pl4-ns { padding-left: calc(var(--spacing) * 4)}
    .pl5-ns { padding-left: calc(var(--spacing) * 5)}
    .pl6-ns { padding-left: calc(var(--spacing) * 6)}

    .pl7-ns { padding-left: calc(var(--spacing) * 8)}
    .pl8-ns { padding-left: calc(var(--spacing) * 10)}
    .pl9-ns { padding-left: calc(var(--spacing) * 15)}
    .pl10-ns { padding-left: calc(var(--spacing) * 20)}

    /* Margin -ns */

    /* margin - all sides */
    .ma0-ns { margin: 0}
    .ma1-ns { margin: var(--spacing)}
    .ma2-ns { margin: calc(var(--spacing) * 2)} 
    .ma3-ns { margin: calc(var(--spacing) * 3)}
    .ma4-ns { margin: calc(var(--spacing) * 4)}
    .ma5-ns { margin: calc(var(--spacing) * 5)}
    .ma6-ns { margin: calc(var(--spacing) * 6)}

    .ma7-ns { margin: calc(var(--spacing) * 8)}
    .ma8-ns { margin: calc(var(--spacing) * 10)}
    .ma9-ns { margin: calc(var(--spacing) * 15)}
    .ma10-ns { margin: calc(var(--spacing) * 20)}

    /* margin-top */
    .mt0-ns { margin-top: 0}
    .mt1-ns { margin-top: var(--spacing)}
    .mt2-ns { margin-top: calc(var(--spacing) * 2)} 
    .mt3-ns { margin-top: calc(var(--spacing) * 3)}
    .mt4-ns { margin-top: calc(var(--spacing) * 4)}
    .mt5-ns { margin-top: calc(var(--spacing) * 5)}
    .mt6-ns { margin-top: calc(var(--spacing) * 6)}

    .mt7-ns { margin-top: calc(var(--spacing) * 8)}
    .mt8-ns { margin-top: calc(var(--spacing) * 10)}
    .mt9-ns { margin-top: calc(var(--spacing) * 15)}
    .mt10-ns { margin-top: calc(var(--spacing) * 20)}

    /* margin-right */
    .mr0-ns { margin-right: 0}
    .mr1-ns { margin-right: var(--spacing)}
    .mr2-ns { margin-right: calc(var(--spacing) * 2)} 
    .mr3-ns { margin-right: calc(var(--spacing) * 3)}
    .mr4-ns { margin-right: calc(var(--spacing) * 4)}
    .mr5-ns { margin-right: calc(var(--spacing) * 5)}
    .mr6-ns { margin-right: calc(var(--spacing) * 6)}

    .mr7-ns { margin-right: calc(var(--spacing) * 8)}
    .mr8-ns { margin-right: calc(var(--spacing) * 10)}
    .mr9-ns { margin-right: calc(var(--spacing) * 15)}
    .mr10-ns { margin-right: calc(var(--spacing) * 20)}

    /* margin-bottom  */
    .mb0-ns { margin-bottom: 0}
    .mb1-ns { margin-bottom: var(--spacing)}
    .mb2-ns { margin-bottom: calc(var(--spacing) * 2)} 
    .mb3-ns { margin-bottom: calc(var(--spacing) * 3)}
    .mb4-ns { margin-bottom: calc(var(--spacing) * 4)}
    .mb5-ns { margin-bottom: calc(var(--spacing) * 5)}
    .mb6-ns { margin-bottom: calc(var(--spacing) * 6)}

    .mb7-ns { margin-bottom: calc(var(--spacing) * 8)}
    .mb8-ns { margin-bottom: calc(var(--spacing) * 10)}
    .mb9-ns { margin-bottom: calc(var(--spacing) * 15)}
    .mb10-ns { margin-bottom: calc(var(--spacing) * 20)}

    /* margin-left */
    .ml0-ns { margin-left: 0}
    .ml1-ns { margin-left: var(--spacing)}
    .ml2-ns { margin-left: calc(var(--spacing) * 2)} 
    .ml3-ns { margin-left: calc(var(--spacing) * 3)}
    .ml4-ns { margin-left: calc(var(--spacing) * 4)}
    .ml5-ns { margin-left: calc(var(--spacing) * 5)}
    .ml6-ns { margin-left: calc(var(--spacing) * 6)}

    .ml7-ns { margin-left: calc(var(--spacing) * 8)}
    .ml8-ns { margin-left: calc(var(--spacing) * 10)}
    .ml9-ns { margin-left: calc(var(--spacing) * 15)}
    .ml10-ns { margin-left: calc(var(--spacing) * 20)}

    /* negative margin - all sides */
    .na0-ns { margin: 0}
    .na1-ns { margin: calc(var(--spacing) * -1)} 
    .na2-ns { margin: calc(var(--spacing) * -2)} 
    .na3-ns { margin: calc(var(--spacing) * -3)}
    .na4-ns { margin: calc(var(--spacing) * -4)}
    .na5-ns { margin: calc(var(--spacing) * -5)}
    .na6-ns { margin: calc(var(--spacing) * -6)}

    .na7-ns { margin: calc(var(--spacing) * -8)}
    .na8-ns { margin: calc(var(--spacing) * -10)}
    .na9-ns { margin: calc(var(--spacing) * -15)}
    .na10-ns { margin: calc(var(--spacing) * -20)}

    /* negative margin-top */
    .nt0-ns { margin-top: 0}
    .nt1-ns { margin-top: calc(var(--spacing) * -1)} 
    .nt2-ns { margin-top: calc(var(--spacing) * -2)} 
    .nt3-ns { margin-top: calc(var(--spacing) * -3)}
    .nt4-ns { margin-top: calc(var(--spacing) * -4)}
    .nt5-ns { margin-top: calc(var(--spacing) * -5)}
    .nt6-ns { margin-top: calc(var(--spacing) * -6)}

    .nt7-ns { margin-top: calc(var(--spacing) * -8)}
    .nt8-ns { margin-top: calc(var(--spacing) * -10)}
    .nt9-ns { margin-top: calc(var(--spacing) * -15)}
    .nt10-ns { margin-top: calc(var(--spacing) * -20)}

    /* negative margin-right */
    .nr0-ns { margin-right: 0}
    .nr1-ns { margin-right: calc(var(--spacing) * -1)} 
    .nr2-ns { margin-right: calc(var(--spacing) * -2)} 
    .nr3-ns { margin-right: calc(var(--spacing) * -3)}
    .nr4-ns { margin-right: calc(var(--spacing) * -4)}
    .nr5-ns { margin-right: calc(var(--spacing) * -5)}
    .nr6-ns { margin-right: calc(var(--spacing) * -6)}

    .nr7-ns { margin-right: calc(var(--spacing) * -8)}
    .nr8-ns { margin-right: calc(var(--spacing) * -10)}
    .nr9-ns { margin-right: calc(var(--spacing) * -15)}
    .nr10-ns { margin-right: calc(var(--spacing) * -20)}

    /* negative margin-bottom  */
    .nb0-ns { margin-bottom: 0}
    .nb1-ns { margin-bottom: calc(var(--spacing) * -1)} 
    .nb2-ns { margin-bottom: calc(var(--spacing) * -2)} 
    .nb3-ns { margin-bottom: calc(var(--spacing) * -3)}
    .nb4-ns { margin-bottom: calc(var(--spacing) * -4)}
    .nb5-ns { margin-bottom: calc(var(--spacing) * -5)}
    .nb6-ns { margin-bottom: calc(var(--spacing) * -6)}

    .nb7-ns { margin-bottom: calc(var(--spacing) * -8)}
    .nb8-ns { margin-bottom: calc(var(--spacing) * -10)}
    .nb9-ns { margin-bottom: calc(var(--spacing) * -15)}
    .nb10-ns { margin-bottom: calc(var(--spacing) * -20)}

    /* negative margin-left */
    .nl0-ns { margin-left: 0}
    .nl1-ns { margin-left: calc(var(--spacing) * -1)} 
    .nl2-ns { margin-left: calc(var(--spacing) * -2)} 
    .nl3-ns { margin-left: calc(var(--spacing) * -3)}
    .nl4-ns { margin-left: calc(var(--spacing) * -4)}
    .nl5-ns { margin-left: calc(var(--spacing) * -5)}
    .nl6-ns { margin-left: calc(var(--spacing) * -6)}

    .nl7-ns { margin-left: calc(var(--spacing) * -8)}
    .nl8-ns { margin-left: calc(var(--spacing) * -10)}
    .nl9-ns { margin-left: calc(var(--spacing) * -15)}
    .nl10-ns { margin-left: calc(var(--spacing) * -20)}
    
    /* Gap */
    .gap0-ns { gap: 0}
    .gap1-ns { gap: var(--spacing)}
    .gap2-ns { gap: calc(var(--spacing) * 2)} 
    .gap3-ns { gap: calc(var(--spacing) * 3)}
    .gap4-ns { gap: calc(var(--spacing) * 4)}
    .gap5-ns { gap: calc(var(--spacing) * 5)}
    .gap6-ns { gap: calc(var(--spacing) * 6)}

    .gap7-ns { gap: calc(var(--spacing) * 8)}
    .gap8-ns { gap: calc(var(--spacing) * 10)}
    .gap9-ns { gap: calc(var(--spacing) * 15)}
    .gap10-ns { gap: calc(var(--spacing) * 20)}

    /* Display */
    .dn-ns {
        display: none;
    }
    .di-ns {
        display: inline;
    }
    .db-ns {
        display: block;
    }
    .dib-ns {
        display: inline-block;
    }

    /* Flex -ns */
    .flex-ns {
        display: flex;
    }
    .inline-flex-ns {
        display: inline-flex;
    }
    .flex-auto-ns {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
    }
    .flex-none-ns {
        flex: none;
    }
    .flex-column-ns {
        flex-direction: column;
    }
    .flex-row-ns {
        flex-direction: row;
    }
    .flex-wrap-ns {
        flex-wrap: wrap;
    }
    .flex-nowrap-ns {
        flex-wrap: nowrap;
    }
    .flex-wrap-reverse-ns {
        flex-wrap: wrap-reverse;
    }
    .flex-column-reverse-ns {
        flex-direction: column-reverse;
    }
    .flex-row-reverse-ns {
        flex-direction: row-reverse;
    }
    .flex-center-ns {
        align-items: center;
        justify-content: center;
    }
    .items-start-ns {
        align-items: flex-start;
    }
    .items-end-ns {
        align-items: flex-end;
    }
    .items-center-ns {
        align-items: center;
    }
    .items-baseline-ns {
        align-items: baseline;
    }
    .items-stretch-ns {
        align-items: stretch;
    }
    .self-start-ns {
        align-self: flex-start;
    }
    .self-end-ns {
        align-self: flex-end;
    }
    .self-center-ns {
        align-self: center;
    }
    .self-baseline-ns {
        align-self: baseline;
    }
    .self-stretch-ns {
        align-self: stretch;
    }
    .justify-start-ns {
        justify-content: flex-start;
    }
    .justify-end-ns {
        justify-content: flex-end;
    }
    .justify-center-ns {
        justify-content: center;
    }
    .justify-between-ns {
        justify-content: space-between;
    }
    .justify-around-ns {
        justify-content: space-around;
    }
    .content-start-ns {
        align-content: flex-start;
    }
    .content-end-ns {
        align-content: flex-end;
    }
    .content-center-ns {
        align-content: center;
    }
    .content-between-ns {
        align-content: space-between;
    }
    .content-around-ns {
        align-content: space-around;
    }
    .content-stretch-ns {
        align-content: stretch;
    }

    .fw1-ns { font-weight: 100; }
    .fw2-ns { font-weight: 200; }
    .fw3-ns { font-weight: 300; }
    .fw4-ns { font-weight: 400; }
    .fw5-ns { font-weight: 500; }
    .fw6-ns { font-weight: 600; }
    .fw7-ns { font-weight: 700; }
    .fw8-ns { font-weight: 800; }
    .fw9-ns { font-weight: 900; }

    /* Border Radius */
    .br0-ns { border-radius: 0; }
    .br1-ns { border-radius: 0.125rem; }
    .br2-ns { border-radius: 0.25rem; }
    .br3-ns { border-radius: 0.5rem; }
    .br4-ns { border-radius: 1rem; }
    .br-100-ns { border-radius: 100%; }
    .br-pill-ns { border-radius: 9999px; }
}

@media screen and (min-width: 1200px) {
    /* -l */

    /* Positions -l */

    .center-l {
        margin-right: auto;
        margin-left: auto;
    }
    
    /* Padding -l */

    /* padding - all sides */
    .pa0-l { padding: 0}
    .pa1-l { padding: var(--spacing)}
    .pa2-l { padding: calc(var(--spacing) * 2)} 
    .pa3-l { padding: calc(var(--spacing) * 3)}
    .pa4-l { padding: calc(var(--spacing) * 4)}
    .pa5-l { padding: calc(var(--spacing) * 5)}
    .pa6-l { padding: calc(var(--spacing) * 6)}

    .pa7-l { padding: calc(var(--spacing) * 8)}
    .pa8-l { padding: calc(var(--spacing) * 10)}
    .pa9-l { padding: calc(var(--spacing) * 15)}
    .pa10-l { padding: calc(var(--spacing) * 20)}

    /* padding-top */
    .pt0-l { padding-top: 0}
    .pt1-l { padding-top: var(--spacing)}
    .pt2-l { padding-top: calc(var(--spacing) * 2)} 
    .pt3-l { padding-top: calc(var(--spacing) * 3)}
    .pt4-l { padding-top: calc(var(--spacing) * 4)}
    .pt5-l { padding-top: calc(var(--spacing) * 5)}
    .pt6-l { padding-top: calc(var(--spacing) * 6)}

    .pt7-l { padding-top: calc(var(--spacing) * 8)}
    .pt8-l { padding-top: calc(var(--spacing) * 10)}
    .pt9-l { padding-top: calc(var(--spacing) * 15)}
    .pt10-l { padding-top: calc(var(--spacing) * 20)}

    /* padding-right */
    .pr0-l { padding-right: 0}
    .pr1-l { padding-right: var(--spacing)}
    .pr2-l { padding-right: calc(var(--spacing) * 2)} 
    .pr3-l { padding-right: calc(var(--spacing) * 3)}
    .pr4-l { padding-right: calc(var(--spacing) * 4)}
    .pr5-l { padding-right: calc(var(--spacing) * 5)}
    .pr6-l { padding-right: calc(var(--spacing) * 6)}

    .pr7-l { padding-right: calc(var(--spacing) * 8)}
    .pr8-l { padding-right: calc(var(--spacing) * 10)}
    .pr9-l { padding-right: calc(var(--spacing) * 15)}
    .pr10-l { padding-right: calc(var(--spacing) * 20)}

    /* padding-bottom  */
    .pb0-l { padding-bottom: 0}
    .pb1-l { padding-bottom: var(--spacing)}
    .pb2-l { padding-bottom: calc(var(--spacing) * 2)} 
    .pb3-l { padding-bottom: calc(var(--spacing) * 3)}
    .pb4-l { padding-bottom: calc(var(--spacing) * 4)}
    .pb5-l { padding-bottom: calc(var(--spacing) * 5)}
    .pb6-l { padding-bottom: calc(var(--spacing) * 6)}

    .pb7-l { padding-bottom: calc(var(--spacing) * 8)}
    .pb8-l { padding-bottom: calc(var(--spacing) * 10)}
    .pb9-l { padding-bottom: calc(var(--spacing) * 15)}
    .pb10-l { padding-bottom: calc(var(--spacing) * 20)}

    /* padding-left */
    .pl0-l { padding-left: 0}
    .pl1-l { padding-left: var(--spacing)}
    .pl2-l { padding-left: calc(var(--spacing) * 2)} 
    .pl3-l { padding-left: calc(var(--spacing) * 3)}
    .pl4-l { padding-left: calc(var(--spacing) * 4)}
    .pl5-l { padding-left: calc(var(--spacing) * 5)}
    .pl6-l { padding-left: calc(var(--spacing) * 6)}

    .pl7-l { padding-left: calc(var(--spacing) * 8)}
    .pl8-l { padding-left: calc(var(--spacing) * 10)}
    .pl9-l { padding-left: calc(var(--spacing) * 15)}
    .pl10-l { padding-left: calc(var(--spacing) * 20)}

    /* Margin -l */

    /* margin - all sides */
    .ma0-l { margin: 0}
    .ma1-l { margin: var(--spacing)}
    .ma2-l { margin: calc(var(--spacing) * 2)} 
    .ma3-l { margin: calc(var(--spacing) * 3)}
    .ma4-l { margin: calc(var(--spacing) * 4)}
    .ma5-l { margin: calc(var(--spacing) * 5)}
    .ma6-l { margin: calc(var(--spacing) * 6)}

    .ma7-l { margin: calc(var(--spacing) * 8)}
    .ma8-l { margin: calc(var(--spacing) * 10)}
    .ma9-l { margin: calc(var(--spacing) * 15)}
    .ma10-l { margin: calc(var(--spacing) * 20)}

    /* margin-top */
    .mt0-l { margin-top: 0}
    .mt1-l { margin-top: var(--spacing)}
    .mt2-l { margin-top: calc(var(--spacing) * 2)} 
    .mt3-l { margin-top: calc(var(--spacing) * 3)}
    .mt4-l { margin-top: calc(var(--spacing) * 4)}
    .mt5-l { margin-top: calc(var(--spacing) * 5)}
    .mt6-l { margin-top: calc(var(--spacing) * 6)}

    .mt7-l { margin-top: calc(var(--spacing) * 8)}
    .mt8-l { margin-top: calc(var(--spacing) * 10)}
    .mt9-l { margin-top: calc(var(--spacing) * 15)}
    .mt10-l { margin-top: calc(var(--spacing) * 20)}

    /* margin-right */
    .mr0-l { margin-right: 0}
    .mr1-l { margin-right: var(--spacing)}
    .mr2-l { margin-right: calc(var(--spacing) * 2)} 
    .mr3-l { margin-right: calc(var(--spacing) * 3)}
    .mr4-l { margin-right: calc(var(--spacing) * 4)}
    .mr5-l { margin-right: calc(var(--spacing) * 5)}
    .mr6-l { margin-right: calc(var(--spacing) * 6)}

    .mr7-l { margin-right: calc(var(--spacing) * 8)}
    .mr8-l { margin-right: calc(var(--spacing) * 10)}
    .mr9-l { margin-right: calc(var(--spacing) * 15)}
    .mr10-l { margin-right: calc(var(--spacing) * 20)}

    /* margin-bottom  */
    .mb0-l { margin-bottom: 0}
    .mb1-l { margin-bottom: var(--spacing)}
    .mb2-l { margin-bottom: calc(var(--spacing) * 2)} 
    .mb3-l { margin-bottom: calc(var(--spacing) * 3)}
    .mb4-l { margin-bottom: calc(var(--spacing) * 4)}
    .mb5-l { margin-bottom: calc(var(--spacing) * 5)}
    .mb6-l { margin-bottom: calc(var(--spacing) * 6)}

    .mb7-l { margin-bottom: calc(var(--spacing) * 8)}
    .mb8-l { margin-bottom: calc(var(--spacing) * 10)}
    .mb9-l { margin-bottom: calc(var(--spacing) * 15)}
    .mb10-l { margin-bottom: calc(var(--spacing) * 20)}

    /* margin-left */
    .ml0-l { margin-left: 0}
    .ml1-l { margin-left: var(--spacing)}
    .ml2-l { margin-left: calc(var(--spacing) * 2)} 
    .ml3-l { margin-left: calc(var(--spacing) * 3)}
    .ml4-l { margin-left: calc(var(--spacing) * 4)}
    .ml5-l { margin-left: calc(var(--spacing) * 5)}
    .ml6-l { margin-left: calc(var(--spacing) * 6)}

    .ml7-l { margin-left: calc(var(--spacing) * 8)}
    .ml8-l { margin-left: calc(var(--spacing) * 10)}
    .ml9-l { margin-left: calc(var(--spacing) * 15)}
    .ml10-l { margin-left: calc(var(--spacing) * 20)}

    /* negative margin - all sides */
    .na0-l { margin: 0}
    .na1-l { margin: calc(var(--spacing) * -1)} 
    .na2-l { margin: calc(var(--spacing) * -2)} 
    .na3-l { margin: calc(var(--spacing) * -3)}
    .na4-l { margin: calc(var(--spacing) * -4)}
    .na5-l { margin: calc(var(--spacing) * -5)}
    .na6-l { margin: calc(var(--spacing) * -6)}

    .na7-l { margin: calc(var(--spacing) * -8)}
    .na8-l { margin-right: calc(var(--spacing) * -10)}
    .na9-l { margin-right: calc(var(--spacing) * -15)}
    .na10-l { margin-right: calc(var(--spacing) * -20)}

    /* negative margin-top */
    .nt0-l { margin-top: 0}
    .nt1-l { margin-top: calc(var(--spacing) * -1)} 
    .nt2-l { margin-top: calc(var(--spacing) * -2)} 
    .nt3-l { margin-top: calc(var(--spacing) * -3)}
    .nt4-l { margin-top: calc(var(--spacing) * -4)}
    .nt5-l { margin-top: calc(var(--spacing) * -5)}
    .nt6-l { margin-top: calc(var(--spacing) * -6)}

    .nt7-l { margin-top: calc(var(--spacing) * -8)}
    .nt8-l { margin-top: calc(var(--spacing) * -10)}
    .nt9-l { margin-top: calc(var(--spacing) * -15)}
    .nt10-l { margin-top: calc(var(--spacing) * -20)}

    /* negative margin-right */
    .nr0-l { margin-right: 0}
    .nr1-l { margin-right: calc(var(--spacing) * -1)} 
    .nr2-l { margin-right: calc(var(--spacing) * -2)} 
    .nr3-l { margin-right: calc(var(--spacing) * -3)}
    .nr4-l { margin-right: calc(var(--spacing) * -4)}
    .nr5-l { margin-right: calc(var(--spacing) * -5)}
    .nr6-l { margin-right: calc(var(--spacing) * -6)}

    .nr7-l { margin-right: calc(var(--spacing) * -8)}
    .nr8-l { margin-right: calc(var(--spacing) * -10)}
    .nr9-l { margin-right: calc(var(--spacing) * -15)}
    .nr10-l { margin-right: calc(var(--spacing) * -20)}

    /* negative margin-bottom  */
    .nb0-l { margin-bottom: 0}
    .nb1-l { margin-bottom: calc(var(--spacing) * -1)} 
    .nb2-l { margin-bottom: calc(var(--spacing) * -2)} 
    .nb3-l { margin-bottom: calc(var(--spacing) * -3)}
    .nb4-l { margin-bottom: calc(var(--spacing) * -4)}
    .nb5-l { margin-bottom: calc(var(--spacing) * -5)}
    .nb6-l { margin-bottom: calc(var(--spacing) * -6)}

    .nb7-l { margin-bottom: calc(var(--spacing) * -8)}
    .nb8-l { margin-bottom: calc(var(--spacing) * -10)}
    .nb9-l { margin-bottom: calc(var(--spacing) * -15)}
    .nb10-l { margin-bottom: calc(var(--spacing) * -20)}

    /* negative margin-left */
    .nl0-l { margin-left: 0}
    .nl1-l { margin-left: calc(var(--spacing) * -1)} 
    .nl2-l { margin-left: calc(var(--spacing) * -2)} 
    .nl3-l { margin-left: calc(var(--spacing) * -3)}
    .nl4-l { margin-left: calc(var(--spacing) * -4)}
    .nl5-l { margin-left: calc(var(--spacing) * -5)}
    .nl6-l { margin-left: calc(var(--spacing) * -6)}

    .nl7-l { margin-left: calc(var(--spacing) * -8)}
    .nl8-l { margin-left: calc(var(--spacing) * -10)}
    .nl9-l { margin-left: calc(var(--spacing) * -15)}
    .nl10-l { margin-left: calc(var(--spacing) * -20)}

    /* Gap */
    .gap0-l { gap: 0}
    .gap1-l { gap: var(--spacing)}
    .gap2-l { gap: calc(var(--spacing) * 2)} 
    .gap3-l { gap: calc(var(--spacing) * 3)}
    .gap4-l { gap: calc(var(--spacing) * 4)}
    .gap5-l { gap: calc(var(--spacing) * 5)}
    .gap6-l { gap: calc(var(--spacing) * 6)}

    .gap7-l { gap: calc(var(--spacing) * 8)}
    .gap8-l { gap: calc(var(--spacing) * 10)}
    .gap9-l { gap: calc(var(--spacing) * 15)}
    .gap10-l { gap: calc(var(--spacing) * 20)}

    /* Display */
    .dn-l {
        display: none;
    }
    .di-l {
        display: inline;
    }
    .db-l {
        display: block;
    }
    .dib-l {
        display: inline-block;
    }

    /* Flex -l */
    .flex-l {
        display: flex;
    }
    .inline-flex-l {
        display: inline-flex;
    }
    .flex-auto-l {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
    }
    .flex-none-l {
        flex: none;
    }
    .flex-column-l {
        flex-direction: column;
    }
    .flex-row-l {
        flex-direction: row;
    }
    .flex-wrap-l {
        flex-wrap: wrap;
    }
    .flex-nowrap-l {
        flex-wrap: nowrap;
    }
    .flex-wrap-reverse-l {
        flex-wrap: wrap-reverse;
    }
    .flex-column-reverse-l {
        flex-direction: column-reverse;
    }
    .flex-row-reverse-l {
        flex-direction: row-reverse;
    }
    .flex-center-l {
        align-items: center;
        justify-content: center;
    }
    .items-start-l {
        align-items: flex-start;
    }
    .items-end-l {
        align-items: flex-end;
    }
    .items-center-l {
        align-items: center;
    }
    .items-baseline-l {
        align-items: baseline;
    }
    .items-stretch-l {
        align-items: stretch;
    }
    .self-start-l {
        align-self: flex-start;
    }
    .self-end-l {
        align-self: flex-end;
    }
    .self-center-l {
        align-self: center;
    }
    .self-baseline-l {
        align-self: baseline;
    }
    .self-stretch-l {
        align-self: stretch;
    }
    .justify-start-l {
        justify-content: flex-start;
    }
    .justify-end-l {
        justify-content: flex-end;
    }
    .justify-center-l {
        justify-content: center;
    }
    .justify-between-l {
        justify-content: space-between;
    }
    .justify-around-l {
        justify-content: space-around;
    }
    .content-start-l {
        align-content: flex-start;
    }
    .content-end-l {
        align-content: flex-end;
    }
    .content-center-l {
        align-content: center;
    }
    .content-between-l {
        align-content: space-between;
    }
    .content-around-l {
        align-content: space-around;
    }
    .content-stretch-l {
        align-content: stretch;
    }

    .fw1-l { font-weight: 100; }
    .fw2-l { font-weight: 200; }
    .fw3-l { font-weight: 300; }
    .fw4-l { font-weight: 400; }
    .fw5-l { font-weight: 500; }
    .fw6-l { font-weight: 600; }
    .fw7-l { font-weight: 700; }
    .fw8-l { font-weight: 800; }
    .fw9-l { font-weight: 900; }

    /* Border Radius */
    .br0-l { border-radius: 0; }
    .br1-l { border-radius: 0.125rem; }
    .br2-l { border-radius: 0.25rem; }
    .br3-l { border-radius: 0.5rem; }
    .br4-l { border-radius: 1rem; }
    .br-100-l { border-radius: 100%; }
    .br-pill-l { border-radius: 9999px; }
}