@amsterdam/design-system-css 0.1.0

package/dist/heading/heading.css

@@ -0,0 +1,114 @@
+.amsterdam-heading {
+  break-after: avoid;
+  break-inside: avoid;
+  color: black;
+  font-weight: 800;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+}
+
+.amsterdam-heading-1 {
+  font-size: clamp(
+    2rem,
+    calc(
+      2rem + 0.03 * (100vw - 20rem)
+    ),
+    5rem
+  );
+  line-height: clamp(
+    2.1875rem,
+    calc(
+      2.1875rem + 0.028125 * (100vw - 20rem)
+    ),
+    5rem
+  );
+}
+
+.amsterdam-heading-2 {
+  font-size: clamp(
+    1.75rem,
+    calc(
+      1.75rem + 0.0175 * (100vw - 20rem)
+    ),
+    3.5rem
+  );
+  line-height: clamp(
+    2.125rem,
+    calc(
+      2.125rem + 0.0175 * (100vw - 20rem)
+    ),
+    3.875rem
+  );
+}
+
+.amsterdam-heading-3 {
+  font-size: clamp(
+    1.5rem,
+    calc(
+      1.5rem + 0.01 * (100vw - 20rem)
+    ),
+    2.5rem
+  );
+  line-height: clamp(
+    2rem,
+    calc(
+      2rem + 0.01 * (100vw - 20rem)
+    ),
+    3rem
+  );
+}
+
+.amsterdam-heading-4 {
+  font-size: clamp(
+    1.375rem,
+    calc(
+      1.375rem + 0.00625 * (100vw - 20rem)
+    ),
+    2rem
+  );
+  line-height: clamp(
+    1.9375rem,
+    calc(
+      1.9375rem + 0.004375 * (100vw - 20rem)
+    ),
+    2.375rem
+  );
+}
+
+.amsterdam-heading-5 {
+  font-size: clamp(
+    1.125rem,
+    calc(
+      1.125rem + 0.00375 * (100vw - 20rem)
+    ),
+    1.5rem
+  );
+  line-height: clamp(
+    1.5625rem,
+    calc(
+      1.5625rem + 0.00375 * (100vw - 20rem)
+    ),
+    1.9375rem
+  );
+}
+
+.amsterdam-heading-6 {
+  font-size: clamp(
+    1rem,
+    calc(
+      1rem + 0.00125 * (100vw - 20rem)
+    ),
+    1.125rem
+  );
+  line-height: clamp(
+    1.375rem,
+    calc(
+      1.375rem + 0.000625 * (100vw - 20rem)
+    ),
+    1.4375rem
+  );
+}
+
+/*# sourceMappingURL=heading.css.map */

package/dist/heading/heading.css.map

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

package/dist/icon/icon.css

