@charset "UTF-8";
/*
  /$$$$$$                            /$$ /$$ /$$
 /$$__  $$                          | $$| $$|__/
| $$  \__/  /$$$$$$   /$$$$$$   /$$$$$$$| $$ /$$ /$$$$$$$   /$$$$$$   /$$$$$$$
|  $$$$$$  /$$__  $$ /$$__  $$ /$$__  $$| $$| $$| $$__  $$ /$$__  $$ /$$_____/
 \____  $$| $$$$$$$$| $$$$$$$$| $$  | $$| $$| $$| $$  \ $$| $$  \ $$|  $$$$$$
 /$$  \ $$| $$_____/| $$_____/| $$  | $$| $$| $$| $$  | $$| $$  | $$ \____  $$
|  $$$$$$/|  $$$$$$$|  $$$$$$$|  $$$$$$$| $$| $$| $$  | $$|  $$$$$$$ /$$$$$$$/
 \______/  \_______/ \_______/ \_______/|__/|__/|__/  |__/ \____  $$|_______/
                                                           /$$  \ $$
                                                          |  $$$$$$/
                                                           \______/

https://github.com/sproutsocial/web-insights-application/tree/develop/packages/seedlings
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

/*
---
Name: Forms
Modifiers:
    input-reset: input reset
    button-reset: button reset
---
*/
.button-reset {
  background: none;
  border: 0;
}


.button-reset {
  appearance: none;
}

.button-reset::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/*
---
Name: Accessibility
Modifiers:
    screenreader: screenreader
Example: <span class="{{modifier}}">I am secret text only readable by AT</span><p>{{label}}</p>
---
*/
.screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

/*
---
Name: Animation
Modifiers:
    appear: appearUp
    bounce: bounce
    separate--up: separate up
    separate--down: separate down
    separate--shadow: separate shadow
    separate--shadow-down: separate shadow down
    separate: separate
    separated: separated
    slash--up: slash up
    slash--down: slash down
---
*/

.interaction--hover {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.7, 0.2);
}
/*
---
Name: Aspect Ratio
Base:
    aspect-ratio: Aspect Ratio
Modifiers:
    -auto: Auto
    -square: Square
    -video: Video (16 / 9)
    -portrait: Portrait (9 / 16)
    -3-4: 3/4
    -4-3: 4/3
    -4-5: 4/5
    -5-4: 5/4
    -5-7: 5/7
    -3-2: 3/2
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <img class="db fit-cover {{modifier}}" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 460'%3E%3Cpath fill='%23DEE1E1' d='M0 0h720v460H0z'/%3E%3Cg fill='%23B1B6B7'%3E%3Cpath d='M185.1 92.4v275.1h349.7V92.4H185.1zm321.6 245.3H215V122.3h291.7v215.4z'/%3E%3Cpath d='M230.1 314.9l60.4-63.5 22.6 9.8 71.4-76 28.1 33.6 12.7-7.6 68.6 103.7'/%3E%3Ccircle cx='299.9' cy='176.8' r='26.4'/%3E%3C/g%3E%3C/svg%3E" loading="lazy" /><p>{{label}}</p>
---
*/

.aspect-ratio-video {
  aspect-ratio: 16/9;
}

.aspect-ratio-9-16 {
  aspect-ratio: 9/16;
}
/*
---
Name: Background Position
Base:
    bg: background
Modifiers:
    -center: center center
    -top: top center
    -right: center right
    -bottom: bottom center
    -left: center left
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
---
*/
/*
---
Name: Background Size

Base:
    bg: background-size

Modifiers:
    -cover: cover
    -contain: contain

Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
---
*/
/*
  Often used in combination with background image set as an inline style
  on an html element.
*/
/*
---
Name: Background
Base:
    bg: background
Modifiers:
    -none: none
    -transparent: transparent
    --dark-translucent: dark transparent
    --light-translucent: light transparent
    --{color}-{value}: Standard color background
    --{color}-{value}-o-{opacity}p: Color with opacity
    --color-name: name of a color variable
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
HoverClasses: true
Description: Background utilities for setting background colors with breakpoints and hover states. Includes dynamically generated opacity variants for specific color/value/opacity combinations defined in $bg-opacity-combinations.
Example: <div class="db pa300 {{modifier}}">{{label}}</div>
---
*/

.bg--green-100 {
  background-color: #d7f4d7;
}

.bg--green-300 {
  background-color: #98e58e;
}

.bg--teal-900 {
  background-color: #026661;
}

.bg--teal-1000 {
  background-color: #083f3f;
}

.bg--blue-300 {
  background-color: #a1c2f8;
}

.bg--blue-700 {
  background-color: #205bc3;
}

.bg--blue-1000 {
  background-color: #0a2960;
}

.bg--pink-700 {
  background-color: #ce3665;
}

.bg--yellow-600 {
  background-color: #ffbc00;
}

.bg--neutral-0 {
  background-color: #FFFFFF;
}

.bg--neutral-100 {
  background-color: #f3f4f4;
}

.bg--neutral-200 {
  background-color: #dee1e1;
}

.bg--neutral-300 {
  background-color: #c8cccc;
}

.bg--neutral-400 {
  background-color: #b0b6b7;
}

.bg--neutral-700 {
  background-color: #515e5f;
}

.bg--neutral-1100 {
  background-color: #040404;
}

.hover-bg--teal-50:hover {
  background-color: #CCF1EA;
}

.hover-bg--teal-800:hover {
  background-color: #067c7c;
}

.hover-bg--blue-900:hover {
  background-color: #0c3f89;
}

.hover-bg--neutral-0:hover {
  background-color: #FFFFFF;
}

.hover-bg--neutral-100:hover {
  background-color: #f3f4f4;
}

.hover-bg--neutral-900:hover {
  background-color: #273333;
}

.bg--primary-dark {
  background-color: #067c7c;
}

 .bg--transparent {
  background-color: transparent;
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .bg--teal-1000-xm {
    background-color: #083f3f;
  }
  .bg--neutral-0-xm {
    background-color: #FFFFFF;
  }
  .bg--neutral-100-xm {
    background-color: #f3f4f4;
  }
  .hover-bg--neutral-0-xm:hover {
    background-color: #FFFFFF;
  }
  .hover-bg--neutral-100-xm:hover {
    background-color: #f3f4f4;
  }
}
@media screen and (min-width: 1025px) {
  .bg--teal-1000-l {
    background-color: #083f3f;
  }
  .bg--neutral-0-l {
    background-color: #FFFFFF;
  }
  .bg--neutral-100-l {
    background-color: #f3f4f4;
  }
  .hover-bg--neutral-0-l:hover {
    background-color: #FFFFFF;
  }
  .hover-bg--neutral-100-l:hover {
    background-color: #f3f4f4;
  }
}
/*
---
Name: Brand Gradients
Description: Linear gradient utilities for brand-specific gradients using Seeds color tokens.
---
*/
/*
---
Name: Gradients
Base:
    bg--gradient: background gradient
Modifiers:
    --gradient-{name}: Brand gradient name
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Description: Background gradient utilities for brand-specific linear gradients using Seeds color tokens. Each gradient is available at all responsive breakpoints.
Example: <div class="db pa300 {{modifier}}"><p>Gradient background</p></div>
---
*/
/*
---
Name: Border
Base:
    b: border
Modifiers:
    a: all
    n: none
    t: top
    r: right
    b: bottom
    l: left
    -collapse: collapse
    -separate: separate
    -spacing-none: spacing none
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="db square700 bw600 b--neutral-200 {{modifier}}"></div><p>{{label}}</p>
---
*/
.ba {
  border-width: 1px;
  border-style: solid;
}

.bn {
  border-width: 0;
  border-style: none;
}

.bt {
  border-top-width: 1px;
  border-top-style: solid;
}

