/* Variables */

/* Spacing Scale - based on a ratio of 1:2 */
:root {
  --spacing-none: 0;
  --spacing-extra-small: .25rem;
  --spacing-small: .5rem;
  --spacing-medium: 1rem;
  --spacing-large: 2rem;
  --spacing-extra-large: 4rem;
}

/* Media Queries */

@custom-media --breakpoint-not-small screen and (min-width: 30em);
@custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em);
@custom-media --breakpoint-large screen and (min-width: 60em);

/*
  COLUMNS

  A six step powers of two scale ranging from 0 to 4rem.
  Namespaces are composable and thus highly grockable - check the legend below

  Legend:

  cc = column-count
  cg = column-gap

  0 = none
  1 = 1st step in spacing scale
  2 = 2nd step in spacing scale
  3 = 3rd step in spacing scale
  4 = 4th step in spacing scale
  5 = 5th step in spacing scale

*/

.cc2 { column-count: 2; }
.cc3 { column-count: 3; }
.cc4 { column-count: 4; }
.cc5 { column-count: 5; }
.cc6 { column-count: 6; }

@media (--breakpoint-not-small) {
  .cc2-ns { column-count: 2; }
  .cc3-ns { column-count: 3; }
  .cc4-ns { column-count: 4; }
  .cc5-ns { column-count: 5; }
  .cc6-ns { column-count: 6; }
}

@media (--breakpoint-medium) {
  .cc2-m { column-count: 2; }
  .cc3-m { column-count: 3; }
  .cc4-m { column-count: 4; }
  .cc5-m { column-count: 5; }
  .cc6-m { column-count: 6; }
}

@media (--breakpoint-large) {
  .cc2-l { column-count: 2; }
  .cc3-l { column-count: 3; }
  .cc4-l { column-count: 4; }
  .cc5-l { column-count: 5; }
  .cc6-l { column-count: 6; }
}

.cg0 { column-gap: var(--spacing-none); }
.cg1 { column-gap: var(--spacing-extra-small); }
.cg2 { column-gap: var(--spacing-small); }
.cg3 { column-gap: var(--spacing-medium); }
.cg4 { column-gap: var(--spacing-large); }
.cg5 { column-gap: var(--spacing-extra-large); }

@media (--breakpoint-not-small) {
  .cg0-ns { column-gap: var(--spacing-none); }
  .cg1-ns { column-gap: var(--spacing-extra-small); }
  .cg2-ns { column-gap: var(--spacing-small); }
  .cg3-ns { column-gap: var(--spacing-medium); }
  .cg4-ns { column-gap: var(--spacing-large); }
  .cg5-ns { column-gap: var(--spacing-extra-large); }
}

@media (--breakpoint-medium) {
  .cg0-m { column-gap: var(--spacing-none); }
  .cg1-m { column-gap: var(--spacing-extra-small); }
  .cg2-m { column-gap: var(--spacing-small); }
  .cg3-m { column-gap: var(--spacing-medium); }
  .cg4-m { column-gap: var(--spacing-large); }
  .cg5-m { column-gap: var(--spacing-extra-large); }
}

@media (--breakpoint-large) {
  .cg0-l { column-gap: var(--spacing-none); }
  .cg1-l { column-gap: var(--spacing-extra-small); }
  .cg2-l { column-gap: var(--spacing-small); }
  .cg3-l { column-gap: var(--spacing-medium); }
  .cg4-l { column-gap: var(--spacing-large); }
  .cg5-l { column-gap: var(--spacing-extra-large); }
}