@@ -0,0 +1,37 @@
+.amsterdam-icon {
+  align-items: center;
+  display: inline-flex;
+  /* TODO: this height should be provided by the text element its part of? */
+  height: clamp(
+    1.5rem,
+    calc(
+      1.5rem + 0.00125 * (100vw - 20rem)
+    ),
+    1.625rem
+  );
+  /* TODO: 12px is not part of the design system, what should this be? */
+  margin-inline-end: 12px;
+  /* Offset icon by 3px, because Amsterdam Sans vertical alignment is off */
+  padding-block-end: 3px;
+}
+
+.amsterdam-icon svg {
+  fill: currentColor;
+}
+
+.amsterdam-icon-small svg {
+  height: 1rem;
+  width: 1rem;
+}
+
+.amsterdam-icon-medium svg {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.amsterdam-icon-large svg {
+  height: 2rem;
+  width: 2rem;
+}
+
+/*# sourceMappingURL=icon.css.map */

package/dist/icon/icon.css.map

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

package/dist/link/link.css

@@ -0,0 +1,69 @@
+.amsterdam-link {
+  color: var(--amsterdam-color-primary-blue);
+  display: inline-flex;
+  font-size: clamp(
+    1.125rem,
+    calc(
+      1.125rem + 0.00375 * (100vw - 20rem)
+    ),
+    1.5rem
+  );
+  font-weight: 800;
+  line-height: clamp(
+    1.8125rem,
+    calc(
+      1.8125rem + 0.005625 * (100vw - 20rem)
+    ),
+    2.375rem
+  );
+  outline-offset: var(--amsterdam-focus-outline-offset);
+  text-decoration: none;
+}
+
+.amsterdam-link:focus,
+.amsterdam-link:hover {
+  outline-offset: var(--amsterdam-focus-outline-offset);
+  text-decoration: underline;
+}
+
+.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-standalone:focus,
+.amsterdam-link-standalone:hover {
+  box-shadow: inset 0 -3px var(--amsterdam-color-primary-blue);
+  text-decoration: none;
+}
+
+.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-inlist {
+  font-size: clamp(
+    1rem,
+    calc(
+      1rem + 0.00125 * (100vw - 20rem)
+    ),
+    1.125rem
+  );
+  font-weight: 400;
+  line-height: clamp(
+    1.5rem,
+    calc(
+      1.5rem + 0.00125 * (100vw - 20rem)
+    ),
+    1.625rem
+  );
+  padding-block: 12px;
+}
+
+/*# sourceMappingURL=link.css.map */

package/dist/link/link.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/link/link.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA","file":"link.css"}

package/dist/list/list.css

@@ -0,0 +1,7 @@
+.amsterdam-list {
+  list-style: none;
+  margin-block: 0;
+  padding-inline: 0;
+}
+
+/*# sourceMappingURL=list.css.map */

package/dist/list/list.css.map

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

package/dist/paragraph/paragraph.css

@@ -0,0 +1,53 @@
+.amsterdam-paragraph {
+  font-size: clamp(
+    1.125rem,
+    calc(
+      1.125rem + 0.00375 * (100vw - 20rem)
+    ),
+    1.5rem
+  );
+  line-height: clamp(
+    1.8125rem,
+    calc(
+      1.8125rem + 0.005625 * (100vw - 20rem)
+    ),
+    2.375rem
+  );
+  margin-block: 0;
+}
+
+.amsterdam-paragraph-intro {
+  font-size: clamp(
+    1.375rem,
+    calc(
+      1.375rem + 0.005 * (100vw - 20rem)
+    ),
+    1.875rem
+  );
+  line-height: clamp(
+    2.1875rem,
+    calc(
+      2.1875rem + 0.00625 * (100vw - 20rem)
+    ),
+    2.8125rem
+  );
+}
+
+.amsterdam-paragraph-small {
+  font-size: clamp(
+    1rem,
+    calc(
+      1rem + 0.00125 * (100vw - 20rem)
+    ),
+    1.125rem
+  );
+  line-height: clamp(
+    1.5rem,
+    calc(
+      1.5rem + 0.003125 * (100vw - 20rem)
+    ),
+    1.8125rem
+  );
+}
+
+/*# sourceMappingURL=paragraph.css.map */

package/dist/paragraph/paragraph.css.map

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

package/dist/spacing/spacing.css

@@ -0,0 +1,249 @@
+/*
+  The breakpoint is 820px / 16 = 51.25rems
+  https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
+*/
+/*
+  utility classes for spacing
+  TODO: currently using :nth-child(n) for higher specificity, find better way to solve this
+*/
+.amsterdam-space-block-start-xs:nth-child(n) {
+  margin-block-start: 8px;
+}
+
+.amsterdam-space-block-end-xs:nth-child(n) {
+  margin-block-end: 8px;
+}
+
+.amsterdam-space-inline-start-xs:nth-child(n) {
+  margin-inline-start: 8px;
+}
+
+.amsterdam-space-inline-end-xs:nth-child(n) {
+  margin-inline-end: 8px;
+}
+
+.amsterdam-space-block-start-s:nth-child(n) {
+  margin-block-start: 16px;
+}
+
+.amsterdam-space-block-end-s:nth-child(n) {
+  margin-block-end: 16px;
+}
+
+.amsterdam-space-inline-start-s:nth-child(n) {
+  margin-inline-start: 16px;
+}
+
+.amsterdam-space-inline-end-s:nth-child(n) {
+  margin-inline-end: 16px;
+}
+
+.amsterdam-space-block-start-m:nth-child(n) {
+  margin-block-start: 24px;
+}
+
+.amsterdam-space-block-end-m:nth-child(n) {
+  margin-block-end: 24px;
+}
+
+.amsterdam-space-inline-start-m:nth-child(n) {
+  margin-inline-start: 24px;
+}
+
+.amsterdam-space-inline-end-m:nth-child(n) {
+  margin-inline-end: 24px;
+}
+
+.amsterdam-space-block-start-l:nth-child(n) {
+  margin-block-start: 40px;
+}
+
+.amsterdam-space-block-end-l:nth-child(n) {
+  margin-block-end: 40px;
+}
+
+.amsterdam-space-inline-start-l:nth-child(n) {
+  margin-inline-start: 40px;
+}
+
+.amsterdam-space-inline-end-l:nth-child(n) {
+  margin-inline-end: 40px;
+}
+
+.amsterdam-space-block-start-xl:nth-child(n) {
+  margin-block-start: 56px;
+}
+
+.amsterdam-space-block-end-xl:nth-child(n) {
+  margin-block-end: 56px;
+}
+
+.amsterdam-space-inline-start-xl:nth-child(n) {
+  margin-inline-start: 56px;
+}
+
+.amsterdam-space-inline-end-xl:nth-child(n) {
+  margin-inline-end: 56px;
+}
+
+.amsterdam-space-block-start-xxl:nth-child(n) {
+  margin-block-start: 72px;
+}
+
+.amsterdam-space-block-end-xxl:nth-child(n) {
+  margin-block-end: 72px;
+}
+
+.amsterdam-space-inline-start-xxl:nth-child(n) {
+  margin-inline-start: 72px;
+}
+
+.amsterdam-space-inline-end-xxl:nth-child(n) {
+  margin-inline-end: 72px;
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-block-start-xs--large:nth-child(n) {
+    margin-block-start: 8px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-block-end-xs--large:nth-child(n) {
+    margin-block-end: 8px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-inline-start-xs--large:nth-child(n) {
+    margin-inline-start: 8px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-inline-end-xs--large:nth-child(n) {
+    margin-inline-end: 8px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-block-start-s--large:nth-child(n) {
+    margin-block-start: 16px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-block-end-s--large:nth-child(n) {
+    margin-block-end: 16px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-inline-start-s--large:nth-child(n) {
+    margin-inline-start: 16px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-inline-end-s--large:nth-child(n) {
+    margin-inline-end: 16px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-block-start-m--large:nth-child(n) {
+    margin-block-start: 24px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-block-end-m--large:nth-child(n) {
+    margin-block-end: 24px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-inline-start-m--large:nth-child(n) {
+    margin-inline-start: 24px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-inline-end-m--large:nth-child(n) {
+    margin-inline-end: 24px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-block-start-l--large:nth-child(n) {
+    margin-block-start: 40px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-block-end-l--large:nth-child(n) {
+    margin-block-end: 40px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-inline-start-l--large:nth-child(n) {
+    margin-inline-start: 40px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-inline-end-l--large:nth-child(n) {
+    margin-inline-end: 40px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-block-start-xl--large:nth-child(n) {
+    margin-block-start: 80px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-block-end-xl--large:nth-child(n) {
+    margin-block-end: 80px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-inline-start-xl--large:nth-child(n) {
+    margin-inline-start: 80px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-inline-end-xl--large:nth-child(n) {
+    margin-inline-end: 80px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-block-start-xxl--large:nth-child(n) {
+    margin-block-start: 120px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-block-end-xxl--large:nth-child(n) {
+    margin-block-end: 120px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-inline-start-xxl--large:nth-child(n) {
+    margin-inline-start: 120px;
+  }
+}
+
+@media (min-width: 51.25rem) {
+  .amsterdam-space-inline-end-xxl--large:nth-child(n) {
+    margin-inline-end: 120px;
+  }
+}
+
+/*# sourceMappingURL=spacing.css.map */

package/dist/spacing/spacing.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../utils/breakpoint.scss","../../src/spacing/spacing.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACmBA;AAAA;AAAA;AAAA;AAKE;EACE,oBAvBe;;;AAyBjB;EACE,kBA1Be;;;AA4BjB;EACE,qBA7Be;;;AA+BjB;EACE,mBAhCe;;;AAsBjB;EACE,oBAvBe;;;AAyBjB;EACE,kBA1Be;;;AA4BjB;EACE,qBA7Be;;;AA+BjB;EACE,mBAhCe;;;AAsBjB;EACE,oBAvBe;;;AAyBjB;EACE,kBA1Be;;;AA4BjB;EACE,qBA7Be;;;AA+BjB;EACE,mBAhCe;;;AAsBjB;EACE,oBAvBe;;;AAyBjB;EACE,kBA1Be;;;AA4BjB;EACE,qBA7Be;;;AA+BjB;EACE,mBAhCe;;;AAsBjB;EACE,oBAvBe;;;AAyBjB;EACE,kBA1Be;;;AA4BjB;EACE,qBA7Be;;;AA+BjB;EACE,mBAhCe;;;AAsBjB;EACE,oBAvBe;;;AAyBjB;EACE,kBA1Be;;;AA4BjB;EACE,qBA7Be;;;AA+BjB;EACE,mBAhCe;;;AAsCf;EADF;IAEI,oBA/BmB;;;;AAmCrB;EADF;IAEI,kBApCmB;;;;AAwCrB;EADF;IAEI,qBAzCmB;;;;AA6CrB;EADF;IAEI,mBA9CmB;;;;AA8BrB;EADF;IAEI,oBA/BmB;;;;AAmCrB;EADF;IAEI,kBApCmB;;;;AAwCrB;EADF;IAEI,qBAzCmB;;;;AA6CrB;EADF;IAEI,mBA9CmB;;;;AA8BrB;EADF;IAEI,oBA/BmB;;;;AAmCrB;EADF;IAEI,kBApCmB;;;;AAwCrB;EADF;IAEI,qBAzCmB;;;;AA6CrB;EADF;IAEI,mBA9CmB;;;;AA8BrB;EADF;IAEI,oBA/BmB;;;;AAmCrB;EADF;IAEI,kBApCmB;;;;AAwCrB;EADF;IAEI,qBAzCmB;;;;AA6CrB;EADF;IAEI,mBA9CmB;;;;AA8BrB;EADF;IAEI,oBA/BmB;;;;AAmCrB;EADF;IAEI,kBApCmB;;;;AAwCrB;EADF;IAEI,qBAzCmB;;;;AA6CrB;EADF;IAEI,mBA9CmB;;;;AA8BrB;EADF;IAEI,oBA/BmB;;;;AAmCrB;EADF;IAEI,kBApCmB;;;;AAwCrB;EADF;IAEI,qBAzCmB;;;;AA6CrB;EADF;IAEI,mBA9CmB","file":"spacing.css"}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "version": "0.1.0",
+  "author": "Community for NL Design System",
+  "description": "CSS files for components for the City of Amsterdam based on the NL Design System architecture",
+  "license": "EUPL-1.2",
+  "name": "@amsterdam/design-system-css",
+  "keywords": [
+    "nl-design-system"
+  ],
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Amsterdam/design-system.git",
+    "directory": "packages/css"
+  },
+  "scripts": {
+    "build": "sass src/:dist/",
+    "clean": "rimraf dist/"
+  },
+  "dependencies": {
+    "normalize.css": "8.0.1"
+  },
+  "devDependencies": {
+    "sass": "1.58.0"
+  },
+  "gitHead": "048043a5fe15bdba7d7665d8531705169a01ab50"
+}

package/src/document/document.scss

@@ -0,0 +1,16 @@
+@import "../../node_modules/normalize.css/normalize.css";
+@import "../../utils/calculate-fluid-style";
+
+body {
+  font-family: "Amsterdam Sans", "Arial", sans-serif;
+  font-size: calculate-fluid-style(18, 24);
+  font-weight: 400;
+  line-height: 160%;
+}
+
+/* Use border-box sizing by default for all elements */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}

package/src/grid/grid.scss

@@ -0,0 +1,83 @@
+$amsterdam-columns-small: 4;
+$amsterdam-columns-large: 12;
+
+@import "../../utils/breakpoint";
+
+.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: $amsterdam-breakpoint) {
+    grid-template-columns: repeat(12, 1fr);
+  }
+}
+
+@mixin col-span-x {
+  @for $i from 1 through $amsterdam-columns-small {
+    .amsterdam-col-span-#{$i} {
+      grid-column: span $i / span $i;
+    }
+  }
+}
+
+@mixin col-start-x {
+  @for $i from 1 through $amsterdam-columns-small {
+    .amsterdam-col-start-#{$i} {
+      grid-column-start: $i;
+    }
+  }
+}
+
+@mixin col-span-large-x {
+  @for $i from 1 through $amsterdam-columns-large {
+    .amsterdam-col-span-#{$i}--large {
+      @media (min-width: $amsterdam-breakpoint) {
+        grid-column: span $i / span $i;
+      }
+    }
+  }
+}
+
+@mixin col-start-large-x {
+  @for $i from 1 through $amsterdam-columns-large {
+    .amsterdam-col-start-#{$i}--large {
+      @media (min-width: $amsterdam-breakpoint) {
+        grid-column-start: $i;
+      }
+    }
+  }
+}
+
+@mixin subgrid-span-x {
+  @for $i from 1 through $amsterdam-columns-small {
+    .amsterdam-subgrid-span-#{$i} {
+      column-gap: clamp(16px, 2vw, 24px);
+      display: grid;
+      grid-template-columns: repeat($i, 1fr);
+    }
+  }
+}
+
+@mixin subgrid-span-large-x {
+  @for $i from 1 through $amsterdam-columns-large {
+    .amsterdam-subgrid-span-#{$i}--large {
+      column-gap: clamp(16px, 2vw, 24px);
+      display: grid;
+      @media (min-width: $amsterdam-breakpoint) {
+        grid-template-columns: repeat($i, 1fr);
+      }
+    }
+  }
+}
+
+@include col-span-x;
+@include col-start-x;
+@include col-span-large-x;
+@include col-start-large-x;
+@include subgrid-span-x;
+@include subgrid-span-large-x;