.bb {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.bl {
  border-left-width: 1px;
  border-left-style: solid;
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .bn-xm {
    border-width: 0;
    border-style: none;
  }
  .bt-xm {
    border-top-width: 1px;
    border-top-style: solid;
  }
}
@media screen and (min-width: 1025px) {
  .ba-l {
    border-width: 1px;
    border-style: solid;
  }
  .bn-l {
    border-width: 0;
    border-style: none;
  }
  .bt-l {
    border-top-width: 1px;
    border-top-style: solid;
  }
}
/*
---
Name: Border Color
Base:
    b: border
Modifiers:
    -transparent: transparent
    --color-name: color variable name
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
HoverClasses: true
Example: <div class="db bt bw600 {{modifier}}"></div><p>{{label}}</p>
---
*/

.b--teal-900 {
  border-color: #026661;
}

.b--blue-1000 {
  border-color: #0a2960;
}

.b--neutral-0 {
  border-color: #FFFFFF;
}

.b--neutral-100 {
  border-color: #f3f4f4;
}

.b--neutral-200 {
  border-color: #dee1e1;
}

.b--neutral-300 {
  border-color: #c8cccc;
}

.b--neutral-800 {
  border-color: #364141;
}

.b--neutral-1100 {
  border-color: #040404;
}

.hover-b--teal-50:hover {
  border-color: #CCF1EA;
}

.hover-b--teal-800:hover {
  border-color: #067c7c;
}

.hover-b--blue-900:hover {
  border-color: #0c3f89;
}

.hover-b--neutral-0:hover {
  border-color: #FFFFFF;
}

.hover-b--neutral-300:hover {
  border-color: #c8cccc;
}

.hover-b--neutral-900:hover {
  border-color: #273333;
}

.b--text-inverse {
  border-color: #FFFFFF;
}

.b--primary-dark {
  border-color: #067c7c;
}

.hover-b--primary-dark:hover {
  border-color: #067c7c;
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .b--neutral-100-xm {
    border-color: #f3f4f4;
  }
}
@media screen and (min-width: 1025px) {
  .b--neutral-100-l {
    border-color: #f3f4f4;
  }
  .b--neutral-200-l {
    border-color: #dee1e1;
  }
  .hover-b--neutral-300-l:hover {
    border-color: #c8cccc;
  }
}
/*
---
Name: Border Radius
Base:
    br: border-radius
Modifiers:
    0: 0
    400: 400 (4px)
    500: 500 (6px)
    600: 600 (8px)
    700: 700 (12px)
    750: 750 (14px)
    800: 800 (16px)
    825: 825 (21px)
    835: 835 (24px)
    850: 850 (32px)
    865: 865 (40px)
    875: 875 (44px)
    880: 880 (48px)
    885: 885 (52px)
    900: 900 (64px)
    100px: 100px (100px)
    1000: 1000
    --round: 50%
    --top: top only
    --right: right only
    --bottom: bottom only
    --left: left only
    --leaf: leaf frame
    --hero_leaf: leaf frame top left only
    --x: rounded left & right
    --tl: top-left only
    --tr: top-right only
    --br: bottom-right only
    --bl: buttom-left only
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="db square750 bg--neutral-200 overflow-hidden {{modifier}}"></div><p>{{label}}</p>
---
*/

.br400 {
  border-radius: 4px;
}

.br500 {
  border-radius: 6px;
}

.br600 {
  border-radius: 8px;
}

.br800 {
  border-radius: 16px;
}

.br850 {
  border-radius: 32px;
}

.br850--tr {
  border-top-right-radius: 32px;
}

.br--round {
  border-radius: 50%;
}
@media screen and (min-width: 769px) {
  .br850-nm {
    border-radius: 32px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .br0-xm {
    border-radius: 0;
  }
  .br500-xm {
    border-radius: 6px;
  }
  .br800-xm {
    border-radius: 16px;
  }
  .br850-xm {
    border-radius: 32px;
  }
}
@media screen and (min-width: 1025px) {
  .br0-l {
    border-radius: 0;
  }
  .br500-l {
    border-radius: 6px;
  }
  .br800-l {
    border-radius: 16px;
  }
  .br850-l {
    border-radius: 32px;
  }
}
.br--top {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.br--bottom {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/*
---
Name: Border Styles
Base:
    b: border-style
Modifiers:
    --none: none
    --dotted: dotted
    --dashed: dashed
    --solid: solid
Example: <div class="ba bw600 b--neutral-200 square750 {{modifier}}"></div><p>{{label}}</p>
---
*/

.b--none {
  border-style: none;
}

/*
---
Name: Border Width
Base:
    bw: border-width
Modifiers:
    500: 500 (1px)
    600: 600 (2px)
    625: 625 (3px)
    650: 650 (4px)
    700: 700 (5px)
    800: 800 (8px)
    2500: 2500 (25px)
    t-0: top 0
    r-0: right 0
    b-0: bottom 0
    l-0: left 0
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
HoverClasses: true
Example: <div class="ba b--neutral-200 db square750 {{modifier}}"></div><p>{{label}}</p>
---
*/

.bw500 {
  border-width: 1px;
}

.bw600 {
  border-width: 2px;
}

.bw700 {
  border-width: 5px;
}
/*
---
Name: Color
Base:
    c: color
Modifiers:
    -inherit: Inherit
    --color-name: name of a color variable
    --link-subtle: link (subtle)
    --{color}-{value}: Standard color text
    --{color}-{value}-o-{opacity}p: Color with opacity
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
HoverClasses: true
Description: Color utilities for setting text colors with breakpoints and hover states. Includes dynamically generated opacity variants for specific color/value/opacity combinations defined in $c-opacity-combinations.
Example: <div class="f500 {{modifier}}"><p>The quick brown fox jumped over the lazy dog</p></div><p>{{label}}</p>
---
*/

.c--teal-900 {
  color: #026661;
}

.c--blue-700 {
  color: #205bc3;
}

.c--blue-900 {
  color: #0c3f89;
}

.c--blue-1000 {
  color: #0a2960;
}

.c--neutral-0 {
  color: #FFFFFF;
}

.c--neutral-200 {
  color: #dee1e1;
}

.c--neutral-400 {
  color: #b0b6b7;
}

.c--neutral-600 {
  color: #6e797a;
}

.c--neutral-700 {
  color: #515e5f;
}

.c--neutral-800 {
  color: #364141;
}

.c--neutral-1000 {
  color: #162020;
}

.c--neutral-1100 {
  color: #040404;
}

.hover-c--teal-900:hover {
  color: #026661;
}

.hover-c--blue-900:hover {
  color: #0c3f89;
}

.hover-c--neutral-0:hover {
  color: #FFFFFF;
}

.hover-c--neutral-500:hover {
  color: #929a9b;
}

.hover-c--neutral-900:hover {
  color: #273333;
}

.hover-c--neutral-1100:hover {
  color: #040404;
}

.c--text {
  color: #162020;
}

.c--text-inverse {
  color: #FFFFFF;
}

.c--link {
  color: #205bc3;
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .hover-c--teal-900-xm:hover {
    color: #026661;
  }
}
@media screen and (min-width: 1025px) {
  .hover-c--teal-900-l:hover {
    color: #026661;
  }
}
/*
---
Name: Coordinates
Base:
    top: top
    bottom: bottom
    right: right
    left: left
    inset: inset
Modifiers:
    -auto: auto
    -0: Size 0 (0)
    0: Size 0 (0)
    100: Size 100 (2px)
    200: Size 200 (4px)
    250: Size 250 (6px)
    300: Size 300 (8px)
    325: Size 325 (10px)
    350: Size 350 (12px)
    375: Size 375 (14px)
    400: Size 400 (16px)
    425: Size 425 (20px)
    450: Size 450 (24px)
    500: Size 500 (32px)
    550: Size 550 (36px)
    600: Size 600 (40px)
    615: Size 615 (44px)
    625: Size 625 (48px)
    650: Size 650 (56px)
    655: Size 655 (60px)
    665: Size 665 (62px)
    675: Size 675 (64px)
    685: Size 685 (72px)
    700: Size 700 (80px)
    725: Size 725 (88px)
    750: Size 750 (96px)
    765: Size 765 (104px)
    770: Size 770 (108px)
    775: Size 775 (112px)
    800: Size 800 (120px)
    825: Size 825 (128px)
    835: Size 835 (144px)
    840: Size 840 (132px)
    845: Size 845 (153px)
    850: Size 850 (160px)
    865: Size 865 (184px)
    900: Size 900 (200px)
    925: Size 925 (208px)
    950: Size 950 (240px)
    975: Size 975 (288px)
    1000: Size 1000 (320px)
    1050: Size 1050 (360px)
    1075: Size 1075 (406px)
    1100: Size 1100 (480px)
    1125: Size 1125 (516px)
    1200: Size 1200 (640px)
    -100: Negative Size 100 (2px)
    -200: Negative Size 200 (4px)
    -250: Negative Size 250 (6px)
    -300: Negative Size 300 (8px)
    -325: Negative Size 325 (10px)
    -350: Negative Size 350 (12px)
    -375: Negative Size 375 (14px)
    -400: Negative Size 400 (16px)
    -425: Negative Size 425 (20px)
    -450: Negative Size 450 (24px)
    -500: Negative Size 500 (32px)
    -550: Negative Size 550 (36px)
    -600: Negative Size 600 (40px)
    -615: Negative Size 615 (44px)
    -625: Negative Size 625 (48px)
    -650: Negative Size 650 (56px)
    -655: Negative Size 655 (60px)
    -665: Negative Size 665 (62px)
    -675: Negative Size 675 (64px)
    -685: Negative Size 685 (72px)
    -700: Negative Size 700 (72px)
    -725: Negative Size 725 (88px)
    -750: Negative Size 750 (96px)
    -765: Negative Size 765 (104px)
    -770: Negative Size 770 (108px)
    -775: Negative Size 775 (112px)
    -800: Negative Size 800 (120px)
    -825: Negative Size 825 (128px)
    -835: Negative Size 835 (144px)
    -840: Negative Size 840 (132px)
    -845: Negative Size 845 (153px)
    -850: Negative Size 850 (160px)
    -865: Negative Size 865 (184px)
    -900: Negative Size 900 (200px)
    -925: Negative Size 925 (208px)
    -950: Negative Size 950 (240px)
    -975: Negative Size 975 (288px)
    -1000: Negative Size 1000 (320px)
    -1050: Negative Size 1000 (360px)
    -1075: Negative Size 1075 (406px)
    -1100: Negative Size 1100 (480px)
    -1125: Negative Size 1125 (516px)
    -1200: Negative Size 1200 (640px)
    -0p: 0%
    -8p: (1/12)%
    -10p: 10%
    -16p: (1/6)%
    -20p: 20%
    -25p: 25%
    -30p: 30%
    -33p: (100/3)%
    -40p: 40%
    -41p: (5/12)%
    -50p: 50%
    -58p: (7/12)%
    -60p: 60%
    -66p: (100/1.5)%
    -70p: 70%
    -75p: 75%
    -80p: 80%
    -83p: (5/6)%
    -90p: 90%
    -91p: (11/12)%
    -100p: 100%
    --8p: -(1/12)%
    --10p: -10%
    --16p: -(1/6)%
    --20p: -20%
    --25p: -25%
    --30p: -30%
    --33p: -(100/3)%
    --40p: -40%
    --41p: -(5/12)%
    --50p: -50%
    --58p: -(7/12)%
    --60p: -60%
    --66p: -(100/1.5)%
    --70p: -70%
    --75p: -75%
    --80p: -80%
    --83p: -(5/6)%
    --90p: -90%
    --91p: -(11/12)%
    --100p: -100%
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
    -xl: extra-large
---
*/
/*
---
Name: Center
Modifiers:
    center-x: Position center horizontally in container
    center-y: Position center vertically in container
    center-xy: Position center horizontally and vertically in container
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
---
*/

.top0 {
  top: 0;
}

.top100 {
  top: 0.1111111111rem;
}

.top850 {
  top: 8.8888888889rem;
}

.right0 {
  right: 0;
}

.bottom0 {
  bottom: 0;
}

.left0 {
  left: 0;
}

.left300 {
  left: 0.4444444444rem;
}

.left-400 {
  left: -0.8888888889rem;
}

.center-y {
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .top0-xm {
    top: 0;
  }
  .right0-xm {
    right: 0;
  }
  .left0-xm {
    left: 0;
  }
  .left-200-xm {
    left: -0.2222222222rem;
  }
}
@media screen and (min-width: 1025px) {
  .top0-l {
    top: 0;
  }
  .right0-l {
    right: 0;
  }
  .left0-l {
    left: 0;
  }
}
/*
---
Name: Display
Base:
    d: display
Modifiers:
    n: none
    b: block
    i: inline
    ib: inline-block
    it: inline-table
    t: table
    tc: table-cell
    t-row: table-row
    t-columm: table-column
    t-column-group: table-column-group
    t-header-group: table-header-group
    g: grid
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
    -p: print
---
*/
.dn {
  display: none;
}

.db {
  display: block;
}

.dib {
  display: inline-block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.dg {
  display: grid;
}

@media screen and (min-width: 480px) {
  .db-ns {
    display: block;
  }
  .flex-ns {
    display: flex;
  }
  .dg-ns {
    display: grid;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .dn-xm {
    display: none;
  }
  .db-xm {
    display: block;
  }
  .dib-xm {
    display: inline-block;
  }
  .flex-xm {
    display: flex;
  }
  .dg-xm {
    display: grid;
  }
}
@media screen and (min-width: 1025px) {
  .dn-l {
    display: none;
  }
  .db-l {
    display: block;
  }
  .dib-l {
    display: inline-block;
  }
  .flex-l {
    display: flex;
  }
  .dg-l {
    display: grid;
  }
}
@media print {
  .dn-p {
    display: none;
  }
}
/*
---
Name: Elevation
Base:
    elevation: elevation
Modifiers:
    100: Level 100 (rgba(39, 51, 51, 0.24) 0px 2px 4px)
    200: Level 200 (rgba(39, 51, 51, 0.24) 0px 4px 8px)
    300: Level 300 (rgba(39, 51, 51, 0.24) 0px 8px 16px)
    400: Level 400 (rgba(39, 51, 51, 0.24) 0px 16px 32px)
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
HoverClasses: true
Example: <div class="pa800 {{modifier}} w-100p"><h3>{{label}}</h3></div>
---
*/

.elevation200 {
  box-shadow: rgba(39, 51, 51, 0.24) 0px 4px 8px;
}
/*
---
Name: Filter
Base:
    filter: filter
Modifiers:
    -none: none
    -invert: invert
    -grayscale: grayscale
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="db bg--blue-700 py200 {{modifier}}"><img src="https://media.sproutsocial.com/uploads/LGO_Shopify-2.svg" loading="lazy" /></div><p>{{label}}</p>
---
*/
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 480px) and (max-width: 768px) {
}
@media screen and (min-width: 769px) {
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
}
@media screen and (min-width: 1025px) {
}
/*
---
Name: Flexbox
Modifiers:
    flex: flex
    inline-flex: inline-flex
    flex-auto: flex auto
    flex-none: flex none
    grow-0: grow 0
    grow-1: grow 1
    shrink-0: shrink 0
    shrink-1: shrink 1
    flex-1: flex 1
    flex-column: direction column
    flex-row: direction row
    flex-wrap: wrap
    flex-nowrap: nowrap
    flex-wrap-reverse: wrap-reverse
    flex-column-reverse: column-reverse
    flex-row-reverse: row-reverse
    items-start: items start
    items-end: items end
    items-center: items center
    items-baseline: items baseline
    items-stretch: items stretch
    self-start: self start
    self-end: self end
    self-center: self center
    self-baseline: self baseline
    self-stretch: stretch
    justify-start: justify start
    justify-end: justify end
    justify-center: justify center
    justify-between: justify space-between
    justify-around: justify space-around
    content-start: content start
    content-end: content end
    content-center: content center
    content-between: content space-between
    content-around: content space-around
    content-stretch: content stretch
    order-0: order 0
    order-1: order 1
    order-2: order 2
    order-3: order 3
    order-4: order 4
    order-5: order 5
    order-6: order 6
    order-7: order 7
    order-8: order 8
    order-first: order first
    order-last: order last
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
---
*/
/**
 * We define display: flex in the display file
 * In order to pull that off, we need to steal this file from tachyons
 * https://github.com/tachyons-css/tachyons/blob/master/src/_flexbox.css
 */
/* 1. Fix for Chrome 44 bug.
* https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
  min-width: 0; /* 1 */
  min-height: 0; /* 1 */
  flex: 1 1 auto;
}

.flex-none {
  flex: none;
}

.flex-1 {
  flex: 1;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.self-center {
  align-self: center;
}

.justify-start {
  justify-content: flex-start;
  justify-content: start;
}

.justify-end {
  justify-content: flex-end;
  justify-content: end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-shrink-1 {
  flex-shrink: 1;
}

.flex-1 {
  flex: 1 1 0;
}

@media screen and (min-width: 480px) {
  /* 1. Fix for Chrome 44 bug.
  * https://code.google.com/p/chromium/issues/detail?id=506893 */
  .flex-row-ns {
    flex-direction: row;
  }
  .items-center-ns {
    align-items: center;
  }
  .justify-between-ns {
    justify-content: space-between;
  }
}
@media screen and (min-width: 480px) and (max-width: 768px) {
  /* 1. Fix for Chrome 44 bug.
  * https://code.google.com/p/chromium/issues/detail?id=506893 */
  .flex-row-m {
    flex-direction: row;
  }
}
@media screen and (min-width: 769px) {
  /* 1. Fix for Chrome 44 bug.
  * https://code.google.com/p/chromium/issues/detail?id=506893 */
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* 1. Fix for Chrome 44 bug.
  * https://code.google.com/p/chromium/issues/detail?id=506893 */
  .flex-column-xm {
    flex-direction: column;
  }
  .flex-row-xm {
    flex-direction: row;
  }
  .flex-nowrap-xm {
    flex-wrap: nowrap;
  }
  .items-center-xm {
    align-items: center;
  }
}
@media screen and (min-width: 1025px) {
  /* 1. Fix for Chrome 44 bug.
  * https://code.google.com/p/chromium/issues/detail?id=506893 */
  .flex-column-l {
    flex-direction: column;
  }
  .flex-row-l {
    flex-direction: row;
  }
  .flex-nowrap-l {
    flex-wrap: nowrap;
  }
  .items-start-l {
    align-items: flex-start;
    align-items: start;
  }
  .items-center-l {
    align-items: center;
  }
  .justify-between-l {
    justify-content: space-between;
  }
}
@media screen and (min-width: 1360px) {
  /* 1. Fix for Chrome 44 bug.
  * https://code.google.com/p/chromium/issues/detail?id=506893 */
}
/**
 * Additional flex classes by Sprout
 */

.grow-1 {
  flex-grow: 1;
}

.shrink-1 {
  flex-shrink: 1;
}
/*
---
Name: Font Family
Base:
    ff: Font Family
Modifiers:
    -proxima-nova: Proxima Nova
    -system: System Font Stack
    -recoleta: Recoleta semi-bold
    -roboto: Roboto Serif
Example: <div class="f500 {{modifier}}">The quick brown fox jumps over the lazy dog</div><p>{{label}}</p>
---
*/
.ff-proxima-nova {
  font-family: "Proxima Nova", proxima-nova, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.ff-system {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
/*
---
Name: Font Style
Base:
    fs: font style
Modifiers:
    -normal: Normal
    -italic: Italic
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="db f500 {{modifier}}">The quick brown fox..</div><p>{{label}}</p>
---
*/
/*
---
Name: Font Weight
Base:
    fw: font weight
Modifiers:
    -extrabold: Extra Bold (900)
    -bold: Bold (800)
    -semibold: Semibold (600)
    -normal: Normal (400)
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
HoverClasses: true
Example: <div class="db f500 {{modifier}}">The quick brown fox..</div><p>{{label}}</p>
---
*/

.fw-bold {
  font-weight: 700;
}

.fw-semibold {
  font-weight: 600;
}

.fw-normal {
  font-weight: 400;
}
/*
---
Name: Gap
Base:
    gap: Gap
    gap-row: Gap (Row)
    gap-column: Gap (Column)
Modifiers:
    0: None
    100: Size 100 (2px)
    200: Size 200 (4px)
    250: Size 250 (6px)
    300: Size 300 (8px)
    325: Size 325 (10px)
    350: Size 350 (12px)
    375: Size 375 (14px)
    400: Size 400 (16px)
    425: Size 425 (20px)
    450: Size 450 (24px)
    500: Size 500 (32px)
    550: Size 550 (36px)
    600: Size 600 (40px)
    615: Size 615 (44px)
    625: Size 625 (48px)
    650: Size 650 (56px)
    655: Size 655 (60px)
    665: Size 665 (62px)
    675: Size 675 (64px)
    685: Size 685 (72px)
    700: Size 700 (80px)
    725: Size 725 (88px)
    750: Size 750 (96px)
    765: Size 765 (104px)
    770: Size 770 (108px)
    775: Size 775 (112px)
    800: Size 800 (120px)
    825: Size 825 (128px)
    835: Size 835 (144px)
    840: Size 840 (132px)
    845: Size 845 (153px)
    850: Size 850 (160px)
    865: Size 865 (184px)
    900: Size 900 (200px)
    925: Size 925 (208px)
    950: Size 950 (240px)
    975: Size 975 (288px)
    1000: Size 1000 (320px)
    1050: Size 1050 (360px)
    1075: Size 1075 (406px)
    1100: Size 1100 (480px)
    1125: Size 1125 (516px)
    1200: Size 1200 (640px)
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="dg grid-template-columns-3 {{modifier}}"><div class="pa200 bg--neutral-200">1</div><div class="pa200 bg--neutral-200">2</div><div class="pa200 bg--neutral-200">3</div></div><p>{{label}}</p>
---
*/

.gap300 {
  gap: 0.4444444444rem;
}

.gap350 {
  gap: 0.6666666667rem;
}

.gap400 {
  gap: 0.8888888889rem;
}

.gap-row400 {
  row-gap: 0.8888888889rem;
}

.gap425 {
  gap: 1.1111111111rem;
}

.gap450 {
  gap: 1.3333333333rem;
}

.gap500 {
  gap: 1.7777777778rem;
}

.gap-column500 {
  column-gap: 1.7777777778rem;
}

.gap625 {
  gap: 2.6666666667rem;
}

.gap-column625 {
  column-gap: 2.6666666667rem;
}

.gap750 {
  gap: 5.3333333333rem;
}

@media screen and (min-width: 480px) {
  .gap0-ns {
    gap: 0;
  }
  .gap450-ns {
    gap: 1.3333333333rem;
  }
}
@media screen and (min-width: 480px) and (max-width: 768px) {
  .gap450-m {
    gap: 1.3333333333rem;
  }
}
@media screen and (min-width: 769px) {
  .gap0-nm {
    gap: 0;
  }
  .gap500-nm {
    gap: 1.7777777778rem;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .gap500-xm {
    gap: 1.7777777778rem;
  }
}
@media screen and (min-width: 1025px) {
  .gap400-l {
    gap: 0.8888888889rem;
  }
  .gap500-l {
    gap: 1.7777777778rem;
  }
}
/*
---
Name: Grid Auto Columns
Base:
    grid-auto-cols: Grid Auto Columns
Modifiers:
    -auto: Auto
    -min: Minimum Content
    -max: Max Content
    -fr: Fractual Unit
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="dg gap450 {{modifier}}"><div class="pa200 bg--neutral-200">1</div><div class="pa200 bg--neutral-200">2</div><div class="pa200 bg--neutral-200">3</div></div><p>{{label}}</p>
---
*/
/*
---
Name: Grid Column Span
Base:
    col: Grid Column Span
Modifiers:
    -auto: Auto
    -span-1: One column
    -span-2: Two columns
    -span-3: Three columns
    -span-4: Four columns
    -span-5: Five columns
    -span-6: Six columns
    -span-7: Seven columns
    -span-8: Eight columns
    -span-9: Nine columns
    -span-10: Ten columns
    -span-11: Eleven columns
    -span-12: Twelve columns
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="dg gap450"><div class="pa200 bg--neutral-200 {{modifier}}">1</div><div class="pa200 bg--neutral-200">2</div><div class="pa200 bg--neutral-200">3</div></div><p>{{label}}</p>
---
*/

.col-span-3 {
  grid-column: span 3/span 3;
}

.col-span-9 {
  grid-column: span 9/span 9;
}

.col-span-12 {
  grid-column: span 12/span 12;
}

@media screen and (min-width: 480px) {
  .col-span-6-ns {
    grid-column: span 6/span 6;
  }
}
@media screen and (min-width: 480px) and (max-width: 768px) {
  .col-span-6-m {
    grid-column: span 6/span 6;
  }
  .col-span-12-m {
    grid-column: span 12/span 12;
  }
}
@media screen and (min-width: 769px) {
  .col-span-4-nm {
    grid-column: span 4/span 4;
  }
  .col-span-8-nm {
    grid-column: span 8/span 8;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .col-span-2-xm {
    grid-column: span 2/span 2;
  }
  .col-span-3-xm {
    grid-column: span 3/span 3;
  }
  .col-span-4-xm {
    grid-column: span 4/span 4;
  }
  .col-span-5-xm {
    grid-column: span 5/span 5;
  }
  .col-span-6-xm {
    grid-column: span 6/span 6;
  }
  .col-span-8-xm {
    grid-column: span 8/span 8;
  }
  .col-span-10-xm {
    grid-column: span 10/span 10;
  }
  .col-span-12-xm {
    grid-column: span 12/span 12;
  }
}
@media screen and (min-width: 1025px) {
  .col-span-2-l {
    grid-column: span 2/span 2;
  }
  .col-span-3-l {
    grid-column: span 3/span 3;
  }
  .col-span-4-l {
    grid-column: span 4/span 4;
  }
  .col-span-5-l {
    grid-column: span 5/span 5;
  }
  .col-span-6-l {
    grid-column: span 6/span 6;
  }
  .col-span-8-l {
    grid-column: span 8/span 8;
  }
  .col-span-10-l {
    grid-column: span 10/span 10;
  }
  .col-span-12-l {
    grid-column: span 12/span 12;
  }
}
/*
---
Name: Grid Flow
Base:
    grid-flow: Grid Flow
Modifiers:
    -row: Row
    -column: Column
    -dense: Dense
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="dg gap450 {{modifier}}"><div class="pa200 bg--neutral-200">1</div><div class="pa200 bg--neutral-200">2</div><div class="pa200 bg--neutral-200">3</div></div><p>{{label}}</p>
---
*/
/*
---
Name: Grid Template Columns
Base:
    grid-template-columns: Grid Template Columns
Modifiers:
    -1: One column
    -2: Two columns
    -3: Three columns
    -4: Four columns
    -5: Five columns
    -6: Six columns
    -7: Seven columns
    -8: Eight columns
    -9: Nine columns
    -10: Ten columns
    -11: Eleven columns
    -12: Twelve columns
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="dg gap450 {{modifier}}"><div class="pa200 bg--neutral-200">1</div><div class="pa200 bg--neutral-200">2</div><div class="pa200 bg--neutral-200">3</div></div><p>{{label}}</p>
---
*/

.grid-template-columns-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-template-columns-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

@media screen and (min-width: 480px) {
  .grid-template-columns-2-ns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-template-columns-3-ns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-template-columns-12-ns {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .grid-template-columns-1-xm {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-template-columns-2-xm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-template-columns-4-xm {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-template-columns-12-xm {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media screen and (min-width: 1025px) {
  .grid-template-columns-2-l {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-template-columns-4-l {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-template-columns-12-l {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
/*
---
Name: Grid Column Start
Base:
    col-start: Grid Column Start
Modifiers:
    -1: One column
    -2: Two columns
    -3: Three columns
    -4: Four columns
    -5: Five columns
    -6: Six columns
    -7: Seven columns
    -8: Eight columns
    -9: Nine columns
    -10: Ten columns
    -11: Eleven columns
    -12: Twelve columns
    -auto: Auto
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="dg gap450 grid-template-columns"><div class="pa200 bg--neutral-200 {{modifier}}">1</div><div class="pa200 bg--neutral-200">2</div><div class="pa200 bg--neutral-200">3</div></div><p>{{label}}</p>
---
*/

.col-start-1 {
  grid-column-start: 1;
}

.col-start-2 {
  grid-column-start: 2;
}

@media screen and (min-width: 480px) {
  .col-start-4-ns {
    grid-column-start: 4;
  }
}
@media screen and (min-width: 480px) and (max-width: 768px) {
  .col-start-1-m {
    grid-column-start: 1;
  }
}
@media screen and (min-width: 769px) {
  .col-start-3-nm {
    grid-column-start: 3;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .col-start-1-xm {
    grid-column-start: 1;
  }
  .col-start-2-xm {
    grid-column-start: 2;
  }
  .col-start-3-xm {
    grid-column-start: 3;
  }
  .col-start-4-xm {
    grid-column-start: 4;
  }
}
@media screen and (min-width: 1025px) {
  .col-start-2-l {
    grid-column-start: 2;
  }
  .col-start-3-l {
    grid-column-start: 3;
  }
  .col-start-4-l {
    grid-column-start: 4;
  }
}
/*
---
Name: Grid Column End
Base:
    col-end: Grid Column End
Modifiers:
    -1: One column
    -2: Two columns
    -3: Three columns
    -4: Four columns
    -5: Five columns
    -6: Six columns
    -7: Seven columns
    -8: Eight columns
    -9: Nine columns
    -10: Ten columns
    -11: Eleven columns
    -12: Twelve columns
    --1: Last column
    -auto: Auto
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="dg gap450 {{modifier}}"><div class="pa200 bg--neutral-200">1</div><div class="pa200 bg--neutral-200">2</div><div class="pa200 bg--neutral-200">3</div></div><p>{{label}}</p>
---
*/
/*
---
Name: Grid Row Start
Base:
    row-start: Grid Row Start
Modifiers:
    -1: One row
    -2: Two rows
    -3: Three rows
    -4: Four rows
    -5: Five rows
    -6: Six rows
    -7: Seven rows
    -8: Eight rows
    -9: Nine rows
    -10: Ten rows
    -11: Eleven rows
    -12: Twelve rows
    -auto: Auto
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="dg gap450 grid-template-columns"><div class="pa200 bg--neutral-200 {{modifier}}">1</div><div class="pa200 bg--neutral-200">2</div><div class="pa200 bg--neutral-200">3</div></div><p>{{label}}</p>
---
*/
/*
---
Name: Grid Row End
Base:
    row-end: Grid Row End
Modifiers:
    -1: One row
    -2: Two rows
    -3: Three rows
    -4: Four rows
    -5: Five rows
    -6: Six rows
    -7: Seven rows
    -8: Eight rows
    -9: Nine rows
    -10: Ten rows
    -11: Eleven rows
    -12: Twelve rows
    --1: Last row
    -auto: Auto
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="dg gap450 grid-template-columns"><div class="pa200 bg--neutral-200 {{modifier}}">1</div><div class="pa200 bg--neutral-200">2</div><div class="pa200 bg--neutral-200">3</div></div><p>{{label}}</p>
---
*/
/*
---
Name: Height
Base:
    h: height
    min-h: min-height
    max-h: max-height
Modifiers:
    -auto: auto
    -none: none
    -1px: Size -1px (-1px)
    -0: Size 0 (0)
    0: Size 0 (0)
    100: Size 100 (2px)
    200: Size 200 (4px)
    250: Size 250 (6px)
    300: Size 300 (8px)
    325: Size 325 (10px)
    350: Size 350 (12px)
    375: Size 375 (14px)
    400: Size 400 (16px)
    425: Size 425 (20px)
    450: Size 450 (24px)
    500: Size 500 (32px)
    550: Size 550 (36px)
    600: Size 600 (40px)
    615: Size 615 (44px)
    625: Size 625 (48px)
    650: Size 650 (56px)
    655: Size 655 (60px)
    665: Size 665 (62px)
    675: Size 675 (64px)
    685: Size 685 (72px)
    700: Size 700 (80px)
    725: Size 725 (88px)
    750: Size 750 (96px)
    765: Size 765 (104px)
    770: Size 770 (108px)
    775: Size 775 (112px)
    800: Size 800 (120px)
    825: Size 825 (128px)
    835: Size 835 (144px)
    840: Size 840 (132px)
    845: Size 845 (153px)
    850: Size 850 (160px)
    865: Size 865 (184px)
    900: Size 900 (200px)
    925: Size 925 (208px)
    950: Size 950 (240px)
    975: Size 975 (288px)
    1000: Size 1000 (320px)
    1050: Size 1050 (360px)
    1075: Size 1075 (406px)
    1100: Size 1100 (480px)
    1125: Size 1125 (516px)
    1200: Size 1200 (640px)
    -25p: 25%
    -33p: (100/3)%
    -50p: 50%
    -66p: (100/1.5)%
    -75p: 75%
    -100p: 100%
    -25vh: 25vh
    -33vh: (100/3)vh
    -50vh: 50vh
    -66vh: (100/1.5)vh
    -75vh: 75vh
    -100vh: 100vh
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="db bg--neutral-200 {{modifier}}"></div><p>{{label}}</p>
---
*/
.h-auto {
  height: auto;
}

.h550 {
  height: 2rem;
}

.h-75p {
  height: 75%;
}

.h-100p {
  height: 100%;
}

.h-100vh {
  height: 100vh;
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .h-auto-xm {
    height: auto;
  }
  .h-100p-xm {
    height: 100%;
  }
}
@media screen and (min-width: 1025px) {
  .h-auto-l {
    height: auto;
  }
  .h-100p-l {
    height: 100%;
  }
}
/*
---
Name: Hide
Modifiers:
    hide: Add this class to hide, while hidden.
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
---
*/
/*
---
Name: Hide Scrollbar
Modifiers:
    hide-scrollbar: Add this class to hide scrollbars.
---
*/

/*
---
Name: Hover
Modifiers:
    dim: Hover Dim
    glow: Hover Glow
    lift: Hover Lift
    reveal: Hover Reveal
    pointer: Hover Pointer
---
*/
/*
    Dim element on hover by adding the dim class.
*/

/*
    Animate opacity to 100% on hover by adding the glow class.
*/

/*
    lift element on hover by adding the lift class.
*/

/*
    Add pointer on hover
*/
.pointer:hover {
  cursor: pointer;
}

/*
---
Name: Isolation
Base:
    isolation: isolation
Modifiers:
    -isolate: isolate
    -auto: auto
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
---
*/
.isolation-isolate {
  isolation: isolate;
}
/*
---
Name: Lists
Modifiers:
    list: style none
    number: Number
---
*/
.list {
  list-style-type: none;
}

/*
---
Name: Lottie
---
*/

/*
---
Name: Mix Blend Mode
Base:
    mix-blend
Modifiers:
    -overlay: overlay
    -exclusion: exclusion
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
---
 */
/*
---
Name: Object Fit
Base:
    fit: object-fit
Modifiers:
    -contain: contain
    -cover: cover
    -fill: fill
    -scale-down: scale-down
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
---
*/
.fit-contain img,
.fit-contain {
  object-fit: contain;
}

.fit-cover img,
.fit-cover {
  object-fit: cover;
}
/*
---
Name: Opacity
Modifiers:
    o-100: Opacity 1
    o-90: Opacity .9
    o-80: Opacity .8
    o-70: Opacity .7
    o-60: Opacity .6
    o-50: Opacity .5
    o-40: Opacity .4
    o-30: Opacity .3
    o-20: Opacity .2
    o-10: Opacity .1
    o-05: Opacity .05
    o-025: Opacity .025
    o-0: Opacity 0
    Breakpoints:
        -ns: not-small
        -m: medium
        -nm: not-medium
        -xm: small desktop
        -l: large
    HoverClasses: true
Example: <div class="db bg--neutral-900 square750 {{modifier}}"></div><p>{{label}}</p>
---
 */
/*
---
Name: Overflow
Modifiers:
    overflow-visible: visible
    overflow-hidden: hidden
    overflow-scroll: scroll
    overflow-scroll-hidden: scroll hidden
    overflow-auto: auto
    overflow-clip: clip
    overflow-x-visible: x visible
    overflow-x-hidden: x hidden
    overflow-x-scroll: x scroll
    overflow-x-auto: x auto
    overflow-x-clip: x clip
    overflow-y-visible: y visible
    overflow-y-hidden: y hidden
    overflow-y-scroll: y scroll
    overflow-y-auto: y auto
    overflow-y-clip: y clip
    overflow-clamp-1: line clamp 1
    overflow-clamp-2: line clamp 2
    overflow-clamp-3: line clamp 3
    overflow-clamp-4: line clamp 4
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
---
 */
.overflow-visible {
  overflow: visible;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .overflow-visible-xm {
    overflow: visible;
  }
  .overflow-hidden-xm {
    overflow: hidden;
  }
}
@media screen and (min-width: 1025px) {
  .overflow-visible-l {
    overflow: visible;
  }
}
/*
---
Name: Outline Color
Base:
    outline: outline
Modifiers:
    -transparent: transparent
    --color-name: color variable name
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
HoverClasses: true
Example: <div class="db outline--solid ow600 {{modifier}}"></div><p>{{label}}</p>
---
*/
/*
---
Name: Outline Styles
Base:
    outline: outline-style
Modifiers:
    --none: none
    --dotted: dotted
    --dashed: dashed
    --solid: solid
Example: <div class="{{modifier}} ow600 outline--neutral-200 square750"></div><p>{{label}}</p>
---
*/

/*
---
Name: Outline Width
Base:
    ow: outline-width
Modifiers:
    500: 500 (1px)
    600: 600 (2px)
    625: 625 (3px)
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
HoverClasses: true
Example: <div class="outline--solid {{modifier}} outline--neutral-200 db square750"></div><p>{{label}}</p>
---
*/
/*
---
Name: Pointer Events
Base:
    pointer-events: pointer events
Modifiers:
    -none: none
    -auto: auto
    -all: all
    -initial: initial
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
---
*/
/*
---
Name: Position
Modifiers:
    static: static
    relative: relative
    absolute: absolute
    fixed: fixed
    sticky: sticky
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
---
*/
.static {
  position: static;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}
@media screen and (min-width: 480px) and (max-width: 768px) {
  .relative-m {
    position: relative;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .relative-xm {
    position: relative;
  }
  .absolute-xm {
    position: absolute;
  }
  .fixed-xm {
    position: fixed;
  }
}
@media screen and (min-width: 1025px) {
  .relative-l {
    position: relative;
  }
  .absolute-l {
    position: absolute;
  }
  .fixed-l {
    position: fixed;
  }
}
/*
---
Name: Print
Modifiers:
    break: Break
---
*/
/*
---
Name: Rotate
Base:
    rotate: Rotate
Modifiers:
    -none: None
    -2: 2.28deg
    -45: 45deg
    -90: 90deg
    -180: 180deg
    -360: 360deg
    --2: -2.28deg
    --45: -45deg
    --90: -90deg
    --180: -180deg
    --360: -360deg
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="db square700 overflow-hidden {{modifier}}"><img src="https://media.sproutsocial.com/uploads/LGO_Shopify-2.svg" loading="lazy" /></div><p>{{label}}</p>
---
*/

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-180 {
  transform: rotate(180deg);
}
/*
---
Name: Scroll Snap
Base:
    scroll-snap: Scroll Snap
Modifiers:
    -none: None
    -x: X-Axis
    -xmandatory: X-Axis (Mandatory)
    -y: Y-Axis
    -ymandatory: Y-Axis (Mandatory)
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
---
*/
/*
---
Name: Scroll Snap Align
Base:
    scroll-snap-align: Scroll Snap Align
Modifiers:
    -start: Start
    -end: End
    -center: Center
    -align-none: Align None
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
---
*/
/*
---
Name: Separated
Description: Box shadow utility to create an angled square on a particular block element
Base:
    separated: separated
Modifiers:
    -auto: auto
    -none: none
    -0: Size 0 (0px)
    0: Size 0 (0px)
    100: Size 100 (2px)
    200: Size 200 (4px)
    250: Size 250 (6px)
    300: Size 300 (8px)
    325: Size 325 (10px)
    350: Size 350 (12px)
    375: Size 375 (14px)
    400: Size 400 (16px)
    425: Size 425 (20px)
    450: Size 450 (24px)
    500: Size 500 (32px)
    550: Size 550 (36px)
    600: Size 600 (40px)
    615: Size 615 (44px)
    625: Size 625 (48px)
    650: Size 650 (56px)
    655: Size 655 (60px)
    665: Size 665 (62px)
    675: Size 675 (64px)
    685: Size 685 (72px)
    700: Size 700 (80px)
    725: Size 725 (88px)
    750: Size 750 (96px)
    765: Size 765 (104px)
    770: Size 770 (108px)
    775: Size 775 (112px)
    800: Size 800 (120px)
    825: Size 825 (128px)
    835: Size 835 (144px)
    840: Size 840 (132px)
    845: Size 845 (153px)
    850: Size 850 (160px)
    865: Size 865 (184px)
    900: Size 900 (200px)
    925: Size 925 (208px)
    950: Size 950 (240px)
    975: Size 975 (288px)
    1000: Size 1000 (320px)
    1050: Size 1050 (360px)
    1075: Size 1075 (406px)
    1100: Size 1100 (480px)
    1125: Size 1125 (516px)
    1200: Size 1200 (640px)
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
---
*/
/*
---
Name: Shadow
Base:
    shadow: shadow
Modifiers:
    0: Level 0
    100: Level 100
    200: Level 200
    300: Level 300
    400: Level 400
    500: Level 500
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
HoverClasses: true
Example: <div class="db square750 bg--neutral-200 {{modifier}}"></div><p>{{label}}</p>
---
*/
/*
---
Name: Spacing
Base:
    m: margin
    p: padding
Directions:
    a: all
    x: horizontal
    y: vertical
    t: top
    r: right
    b: bottom
    l: left
Modifiers:
    -auto: auto
    -0: Size 0 (0px)
    100: Size 100 (2px)
    200: Size 200 (4px)
    250: Size 250 (6px)
    300: Size 300 (8px)
    325: Size 325 (10px)
    350: Size 350 (12px)
    375: Size 375 (14px)
    400: Size 400 (16px)
    425: Size 425 (20px)
    450: Size 450 (24px)
    500: Size 500 (32px)
    550: Size 550 (36px)
    600: Size 600 (40px)
    615: Size 615 (44px)
    625: Size 625 (48px)
    650: Size 650 (56px)
    655: Size 655 (60px)
    665: Size 665 (62px)
    675: Size 675 (64px)
    685: Size 685 (72px)
    700: Size 700 (80px)
    725: Size 725 (88px)
    750: Size 750 (96px)
    765: Size 765 (104px)
    770: Size 770 (108px)
    775: Size 775 (112px)
    800: Size 800 (120px)
    825: Size 825 (128px)
    835: Size 835 (144px)
    840: Size 840 (132px)
    845: Size 845 (153px)
    850: Size 850 (160px)
    865: Size 865 (184px)
    900: Size 900 (200px)
    925: Size 925 (208px)
    950: Size 950 (240px)
    975: Size 975 (288px)
    1000: Size 1000 (320px)
    1050: Size 1050 (360px)
    1075: Size 1075 (406px)
    1100: Size 1100 (480px)
    1125: Size 1125 (516px)
    1200: Size 1200 (640px)
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="db square750 bg--neutral-200 {{modifier}}"></div><p>{{label}}</p>
---
*/
/*
---
Name: Padding
Base:
    p: padding
Directions:
    x: horizontal
    r: right
    l: left
Modifiers:
    -8p-offset: 1 column offset
    -16p-offset: 2 column offset
    -25p-offset: 3 column offset
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="db bg--neutral-200 {{modifier}}">The quick brown fox...</div><p>{{label}}</p>
---
*/

.ma0 {
  margin: 0;
}

.pa0 {
  padding: 0;
}

.pa200 {
  padding: 0.2222222222rem;
}

.pa300 {
  padding: 0.4444444444rem;
}

.pa350 {
  padding: 0.6666666667rem;
}

.pa400 {
  padding: 0.8888888889rem;
}

.pa450 {
  padding: 1.3333333333rem;
}

.pa600 {
  padding: 2.2222222222rem;
}

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

.mx200 {
  margin-right: 0.2222222222rem;
  margin-left: 0.2222222222rem;
}

.px200 {
  padding-right: 0.2222222222rem;
  padding-left: 0.2222222222rem;
}

.px250 {
  padding-right: 0.3333333333rem;
  padding-left: 0.3333333333rem;
}

.px300 {
  padding-right: 0.4444444444rem;
  padding-left: 0.4444444444rem;
}

.px350 {
  padding-right: 0.6666666667rem;
  padding-left: 0.6666666667rem;
}

.px400 {
  padding-right: 0.8888888889rem;
  padding-left: 0.8888888889rem;
}

.px450 {
  padding-right: 1.3333333333rem;
  padding-left: 1.3333333333rem;
}

.px600 {
  padding-right: 2.2222222222rem;
  padding-left: 2.2222222222rem;
}

.py250 {
  padding-top: 0.3333333333rem;
  padding-bottom: 0.3333333333rem;
}

.py300 {
  padding-top: 0.4444444444rem;
  padding-bottom: 0.4444444444rem;
}

.py350 {
  padding-top: 0.6666666667rem;
  padding-bottom: 0.6666666667rem;
}

.py400 {
  padding-top: 0.8888888889rem;
  padding-bottom: 0.8888888889rem;
}

.py450 {
  padding-top: 1.3333333333rem;
  padding-bottom: 1.3333333333rem;
}

.py500 {
  padding-top: 1.7777777778rem;
  padding-bottom: 1.7777777778rem;
}

.py600 {
  padding-top: 2.2222222222rem;
  padding-bottom: 2.2222222222rem;
}

.py625 {
  padding-top: 2.6666666667rem;
  padding-bottom: 2.6666666667rem;
}

.py675 {
  padding-top: 3.5555555556rem;
  padding-bottom: 3.5555555556rem;
}

.py700 {
  padding-top: 4.4444444444rem;
  padding-bottom: 4.4444444444rem;
}

.mt-auto {
  margin-top: auto;
}

.mt0 {
  margin-top: 0;
}

.mt200 {
  margin-top: 0.2222222222rem;
}

.mt300 {
  margin-top: 0.4444444444rem;
}

.mt350 {
  margin-top: 0.6666666667rem;
}

.mt400 {
  margin-top: 0.8888888889rem;
}

.mt425 {
  margin-top: 1.1111111111rem;
}

.mt450 {
  margin-top: 1.3333333333rem;
}

.mt500 {
  margin-top: 1.7777777778rem;
}

.mt600 {
  margin-top: 2.2222222222rem;
}

.mt700 {
  margin-top: 4.4444444444rem;
}

.pt0 {
  padding-top: 0;
}

.pt200 {
  padding-top: 0.2222222222rem;
}

.pt300 {
  padding-top: 0.4444444444rem;
}

.pt400 {
  padding-top: 0.8888888889rem;
}

.pt450 {
  padding-top: 1.3333333333rem;
}

.pt500 {
  padding-top: 1.7777777778rem;
}

.pt600 {
  padding-top: 2.2222222222rem;
}

.pt625 {
  padding-top: 2.6666666667rem;
}

.pt750 {
  padding-top: 5.3333333333rem;
}

.mr300 {
  margin-right: 0.4444444444rem;
}

.mr400 {
  margin-right: 0.8888888889rem;
}

.mr500 {
  margin-right: 1.7777777778rem;
}

.pr300 {
  padding-right: 0.4444444444rem;
}

.pr450 {
  padding-right: 1.3333333333rem;
}

.mb0 {
  margin-bottom: 0;
}

.mb300 {
  margin-bottom: 0.4444444444rem;
}

.mb400 {
  margin-bottom: 0.8888888889rem;
}

.mb450 {
  margin-bottom: 1.3333333333rem;
}

.mb500 {
  margin-bottom: 1.7777777778rem;
}

.mb600 {
  margin-bottom: 2.2222222222rem;
}

.mb625 {
  margin-bottom: 2.6666666667rem;
}

.pb300 {
  padding-bottom: 0.4444444444rem;
}

.pb350 {
  padding-bottom: 0.6666666667rem;
}

.pb400 {
  padding-bottom: 0.8888888889rem;
}

.pb500 {
  padding-bottom: 1.7777777778rem;
}

.pb600 {
  padding-bottom: 2.2222222222rem;
}

.pb675 {
  padding-bottom: 3.5555555556rem;
}

.pb685 {
  padding-bottom: 4rem;
}

.ml-auto {
  margin-left: auto;
}

.ml500 {
  margin-left: 1.7777777778rem;
}

.pl0 {
  padding-left: 0;
}

.pl350 {
  padding-left: 0.6666666667rem;
}

.pl400 {
  padding-left: 0.8888888889rem;
}

.pl450 {
  padding-left: 1.3333333333rem;
}

.pl500 {
  padding-left: 1.7777777778rem;
}

.pl600 {
  padding-left: 2.2222222222rem;
}

@media screen and (min-width: 480px) {
  .pa625-ns {
    padding: 2.6666666667rem;
  }
  .mt0-ns {
    margin-top: 0;
  }
  .mt625-ns {
    margin-top: 2.6666666667rem;
  }
  .pt0-ns {
    padding-top: 0;
  }
  .pt450-ns {
    padding-top: 1.3333333333rem;
  }
  .pr0-ns {
    padding-right: 0;
  }
  .pr450-ns {
    padding-right: 1.3333333333rem;
  }
  .pl0-ns {
    padding-left: 0;
  }
  .pl450-ns {
    padding-left: 1.3333333333rem;
  }
}
@media screen and (min-width: 480px) and (max-width: 768px) {
  .px425-m {
    padding-right: 1.1111111111rem;
    padding-left: 1.1111111111rem;
  }
  .mt425-m {
    margin-top: 1.1111111111rem;
  }
  .pt200-m {
    padding-top: 0.2222222222rem;
  }
  .pt400-m {
    padding-top: 0.8888888889rem;
  }
  .pt450-m {
    padding-top: 1.3333333333rem;
  }
  .pt800-m {
    padding-top: 6.6666666667rem;
  }
  .mb300-m {
    margin-bottom: 0.4444444444rem;
  }
  .pb400-m {
    padding-bottom: 0.8888888889rem;
  }
  .pb500-m {
    padding-bottom: 1.7777777778rem;
  }
  .pl400-m {
    padding-left: 0.8888888889rem;
  }
}
@media screen and (min-width: 769px) {
  .pa600-nm {
    padding: 2.2222222222rem;
  }
  .px600-nm {
    padding-right: 2.2222222222rem;
    padding-left: 2.2222222222rem;
  }
  .py675-nm {
    padding-top: 3.5555555556rem;
    padding-bottom: 3.5555555556rem;
  }
  .pt0-nm {
    padding-top: 0;
  }
  .pt600-nm {
    padding-top: 2.2222222222rem;
  }
  .pt700-nm {
    padding-top: 4.4444444444rem;
  }
  .mb0-nm {
    margin-bottom: 0;
  }
  .mb625-nm {
    margin-bottom: 2.6666666667rem;
  }
  .mb700-nm {
    margin-bottom: 4.4444444444rem;
  }
  .pb450-nm {
    padding-bottom: 1.3333333333rem;
  }
  .pb775-nm {
    padding-bottom: 6.2222222222rem;
  }
  .pl650-nm {
    padding-left: 3.1111111111rem;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .pa0-xm {
    padding: 0;
  }
  .pa400-xm {
    padding: 0.8888888889rem;
  }
  .pa625-xm {
    padding: 2.6666666667rem;
  }
  .px0-xm {
    padding-right: 0;
    padding-left: 0;
  }
  .px350-xm {
    padding-right: 0.6666666667rem;
    padding-left: 0.6666666667rem;
  }
  .px450-xm {
    padding-right: 1.3333333333rem;
    padding-left: 1.3333333333rem;
  }
  .px625-xm {
    padding-right: 2.6666666667rem;
    padding-left: 2.6666666667rem;
  }
  .py0-xm {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py400-xm {
    padding-top: 0.8888888889rem;
    padding-bottom: 0.8888888889rem;
  }
  .mt0-xm {
    margin-top: 0;
  }
  .mt350-xm {
    margin-top: 0.6666666667rem;
  }
  .mt400-xm {
    margin-top: 0.8888888889rem;
  }
  .pt200-xm {
    padding-top: 0.2222222222rem;
  }
  .pt400-xm {
    padding-top: 0.8888888889rem;
  }
  .pt450-xm {
    padding-top: 1.3333333333rem;
  }
  .pt625-xm {
    padding-top: 2.6666666667rem;
  }
  .pt700-xm {
    padding-top: 4.4444444444rem;
  }
  .pt750-xm {
    padding-top: 5.3333333333rem;
  }
  .pt900-xm {
    padding-top: 11.1111111111rem;
  }
  .mr300-xm {
    margin-right: 0.4444444444rem;
  }
  .mr400-xm {
    margin-right: 0.8888888889rem;
  }
  .pr450-xm {
    padding-right: 1.3333333333rem;
  }
  .mb0-xm {
    margin-bottom: 0;
  }
  .mb350-xm {
    margin-bottom: 0.6666666667rem;
  }
  .mb400-xm {
    margin-bottom: 0.8888888889rem;
  }
  .mb450-xm {
    margin-bottom: 1.3333333333rem;
  }
  .mb625-xm {
    margin-bottom: 2.6666666667rem;
  }
  .pb0-xm {
    padding-bottom: 0;
  }
  .pb300-xm {
    padding-bottom: 0.4444444444rem;
  }
  .pb400-xm {
    padding-bottom: 0.8888888889rem;
  }
  .pb450-xm {
    padding-bottom: 1.3333333333rem;
  }
  .pb500-xm {
    padding-bottom: 1.7777777778rem;
  }
  .pb600-xm {
    padding-bottom: 2.2222222222rem;
  }
  .pb675-xm {
    padding-bottom: 3.5555555556rem;
  }
  .pb700-xm {
    padding-bottom: 4.4444444444rem;
  }
  .ml-auto-xm {
    margin-left: auto;
  }
  .ml500-xm {
    margin-left: 1.7777777778rem;
  }
  .ml655-xm {
    margin-left: 3.3333333333rem;
  }
  .pl0-xm {
    padding-left: 0;
  }
  .pl300-xm {
    padding-left: 0.4444444444rem;
  }
  .pl450-xm {
    padding-left: 1.3333333333rem;
  }
  .pl500-xm {
    padding-left: 1.7777777778rem;
  }
}
@media screen and (min-width: 1025px) {
  .pa0-l {
    padding: 0;
  }
  .pa400-l {
    padding: 0.8888888889rem;
  }
  .pa450-l {
    padding: 1.3333333333rem;
  }
  .pa625-l {
    padding: 2.6666666667rem;
  }
  .px0-l {
    padding-right: 0;
    padding-left: 0;
  }
  .px350-l {
    padding-right: 0.6666666667rem;
    padding-left: 0.6666666667rem;
  }
  .px450-l {
    padding-right: 1.3333333333rem;
    padding-left: 1.3333333333rem;
  }
  .px600-l {
    padding-right: 2.2222222222rem;
    padding-left: 2.2222222222rem;
  }
  .px625-l {
    padding-right: 2.6666666667rem;
    padding-left: 2.6666666667rem;
  }
  .py0-l {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py300-l {
    padding-top: 0.4444444444rem;
    padding-bottom: 0.4444444444rem;
  }
  .py400-l {
    padding-top: 0.8888888889rem;
    padding-bottom: 0.8888888889rem;
  }
  .py800-l {
    padding-top: 6.6666666667rem;
    padding-bottom: 6.6666666667rem;
  }
  .mt0-l {
    margin-top: 0;
  }
  .mt350-l {
    margin-top: 0.6666666667rem;
  }
  .mt400-l {
    margin-top: 0.8888888889rem;
  }
  .mt700-l {
    margin-top: 4.4444444444rem;
  }
  .pt200-l {
    padding-top: 0.2222222222rem;
  }
  .pt500-l {
    padding-top: 1.7777777778rem;
  }
  .pt625-l {
    padding-top: 2.6666666667rem;
  }
  .pt700-l {
    padding-top: 4.4444444444rem;
  }
  .pt750-l {
    padding-top: 5.3333333333rem;
  }
  .pt800-l {
    padding-top: 6.6666666667rem;
  }
  .pt900-l {
    padding-top: 11.1111111111rem;
  }
  .mr400-l {
    margin-right: 0.8888888889rem;
  }
  .pr0-l {
    padding-right: 0;
  }
  .pr450-l {
    padding-right: 1.3333333333rem;
  }
  .mb0-l {
    margin-bottom: 0;
  }
  .mb350-l {
    margin-bottom: 0.6666666667rem;
  }
  .mb400-l {
    margin-bottom: 0.8888888889rem;
  }
  .mb450-l {
    margin-bottom: 1.3333333333rem;
  }
  .mb600-l {
    margin-bottom: 2.2222222222rem;
  }
  .mb625-l {
    margin-bottom: 2.6666666667rem;
  }
  .pb0-l {
    padding-bottom: 0;
  }
  .pb450-l {
    padding-bottom: 1.3333333333rem;
  }
  .pb500-l {
    padding-bottom: 1.7777777778rem;
  }
  .pb600-l {
    padding-bottom: 2.2222222222rem;
  }
  .pb675-l {
    padding-bottom: 3.5555555556rem;
  }
  .pb685-l {
    padding-bottom: 4rem;
  }
  .pb700-l {
    padding-bottom: 4.4444444444rem;
  }
  .ml-auto-l {
    margin-left: auto;
  }
  .ml655-l {
    margin-left: 3.3333333333rem;
  }
  .pl0-l {
    padding-left: 0;
  }
  .pl300-l {
    padding-left: 0.4444444444rem;
  }
  .pl450-l {
    padding-left: 1.3333333333rem;
  }
  .pl500-l {
    padding-left: 1.7777777778rem;
  }
  .pl600-l {
    padding-left: 2.2222222222rem;
  }
}
/*
---
Name: Negative Margin
Base:
    m: margin
Directions:
    t: top
    r: right
    b: bottom
    l: left
Modifiers:
    -1px: Negative 1px (-1px)
    -100: Negative Size 100 (2px)
    -200: Negative Size 200 (4px)
    -250: Negative Size 250 (6px)
    -300: Negative Size 300 (8px)
    -325: Negative Size 325 (10px)
    -350: Negative Size 350 (12px)
    -375: Negative Size 375 (14px)
    -400: Negative Size 400 (16px)
    -425: Negative Size 425 (20px)
    -450: Negative Size 450 (24px)
    -500: Negative Size 500 (32px)
    -550: Negative Size 550 (36px)
    -600: Negative Size 600 (40px)
    -615: Negative Size 615 (44px)
    -625: Negative Size 625 (48px)
    -650: Negative Size 650 (56px)
    -655: Negative Size 655 (60px)
    -665: Negative Size 665 (62px)
    -675: Negative Size 675 (64px)
    -685: Negative Size 685 (72px)
    -700: Negative Size 700 (80px)
    -725: Negative Size 725 (88px)
    -750: Negative Size 750 (96px)
    -765: Negative Size 765 (104px)
    -770: Negative Size 770 (108px)
    -775: Negative Size 775 (112px)
    -800: Negative Size 800 (120px)
    -825: Negative Size 825 (128px)
    -835: Negative Size 835 (144px)
    -840: Negative Size 840 (132px)
    -845: Negative Size 845 (153px)
    -850: Negative Size 850 (160px)
    -865: Negative Size 865 (184px)
    -900: Negative Size 900 (200px)
    -925: Negative Size 925 (208px)
    -950: Negative Size 950 (240px)
    -975: Negative Size 975 (288px)
    -1000: Negative Size 1000 (320px)
    -1050: Negative Size 1000 (360px)
    -1075: Negative Size 1075 (406px)
    -1100: Negative Size 1100 (480px)
    -1125: Negative Size 1125 (516px)
    -1200: Negative Size 1200 (640px)
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
---
*/
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .ml-350-xm {
    margin-left: -0.6666666667rem;
  }
}
@media screen and (min-width: 1025px) {
  .ml-350-l {
    margin-left: -0.6666666667rem;
  }
}
/*
---
Name: Square
Description: With our seedlings height and width values being different, this utility styling creates a way to create a square with equal height and width
Base:
    square: square
Modifiers:
    -auto: auto
    -1px: Size -1px (-1px)
    0: Size 0 (0px)
    100: Size 100 (2px)
    200: Size 200 (4px)
    250: Size 250 (6px)
    300: Size 300 (8px)
    325: Size 325 (10px)
    350: Size 350 (12px)
    375: Size 375 (14px)
    400: Size 400 (16px)
    425: Size 425 (20px)
    450: Size 450 (24px)
    500: Size 500 (32px)
    550: Size 550 (36px)
    600: Size 600 (40px)
    615: Size 615 (44px)
    625: Size 625 (48px)
    650: Size 650 (56px)
    655: Size 655 (60px)
    665: Size 665 (62px)
    675: Size 675 (64px)
    685: Size 685 (72px)
    700: Size 700 (80px)
    725: Size 725 (88px)
    750: Size 750 (96px)
    765: Size 765 (104px)
    770: Size 770 (108px)
    775: Size 775 (112px)
    800: Size 800 (120px)
    825: Size 825 (128px)
    835: Size 835 (144px)
    840: Size 840 (132px)
    845: Size 845 (153px)
    850: Size 850 (160px)
    865: Size 865 (184px)
    900: Size 900 (200px)
    925: Size 925 (208px)
    950: Size 950 (240px)
    975: Size 975 (288px)
    1000: Size 1000 (320px)
    1050: Size 1050 (360px)
    1075: Size 1075 (406px)
    1100: Size 1100 (480px)
    1125: Size 1125 (516px)
    1200: Size 1200 (640px)
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="db bg--neutral-200 {{modifier}}"></div><p>{{label}}</p>
---
*/

.square685 {
  height: 4rem;
  width: 4rem;
}

.square725 {
  height: 4.8888888889rem;
  width: 4.8888888889rem;
}

.square765 {
  height: 5.7777777778rem;
  width: 5.7777777778rem;
}
@media screen and (min-width: 480px) and (max-width: 768px) {
  .square600-m {
    height: 2.2222222222rem;
    width: 2.2222222222rem;
  }
}
/*
---
Name: Text Align
Base:
    t: text-align
Modifiers:
    l: left
    r: right
    c: center
    j: justify
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="f500 {{modifier}}">The quick brown fox jumps over the lazy dog</div><p>{{label}}</p>
---
*/
.tl {
  text-align: left;
}

.tr {
  text-align: right;
}

.tc {
  text-align: center;
}
/*
---
Name: Text Decoration
Modifiers:
    strike: line-through
    underline: underline
    underline-dotted: dotted underline
    underline-dashed: dashed underline
    no-underline: none
    line-behind: line behind
    overline: overline
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
HoverClasses: true
Example: <div class="db f500 {{modifier}}">The quick brown fox...</div><p>{{label}}</p>
---
*/
/*
---
Name: Text Decoration Thickness
Base:
    underline-thickness: text-decoration-thickness
Modifiers:
    500: 500 (1px)
    600: 600 (2px)
    625: 625 (3px)
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
HoverClasses: true
Example: <div class="db f500 underline {{modifier}}">The quick brown fox...</div><p>{{label}}</p>
---
*/

.underline {
  text-decoration: underline;
}

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

.hover-underline:hover {
  text-decoration: underline;
}

.hover-no-underline:hover {
  text-decoration: none;
}
@media screen and (min-width: 769px) {
  .no-underline-nm {
    text-decoration: none;
  }
  .hover-underline-nm:hover {
    text-decoration: underline;
  }
}
@media screen and (min-width: 1025px) {
  .no-underline-l {
    text-decoration: none;
  }
  .hover-underline-l:hover {
    text-decoration: underline;
  }
}
/*
---
Name: Text Transform
Base:
    tt: text-transform
Modifiers:
    c: capitalize
    l: lowercase
    u: uppercase
    n: none
    s: spacedout
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="db f500 {{modifier}}">The quick brown fox...</div><p>{{label}}</p>
---
*/
.ttc {
  text-transform: capitalize;
}

.ttu {
  text-transform: uppercase;
}
/*
---
Name: Type Scale
Base:
    f: font-size
Modifiers:
    100: Size 100
    200: Size 200
    300: Size 300
    400: Size 400
    500: Size 500
    600: Size 600
    700: Size 700
    800: Size 800
    825: Size 825
    850: Size 850
    900: Size 900
    1000: Size 1000
    1100: Size 1100
    1200: Size 1200
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="db {{modifier}}">The quick brown fox jumps over the lazy dog</div><p>{{label}}</p>
---
*/
.humongoose {
  line-height: 1;
  font-size: 43px;
}
@media screen and (min-width: 320px) {
  .humongoose {
    font-size: calc(43px + 182 * (100vw - 320px) / 880);
  }
}
@media screen and (min-width: 1200px) {
  .humongoose {
    font-size: 225px;
  }
}

.ginormous {
  line-height: 1;
  font-size: 57px;
}
@media screen and (min-width: 320px) {
  .ginormous {
    font-size: calc(57px + 78 * (100vw - 320px) / 880);
  }
}
@media screen and (min-width: 1200px) {
  .ginormous {
    font-size: 135px;
  }
}

.f100 {
  font-size: 0.6111111111rem;
  line-height: 1.696969697;
}

.f200 {
  font-size: 0.7222222222rem;
  line-height: 1.641025641;
}

.f300 {
  font-size: 0.8888888889rem;
  line-height: 1.5;
}

.f400 {
  font-size: 1rem;
  line-height: 1.4814814815;
}

.f500 {
  font-size: 1.1666666667rem;
  line-height: 1.3968253968;
}

.f600 {
  font-size: 1.3333333333rem;
  line-height: 1.3333333333;
}

.f700 {
  font-size: 1.7777777778rem;
  line-height: 1.25;
}

.f800 {
  font-size: 2.3888888889rem;
  line-height: 1.1782945736;
}

.f825 {
  font-size: 2.6666666667rem;
  line-height: 1.1666666667;
}

.f850 {
  font-size: 2.8333333333rem;
  line-height: 1.1503267974;
}

.f900 {
  font-size: 3.1666666667rem;
  line-height: 1.1228070175;
}

.f1000 {
  font-size: 4.2222222222rem;
  line-height: 1.0526315789;
}

.f1100 {
  font-size: 5.6111111111rem;
  line-height: 1.00330033;
}

.f1200 {
  font-size: 7.5rem;
  line-height: 0.9283950617;
}

.f100 {
  font-size: 0.6111111111rem;
  line-height: 1.696969697;
}

.f200 {
  font-size: 0.7222222222rem;
  line-height: 1.641025641;
}

.f300 {
  font-size: 0.8888888889rem;
  line-height: 1.5;
}

.f400 {
  font-size: 1rem;
  line-height: 1.4814814815;
}

.f500 {
  font-size: 1.1666666667rem;
  line-height: 1.3968253968;
}

.f600 {
  font-size: 1.3333333333rem;
  line-height: 1.3333333333;
}

.f700 {
  font-size: 1.7777777778rem;
  line-height: 1.25;
}

.f800 {
  font-size: 2.3888888889rem;
  line-height: 1.1782945736;
}

.f825 {
  font-size: 2.6666666667rem;
  line-height: 1.1666666667;
}

.f850 {
  font-size: 2.8333333333rem;
  line-height: 1.1503267974;
}

.f900 {
  font-size: 3.1666666667rem;
  line-height: 1.1228070175;
}

.f1000 {
  font-size: 4.2222222222rem;
  line-height: 1.0526315789;
}

.f1100 {
  font-size: 5.6111111111rem;
  line-height: 0.9702970297;
}

.f1200 {
  font-size: 7.5rem;
  line-height: 1.0074074074;
}

@media screen and (min-width: 480px) {
  .f100-ns {
    font-size: 0.6111111111rem;
    line-height: 1.696969697;
  }
  .f200-ns {
    font-size: 0.7222222222rem;
    line-height: 1.641025641;
  }
  .f300-ns {
    font-size: 0.8888888889rem;
    line-height: 1.5;
  }
  .f400-ns {
    font-size: 1rem;
    line-height: 1.4814814815;
  }
  .f500-ns {
    font-size: 1.1666666667rem;
    line-height: 1.3968253968;
  }
  .f600-ns {
    font-size: 1.3333333333rem;
    line-height: 1.3333333333;
  }
  .f700-ns {
    font-size: 1.7777777778rem;
    line-height: 1.25;
  }
  .f800-ns {
    font-size: 2.3888888889rem;
    line-height: 1.1782945736;
  }
  .f825-ns {
    font-size: 2.6666666667rem;
    line-height: 1.1666666667;
  }
  .f850-ns {
    font-size: 2.8333333333rem;
    line-height: 1.1503267974;
  }
  .f900-ns {
    font-size: 3.1666666667rem;
    line-height: 1.1228070175;
  }
  .f1000-ns {
    font-size: 4.2222222222rem;
    line-height: 1.0526315789;
  }
  .f1100-ns {
    font-size: 5.6111111111rem;
    line-height: 0.9702970297;
  }
  .f1200-ns {
    font-size: 7.5rem;
    line-height: 1.0074074074;
  }
}
@media screen and (min-width: 480px) and (max-width: 768px) {
  .f100-m {
    font-size: 0.6111111111rem;
    line-height: 1.696969697;
  }
  .f200-m {
    font-size: 0.7222222222rem;
    line-height: 1.641025641;
  }
  .f300-m {
    font-size: 0.8888888889rem;
    line-height: 1.5;
  }
  .f400-m {
    font-size: 1rem;
    line-height: 1.4814814815;
  }
  .f500-m {
    font-size: 1.1666666667rem;
    line-height: 1.3968253968;
  }
  .f600-m {
    font-size: 1.3333333333rem;
    line-height: 1.3333333333;
  }
  .f700-m {
    font-size: 1.7777777778rem;
    line-height: 1.25;
  }
  .f800-m {
    font-size: 2.3888888889rem;
    line-height: 1.1782945736;
  }
  .f825-m {
    font-size: 2.6666666667rem;
    line-height: 1.1666666667;
  }
  .f850-m {
    font-size: 2.8333333333rem;
    line-height: 1.1503267974;
  }
  .f900-m {
    font-size: 3.1666666667rem;
    line-height: 1.1228070175;
  }
  .f1000-m {
    font-size: 4.2222222222rem;
    line-height: 1.0526315789;
  }
  .f1100-m {
    font-size: 5.6111111111rem;
    line-height: 0.9702970297;
  }
  .f1200-m {
    font-size: 7.5rem;
    line-height: 1.0074074074;
  }
}
@media screen and (min-width: 769px) {
  .f100-nm {
    font-size: 0.6111111111rem;
    line-height: 1.696969697;
  }
  .f200-nm {
    font-size: 0.7222222222rem;
    line-height: 1.641025641;
  }
  .f300-nm {
    font-size: 0.8888888889rem;
    line-height: 1.5;
  }
  .f400-nm {
    font-size: 1rem;
    line-height: 1.4814814815;
  }
  .f500-nm {
    font-size: 1.1666666667rem;
    line-height: 1.3968253968;
  }
  .f600-nm {
    font-size: 1.3333333333rem;
    line-height: 1.3333333333;
  }
  .f700-nm {
    font-size: 1.7777777778rem;
    line-height: 1.25;
  }
  .f800-nm {
    font-size: 2.3888888889rem;
    line-height: 1.1782945736;
  }
  .f825-nm {
    font-size: 2.6666666667rem;
    line-height: 1.1666666667;
  }
  .f850-nm {
    font-size: 2.8333333333rem;
    line-height: 1.1503267974;
  }
  .f900-nm {
    font-size: 3.1666666667rem;
    line-height: 1.1228070175;
  }
  .f1000-nm {
    font-size: 4.2222222222rem;
    line-height: 1.0526315789;
  }
  .f1100-nm {
    font-size: 5.6111111111rem;
    line-height: 0.9702970297;
  }
  .f1200-nm {
    font-size: 7.5rem;
    line-height: 1.0074074074;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .f100-xm {
    font-size: 0.6111111111rem;
    line-height: 1.696969697;
  }
  .f200-xm {
    font-size: 0.7222222222rem;
    line-height: 1.641025641;
  }
  .f300-xm {
    font-size: 0.8888888889rem;
    line-height: 1.5;
  }
  .f400-xm {
    font-size: 1rem;
    line-height: 1.4814814815;
  }
  .f500-xm {
    font-size: 1.1666666667rem;
    line-height: 1.3968253968;
  }
  .f600-xm {
    font-size: 1.3333333333rem;
    line-height: 1.3333333333;
  }
  .f700-xm {
    font-size: 1.7777777778rem;
    line-height: 1.25;
  }
  .f800-xm {
    font-size: 2.3888888889rem;
    line-height: 1.1782945736;
  }
  .f825-xm {
    font-size: 2.6666666667rem;
    line-height: 1.1666666667;
  }
  .f850-xm {
    font-size: 2.8333333333rem;
    line-height: 1.1503267974;
  }
  .f900-xm {
    font-size: 3.1666666667rem;
    line-height: 1.1228070175;
  }
  .f1000-xm {
    font-size: 4.2222222222rem;
    line-height: 1.0526315789;
  }
  .f1100-xm {
    font-size: 5.6111111111rem;
    line-height: 0.9702970297;
  }
  .f1200-xm {
    font-size: 7.5rem;
    line-height: 1.0074074074;
  }
}
@media screen and (min-width: 1025px) {
  .f100-l {
    font-size: 0.6111111111rem;
    line-height: 1.696969697;
  }
  .f200-l {
    font-size: 0.7222222222rem;
    line-height: 1.641025641;
  }
  .f300-l {
    font-size: 0.8888888889rem;
    line-height: 1.5;
  }
  .f400-l {
    font-size: 1rem;
    line-height: 1.4814814815;
  }
  .f500-l {
    font-size: 1.1666666667rem;
    line-height: 1.3968253968;
  }
  .f600-l {
    font-size: 1.3333333333rem;
    line-height: 1.3333333333;
  }
  .f700-l {
    font-size: 1.7777777778rem;
    line-height: 1.25;
  }
  .f800-l {
    font-size: 2.3888888889rem;
    line-height: 1.1782945736;
  }
  .f825-l {
    font-size: 2.6666666667rem;
    line-height: 1.1666666667;
  }
  .f850-l {
    font-size: 2.8333333333rem;
    line-height: 1.1503267974;
  }
  .f900-l {
    font-size: 3.1666666667rem;
    line-height: 1.1228070175;
  }
  .f1000-l {
    font-size: 4.2222222222rem;
    line-height: 1.0526315789;
  }
  .f1100-l {
    font-size: 5.6111111111rem;
    line-height: 0.9702970297;
  }
  .f1200-l {
    font-size: 7.5rem;
    line-height: 1.0074074074;
  }
}
/*
---
Name: Line Height
Base:
    lh: Line Height
Modifiers:
    -none: None
    100: 100
    200: 200
    300: 300
    400: 400
    500: 500
    600: 600
    700: 700
    800: 800
    900: 900
    1000: 1000
    1100: 1100
    1200: 1200
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
---
*/
/*
---
Name: Typography
Modifiers:
    truncate: truncate
---
*/

/*
---
Name: Vertical Align
Base:
    v: vertical-align
Modifiers:
    -base: base
    -mid: middle
    -top: top
    -btm: bottom
    -txt-btm: text-bottom
    -txt-top: text-top
    -sub: sub
    -super: super
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
---
*/

.v-mid {
  vertical-align: middle;
}
/*
---
Name: Webkit Overflow Scroll
Base:
    scroll: Webkit Overflow Scroll
Modifiers:
    -touch: Touch
    -auto: Auto
---
*/
.scroll-touch {
  -webkit-overflow-scrolling: touch;
}
/*
---
Name: Whitespace
Base:
    ws: white-space
Modifiers:
    n: normal
    nw: nowrap
    p: pre
    pw: pre-wrap
    pl: pre-line
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
---
*/

.wsnw {
  white-space: nowrap;
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .wsnw-xm {
    white-space: nowrap;
  }
}
@media screen and (min-width: 1025px) {
  .wsnw-l {
    white-space: nowrap;
  }
}
/*
---
Name: Width
Base:
    w: width
    mw: max-width
Modifiers:
    -auto: auto
    -none: none
    0: Size 0 (0px)
    100: Size 100 (20px)
    200: Size 200 (40px)
    300: Size 300 (80px)
    325: Size 325 (96px)
    350: Size 350 (113px)
    355: Size 355 (128px)
    375: Size 375 (170px)
    385: Size 385 (192px)
    400: Size 400 (226px)
    425: Size 425 (283px)
    450: Size 450 (340px)
    500: Size 500 (453px)
    550: Size 550 (566px)
    565: Size 600 (600px)
    575: Size 640 (640px)
    600: Size 600 (660px)
    650: Size 650 (793px)
    700: Size 700 (906px)
    725: Size 725 (968px)
    750: Size 750 (1020px)
    775: Size 775 (1088px)
    800: Size 800 (1133px)
    825: Size 825 (1138px) - 10 columns, 1 column gutter
    850: Size 850 (1246px)
    875: Size 875 (1224px)
    900: Size 900 (1360px)
    950: Size 950 (1473px)
    1000: Size 1000 (1586px)
    1050: Size 1050 (1700px)
    1100: Size 1100 (1813px)
    -0p: 0
    -8p: (1/12)%
    -10p: 10%
    -16p: (1/6)%
    -20p: 20%
    -25p: 25%
    -30p: 30%
    -33p: (100/3)%
    -40p: 40%
    -41p: (5/12)%
    -50p: 50%
    -58p: (7/12)%
    -60p: 60%
    -66p: (100/1.5)%
    -70p: 70%
    -75p: 75%
    -80p: 80%
    -83p: (5/6)%
    -90p: 90%
    -91p: (11/12)%
    -97p: 97%
    -100p: 100%
    -0vw: 0
    -10vw: 10vw
    -20vw: 20vw
    -25vw: 25vw
    -30vw: 30vw
    -33vw: (100/3)vw
    -40vw: 40vw
    -50vw: 50vw
    -60vw: 60vw
    -66vw: (100/1.5)vw
    -70vw: 70vw
    -75vw: 75vw
    -80vw: 80vw
    -90vw: 90vw
    -100vw: 100vw
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="dib bg--neutral-200 py300 {{modifier}}"></div><p>{{label}}</p>
---
*/
/*
---
Name: Seeds Width
Base:
    seeds-w: width
    seeds-mw: max-width
    seeds-min-w: min-width
Modifiers:
    -auto: auto
    0: Seeds Size 0 (0px)
    100: Seeds Size 100 (2px)
    200: Seeds Size 200 (4px)
    300: Seeds Size 300 (8px)
    350: Seeds Size 350 (12px)
    400: Seeds Size 400 (16px)
    450: Seeds Size 450 (24px)
    500: Seeds Size 500 (32px)
    600: Seeds Size 600 (40px)
    625: Seeds Size 625 (48px)
    650: Seeds Size 650 (56px)
    675: Seeds Size 675 (64px)
    700: Seeds Size 700 (72px)
    725: Seeds Size 725 (88px)
    750: Seeds Size 750 (96px)
    765: Seeds Size 765 (104px)
    775: Seeds Size 775 (112px)
    800: Seeds Size 800 (120px)
    825: Seeds Size 825 (128px)
    850: Seeds Size 850 (160px)
    900: Seeds Size 900 (200px)
    950: Seeds Size 950 (240px)
    1000: Seeds Size 1000 (320px)
    1100: Seeds Size 1100 (480px)
    1125: Seeds Size 1125 (516px)
    1200: Seeds Size 1200 (640px)
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
Example: <div class="dib bg--neutral-200 py300 {{modifier}}"></div><p>{{label}}</p>
---
*/

.mw200 {
  max-width: 2.2222222222rem;
}

.mw400 {
  max-width: 12.5925925926rem;
}

.mw500 {
  max-width: 25.1851851852rem;
}

.mw900 {
  max-width: 75.5555555556rem;
}

.seeds-mw950 {
  max-width: 13.3333333333rem;
}

.w-10p {
  width: 10%;
}

.w-16p {
  width: 16.6666666667%;
}

.w-20p {
  width: 20%;
}

.w-30p {
  width: 30%;
}

.mw-41p {
  max-width: 41.6666666667%;
}

.w-50p {
  width: 50%;
}

.w-60p {
  width: 60%;
}

.w-70p {
  width: 70%;
}

.w-75p {
  width: 75%;
}

.w-90p {
  width: 90%;
}

.w-91p {
  width: 91.6666666667%;
}

.w-100p {
  width: 100%;
}

.mw-100p {
  max-width: 100%;
}

@media screen and (min-width: 480px) {
  .w-auto-ns {
    width: auto;
  }
  .mw425-ns {
    max-width: 15.7407407407rem;
  }
}
@media screen and (min-width: 480px) and (max-width: 768px) {
  .w-50p-m {
    width: 50%;
  }
  .w-100p-m {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .mw-100p-nm {
    max-width: 100%;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .w-auto-xm {
    width: auto;
  }
  .mw900-xm {
    max-width: 75.5555555556rem;
  }
  .w-100p-xm {
    width: 100%;
  }
  .seeds-mw1000-xm {
    max-width: 17.7777777778rem;
  }
}
@media screen and (min-width: 1025px) {
  .w-auto-l {
    width: auto;
  }
  .mw900-l {
    max-width: 75.5555555556rem;
  }
  .w-50p-l {
    width: 50%;
  }
  .seeds-mw1000-l {
    max-width: 17.7777777778rem;
  }
  .mw-none-l {
    max-width: none;
  }
}
/*
---
Name: Word Break
Base:
    word: word-break
Modifiers:
    -normal: normal
    -wrap: break-all
    -nowrap: keep-all
    -anywhere: anywhere
Breakpoints:
    -ns: not-small
    -m: medium
    -nm: not-medium
    -xm: small desktop
    -l: large
---
*/
/*
---
Name: Z-index
Base:
    z: z-index
Modifiers:
    -1: -1
    0: 0
    1: 1
    2: 2
    3: 3
    4: 4
    5: 5
    6: 6
    7: 7
    8: 8
    9: 9
    10: 10
    11: 11
    12: 12
    13: 13
    14: 14
    15: 15
    16: 16
    17: 17
    18: 18
    19: 19
    20: 20
    21: 21
    22: 22
    23: 23
    24: 24
    25: 25
    100: 100
    999: 999
    9999: 9999
    -max: -max
    -inherit: inherit
    -initial: initial
    -unset: unset
---
*/

.z2 {
  z-index: 2;
}

.z10 {
  z-index: 10;
}