@amsterdam/design-system-css 0.1.2 → 0.1.4

package/src/link/link.scss

@@ -1,45 +1,101 @@
-@import "../../utils/calculate-fluid-style";
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
 
 .amsterdam-link {
-  color: var(--amsterdam-color-primary-blue);
-  display: inline-flex;
-  font-size: calculate-fluid-style(18, 24);
-  font-weight: 800;
-  line-height: calculate-fluid-style(29, 38);
-  outline-offset: var(--amsterdam-focus-outline-offset);
-  text-decoration: none;
+  color: var(--amsterdam-link-color, blue);
+  font-family: var(--amsterdam-paragraph-font-family);
+  font-size: var(--amsterdam-link-font-size-narrow);
+  line-height: var(--amsterdam-link-line-height);
+  outline-offset: var(--amsterdam-link-outline-offset);
+  text-decoration: var(--amsterdam-link-text-decoration, underline);
+  text-decoration-color: var(--amsterdam-link-text-decoration-color, currentColor);
+  text-decoration-thickness: var(--amsterdam-link-text-decoration-thickness, 1px);
+  text-underline-offset: var(--amsterdam-link-text-underline-offset);
+
+  &:hover,
+  &:active {
+    color: var(--amsterdam-link-hover-color);
+    text-decoration: var(--amsterdam-link-hover-text-decoration);
+    text-decoration-thickness: var(--amsterdam-link-hover-text-decoration-thickness, 1px);
+  }
+
+  &:focus {
+    color: var(--amsterdam-link-focus-color);
+    text-decoration: var(--amsterdam-link-focus-text-decoration);
+  }
+
+  &:visited {
+    color: var(--amsterdam-link-visited-color);
+  }
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-link-font-size-wide);
+  }
 }
 
