@amsterdam/design-system-css 0.1.2 → 0.1.3

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"}

package/dist/spacing/spacing.css

@@ -1,249 +0,0 @@
-/*
-  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

@@ -1 +0,0 @@
-{"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/src/document/document.scss

@@ -1,16 +0,0 @@
-@import "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

@@ -1,83 +0,0 @@
-$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;