-.amsterdam-link:focus,
-.amsterdam-link:hover {
-  outline-offset: var(--amsterdam-focus-outline-offset);
-  text-decoration: underline;
+.amsterdam-link--standalone-bold {
+  font-weight: var(--amsterdam-link-standalone-bold-font-weight);
 }
 
-.amsterdam-link-standalone {
-  box-shadow: inset 0 -2px var(--amsterdam-color-primary-blue);
-  font-weight: 400;
-  transition: box-shadow 100ms ease-in-out, color 100ms ease-in-out;
+.amsterdam-link--inline {
+  font-family: var(--amsterdam-link-inline-font-family);
+  font-size: var(--amsterdam-link-inline-font-size);
+  text-underline-offset: var(--amsterdam-link-inline-text-underline-offset);
+
+  &:visited {
+    color: var(--amsterdam-link-inline-visited-color);
+  }
 }
 
-.amsterdam-link-standalone:focus,
-.amsterdam-link-standalone:hover {
-  box-shadow: inset 0 -3px var(--amsterdam-color-primary-blue);
-  text-decoration: none;
+.amsterdam-link--in-list {
+  align-items: flex-start;
+  display: inline-flex;
+  font-size: var(--amsterdam-link-in-list-font-size-narrow);
+  gap: var(--amsterdam-link-in-list-gap);
+  line-height: var(--amsterdam-link-in-list-line-height);
+  text-underline-offset: var(--amsterdam-link-in-list-text-underline-offset);
+
+  // Override for icon size
+  span.amsterdam-icon svg {
+    height: 16px;
+    width: 16px;
+  }
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-link-in-list-font-size-wide);
+  }
 }
 
-.amsterdam-link-inline {
-  color: var(--amsterdam-color-primary-blue);
-  display: inline;
-  font-size: inherit;
-  font-weight: 400;
-  letter-spacing: inherit;
-  line-height: inherit;
+.amsterdam-link--on-background-dark {
+  color: var(--amsterdam-link-on-background-dark-color);
+  text-decoration: var(--amsterdam-link-on-background-dark-text-decoration);
+
+  &:hover,
+  &:active {
+    color: var(--amsterdam-link-on-background-dark-hover-color);
+    text-decoration: var(--amsterdam-link-on-background-dark-hover-text-decoration);
+  }
+
+  &:visited {
+    color: var(--amsterdam-link-on-background-dark-visited-color);
+  }
 }
 
-.amsterdam-link-inlist {
-  font-size: calculate-fluid-style(16, 18);
-  font-weight: 400;
-  line-height: calculate-fluid-style(24, 26);
-  padding-block: 12px;
+.amsterdam-link--on-background-light {
+  color: var(--amsterdam-link-on-background-light-color);
+  text-decoration: var(--amsterdam-link-on-background-light-text-decoration);
+
+  &:hover,
+  &:active {
+    color: var(--amsterdam-link-on-background-light-hover-color);
+    text-decoration: var(--amsterdam-link-on-background-light-hover-text-decoration);
+  }
+
+  &:visited {
+    color: var(--amsterdam-link-on-background-light-visited-color);
+  }
 }

package/src/list/list.scss

@@ -1,5 +1,16 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@mixin reset {
+  box-sizing: border-box;
+}
+
 .amsterdam-list {
   list-style: none;
   margin-block: 0;
   padding-inline: 0;
+
+  @include reset;
 }

package/src/paragraph/README.md

@@ -0,0 +1,24 @@
+# Paragraph
+
+De `Paragraph` component gebruik je voor een alinea met lopende tekst, instructies van formulieren en voor overige losstaande tekstfragmenten.
+
+## Richtlijnen
+
+- Groepeer zinnen die bij elkaar horen in een alinea. Begin een nieuwe alinea wanneer de tekst over een andere onderwerp gaat of een eigen doel heeft.
+- Overweeg of een alinea met meer dan 7 zinnen of 140 woorden duidelijker is als je tekst indeelt in twee alinea's. Teksten met niet al te lange alinea's zijn makkelijker te begrijpen als je pauze neemt, en door het groeperen is informatie sneller terug te vinden.
+
+## Relevante WCAG eisen
+
+- [WCAG 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): Blokken die er uit zien als een alinea worden ook door een computer herkend als alinea
+- [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): Het contrast van zwarte tekst op een witte achtergrond is hoog genoeg
+- [WCAG 1.4.4](https://www.w3.org/TR/WCAG21/#resize-text): Tekst kan met zoomen en het aanpassen van de standaard tekstgrootte twee keer zo groot gemaakt worden
+- [WCAG 1.4.10](https://www.w3.org/TR/WCAG21/#reflow): Als de tekst breder is dan de viewport is scrollen niet nodig om alle tekst te kunnen zien
+- [WCAG 1.4.12](https://www.w3.org/TR/WCAG21/#text-spacing): De genoemde style properties kunnen worden aangepast zonder dat de tekst onleesbaar wordt
+- [WCAG 3.1.2](https://www.w3.org/TR/WCAG21/#language-of-parts): Het is aan te geven in welke taal de tekst is
+- [WCAG 1.4.6](https://www.w3.org/TR/WCAG21/#contrast-enhanced): Het contrast van zwarte tekst op een witte achtergrond is hoger dan 7:1
+- [WCAG 1.4.8](https://www.w3.org/TR/WCAG21/#visual-presentation): We voldoen niet aan al deze eisen
+
+## Referenties
+
+- [MDN: `<p>`: The Paragraph element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p)
+- [Hoe lang mag een alinea zijn? En waar hangt dat van af? - Taaladvies.net](https://taaladvies.net/lengte-van-alineas/)

package/src/paragraph/paragraph-css.md

@@ -0,0 +1,3 @@
+# HTML
+
+Gebruik altijd het `<p>` HTML-element, die heeft automatisch de goede paragraph role in de accessibility tree (dat is nodig voor WCAG eis 1.3.1). Ook is zo de tekst nog steeds goed leesbaar als de CSS niet geladen kan worden.

package/src/paragraph/paragraph.scss

@@ -1,17 +1,44 @@
-@import "../../utils/calculate-fluid-style";
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
 
-.amsterdam-paragraph {
-  font-size: calculate-fluid-style(18, 24);
-  line-height: calculate-fluid-style(29, 38);
+@import "../../utils/breakpoint";
+
+@mixin reset {
+  box-sizing: border-box;
   margin-block: 0;
+  -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-paragraph-intro {
-  font-size: calculate-fluid-style(22, 30);
-  line-height: calculate-fluid-style(35, 45);
+.amsterdam-paragraph {
+  color: var(--amsterdam-paragraph-color);
+  font-family: var(--amsterdam-paragraph-font-family);
+  font-size: var(--amsterdam-paragraph-font-size-narrow);
+  font-weight: var(--amsterdam-paragraph-font-weight);
+  line-height: var(--amsterdam-paragraph-line-height);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-paragraph-font-size-wide);
+  }
+
+  @include reset;
 }
 
 .amsterdam-paragraph-small {
-  font-size: calculate-fluid-style(16, 18);
-  line-height: calculate-fluid-style(24, 29);
+  font-size: var(--amsterdam-paragraph-small-font-size-narrow);
+  line-height: var(--amsterdam-paragraph-small-line-height);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-paragraph-small-font-size-wide);
+  }
+}
+
+.amsterdam-paragraph-large {
+  font-size: var(--amsterdam-paragraph-large-font-size-narrow);
+  line-height: var(--amsterdam-paragraph-large-line-height);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-paragraph-large-font-size-wide);
+  }
 }

package/src/unordered-list/README.md

@@ -0,0 +1,15 @@
+# Unordered List
+
+## Introductie
+
+Een lijst is een verticale groep gerelateerde inhoud.
+
+## Specificaties
+
+Deze lijst kan 2 niveaus hebben. Het eerste niveau bestaat uit vierkantjes. Het tweede niveau bestaat uit halve kastlijntjes. Tekst in de lijstitems springt een vaste afstand in.
+
+## Terminologie
+
+- **unordered list**: uitgeschreven versie van de HTML afkorting `<ul>`
+- **list item**: uitgeschreven van van [HTML `<li>`](https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element). Ook [in ARIA is het `role="listitem"`](https://www.w3.org/TR/wai-aria-1.2/#listitem)
+- **marker**: zoals in de [CSS pseudo-selector `::marker`](https://drafts.csswg.org/css-pseudo-4/#marker-pseudo)

package/src/unordered-list/unordered-list.scss

@@ -0,0 +1,44 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+@mixin reset {
+  box-sizing: border-box;
+  margin-block: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-unordered-list {
+  color: var(--amsterdam-unordered-list-color);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--amsterdam-unordered-list-font-family);
+  font-size: var(--amsterdam-unordered-list-font-size-narrow);
+  font-weight: var(--amsterdam-unordered-list-font-weight);
+  gap: var(--amsterdam-unordered-list-gap);
+  line-height: var(--amsterdam-unordered-list-line-height);
+  list-style: var(--amsterdam-unordered-list-list-style);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-unordered-list-font-size-wide);
+  }
+
+  @include reset;
+}
+
+.amsterdam-unordered-list__item {
+  padding-inline: var(--amsterdam-unordered-list-item-padding-inline);
+}
+
+.amsterdam-unordered-list .amsterdam-unordered-list {
+  list-style-type: var(--amsterdam-unordered-list-unordered-list-list-style-type);
+  padding-block: var(--amsterdam-unordered-list-unordered-list-padding-block);
+  padding-inline: var(--amsterdam-unordered-list-unordered-list-padding-inline);
+}
+
+.amsterdam-unordered-list .amsterdam-unordered-list .amsterdam-unordered-list__item {
+  padding-inline: var(--amsterdam-unordered-list-unordered-list-item-padding-inline);
+}

package/utils/breakpoint.scss

@@ -1,5 +1,10 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
 /*
-  The breakpoint is 820px / 16 = 51.25rems
+  The breakpoint is 854px / 16 = 53.375rems
   https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
 */
-$amsterdam-breakpoint: 51.25rem;
+$amsterdam-breakpoint: 53.375rem;

package/utils/calculate-fluid-style.scss

@@ -1,6 +1,11 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
 @use "sass:math";
 
-@function calculate-fluid-style($minSizePx, $maxSizePx, $minScreenWidthPx: 320, $maxScreenWidthPx: 1920) {
+@function calculate-fluid-style($minSizePx, $maxSizePx, $minScreenWidthPx: 320, $maxScreenWidthPx: 1440) {
   $defaultBaseSize: 16;
   $minSize: math.div($minSizePx, $defaultBaseSize) * 1rem;
   $maxSize: math.div($maxSizePx, $defaultBaseSize) * 1rem;

package/dist/document/document.css

@@ -1,22 +0,0 @@
-@import "normalize.css";
-body {
-  font-family: "Amsterdam Sans", "Arial", sans-serif;
-  font-size: clamp(
-    1.125rem,
-    calc(
-      1.125rem + 0.00375 * (100vw - 20rem)
-    ),
-    1.5rem
-  );
-  font-weight: 400;
-  line-height: 160%;
-}
-
-/* Use border-box sizing by default for all elements */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/*# sourceMappingURL=document.css.map */

package/dist/document/document.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/document/document.scss"],"names":[],"mappings":"AAAQ;AAGR;EACE;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;EACA;;;AAGF;AACA;AAAA;AAAA;EAGE","file":"document.css"}

package/dist/grid/grid.css

@@ -1,340 +0,0 @@
-/*
-  The breakpoint is 820px / 16 = 51.25rems
-  https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
-*/
-.amsterdam-grid {
-  column-gap: clamp(16px, 2vw, 24px);
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  /* stylelint-disable-next-line property-disallowed-list */
-  margin: 0 auto;
-  max-width: 1440px;
-  padding-inline: clamp(16px, 2vw, 32px);
-}
-@media (min-width: 51.25rem) {
-  .amsterdam-grid {
-    grid-template-columns: repeat(12, 1fr);
-  }
-}
-
-.amsterdam-col-span-1 {
-  grid-column: span 1/span 1;
-}
-
-.amsterdam-col-span-2 {
-  grid-column: span 2/span 2;
-}
-
-.amsterdam-col-span-3 {
-  grid-column: span 3/span 3;
-}
-
-.amsterdam-col-span-4 {
-  grid-column: span 4/span 4;
-}
-
-.amsterdam-col-start-1 {
-  grid-column-start: 1;
-}
-
-.amsterdam-col-start-2 {
-  grid-column-start: 2;
-}
-
-.amsterdam-col-start-3 {
-  grid-column-start: 3;
-}
-
-.amsterdam-col-start-4 {
-  grid-column-start: 4;
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-span-1--large {
-    grid-column: span 1/span 1;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-span-2--large {
-    grid-column: span 2/span 2;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-span-3--large {
-    grid-column: span 3/span 3;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-span-4--large {
-    grid-column: span 4/span 4;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-span-5--large {
-    grid-column: span 5/span 5;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-span-6--large {
-    grid-column: span 6/span 6;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-span-7--large {
-    grid-column: span 7/span 7;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-span-8--large {
-    grid-column: span 8/span 8;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-span-9--large {
-    grid-column: span 9/span 9;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-span-10--large {
-    grid-column: span 10/span 10;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-span-11--large {
-    grid-column: span 11/span 11;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-span-12--large {
-    grid-column: span 12/span 12;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-start-1--large {
-    grid-column-start: 1;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-start-2--large {
-    grid-column-start: 2;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-start-3--large {
-    grid-column-start: 3;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-start-4--large {
-    grid-column-start: 4;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-start-5--large {
-    grid-column-start: 5;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-start-6--large {
-    grid-column-start: 6;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-start-7--large {
-    grid-column-start: 7;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-start-8--large {
-    grid-column-start: 8;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-start-9--large {
-    grid-column-start: 9;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-start-10--large {
-    grid-column-start: 10;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-start-11--large {
-    grid-column-start: 11;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-col-start-12--large {
-    grid-column-start: 12;
-  }
-}
-
-.amsterdam-subgrid-span-1 {
-  column-gap: clamp(16px, 2vw, 24px);
-  display: grid;
-  grid-template-columns: repeat(1, 1fr);
-}
-
-.amsterdam-subgrid-span-2 {
-  column-gap: clamp(16px, 2vw, 24px);
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-}
-
-.amsterdam-subgrid-span-3 {
-  column-gap: clamp(16px, 2vw, 24px);
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.amsterdam-subgrid-span-4 {
-  column-gap: clamp(16px, 2vw, 24px);
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-}
-
-.amsterdam-subgrid-span-1--large {
-  column-gap: clamp(16px, 2vw, 24px);
-  display: grid;
-}
-@media (min-width: 51.25rem) {
-  .amsterdam-subgrid-span-1--large {
-    grid-template-columns: repeat(1, 1fr);
-  }
-}
-
-.amsterdam-subgrid-span-2--large {
-  column-gap: clamp(16px, 2vw, 24px);
-  display: grid;
-}
-@media (min-width: 51.25rem) {
-  .amsterdam-subgrid-span-2--large {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-.amsterdam-subgrid-span-3--large {
-  column-gap: clamp(16px, 2vw, 24px);
-  display: grid;
-}
-@media (min-width: 51.25rem) {
-  .amsterdam-subgrid-span-3--large {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-.amsterdam-subgrid-span-4--large {
-  column-gap: clamp(16px, 2vw, 24px);
-  display: grid;
-}
-@media (min-width: 51.25rem) {
-  .amsterdam-subgrid-span-4--large {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-.amsterdam-subgrid-span-5--large {
-  column-gap: clamp(16px, 2vw, 24px);
-  display: grid;
-}
-@media (min-width: 51.25rem) {
-  .amsterdam-subgrid-span-5--large {
-    grid-template-columns: repeat(5, 1fr);
-  }
-}
-
-.amsterdam-subgrid-span-6--large {
-  column-gap: clamp(16px, 2vw, 24px);
-  display: grid;
-}
-@media (min-width: 51.25rem) {
-  .amsterdam-subgrid-span-6--large {
-    grid-template-columns: repeat(6, 1fr);
-  }
-}
-
-.amsterdam-subgrid-span-7--large {
-  column-gap: clamp(16px, 2vw, 24px);
-  display: grid;
-}
-@media (min-width: 51.25rem) {
-  .amsterdam-subgrid-span-7--large {
-    grid-template-columns: repeat(7, 1fr);
-  }
-}
-
-.amsterdam-subgrid-span-8--large {
-  column-gap: clamp(16px, 2vw, 24px);
-  display: grid;
-}
-@media (min-width: 51.25rem) {
-  .amsterdam-subgrid-span-8--large {
-    grid-template-columns: repeat(8, 1fr);
-  }
-}
-
-.amsterdam-subgrid-span-9--large {
-  column-gap: clamp(16px, 2vw, 24px);
-  display: grid;
-}
-@media (min-width: 51.25rem) {
-  .amsterdam-subgrid-span-9--large {
-    grid-template-columns: repeat(9, 1fr);
-  }
-}
-
-.amsterdam-subgrid-span-10--large {
-  column-gap: clamp(16px, 2vw, 24px);
-  display: grid;
-}
-@media (min-width: 51.25rem) {
-  .amsterdam-subgrid-span-10--large {
-    grid-template-columns: repeat(10, 1fr);
-  }
-}
-
-.amsterdam-subgrid-span-11--large {
-  column-gap: clamp(16px, 2vw, 24px);
-  display: grid;
-}
-@media (min-width: 51.25rem) {
-  .amsterdam-subgrid-span-11--large {
-    grid-template-columns: repeat(11, 1fr);
-  }
-}
-
-.amsterdam-subgrid-span-12--large {
-  column-gap: clamp(16px, 2vw, 24px);
-  display: grid;
-}
-@media (min-width: 51.25rem) {
-  .amsterdam-subgrid-span-12--large {
-    grid-template-columns: repeat(12, 1fr);
-  }
-}
-
-/*# sourceMappingURL=grid.css.map */

package/dist/grid/grid.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../utils/breakpoint.scss","../../src/grid/grid.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACKA;EACE;EACA;EACA;AACA;EACA;EACA;EACA;;AAEA;EATF;IAUI;;;;AAMA;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAOF;EACE,mBAFS;;;AACX;EACE,mBAFS;;;AACX;EACE,mBAFS;;;AACX;EACE,mBAFS;;;AAUT;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AASF;EADF;IAEI,mBAHO;;;;AAET;EADF;IAEI,mBAHO;;;;AAET;EADF;IAEI,mBAHO;;;;AAET;EADF;IAEI,mBAHO;;;;AAET;EADF;IAEI,mBAHO;;;;AAET;EADF;IAEI,mBAHO;;;;AAET;EADF;IAEI,mBAHO;;;;AAET;EADF;IAEI,mBAHO;;;;AAET;EADF;IAEI,mBAHO;;;;AAET;EADF;IAEI,mBAHO;;;;AAET;EADF;IAEI,mBAHO;;;;AAET;EADF;IAEI,mBAHO;;;;AAWX;EACE;EACA;EACA;;;AAHF;EACE;EACA;EACA;;;AAHF;EACE;EACA;EACA;;;AAHF;EACE;EACA;EACA;;;AAOF;EACE;EACA;;AACA;EAHF;IAII;;;;AAJJ;EACE;EACA;;AACA;EAHF;IAII;;;;AAJJ;EACE;EACA;;AACA;EAHF;IAII;;;;AAJJ;EACE;EACA;;AACA;EAHF;IAII;;;;AAJJ;EACE;EACA;;AACA;EAHF;IAII;;;;AAJJ;EACE;EACA;;AACA;EAHF;IAII;;;;AAJJ;EACE;EACA;;AACA;EAHF;IAII;;;;AAJJ;EACE;EACA;;AACA;EAHF;IAII;;;;AAJJ;EACE;EACA;;AACA;EAHF;IAII;;;;AAJJ;EACE;EACA;;AACA;EAHF;IAII;;;;AAJJ;EACE;EACA;;AACA;EAHF;IAII;;;;AAJJ;EACE;EACA;;AACA;EAHF;IAII","file":"grid.css"}