// Globals we want everyone to have!
// If this were a complete project, these would be things like spacing, theme colors, typography, etc.
:root {
  --color-primary-hue: 200;  
}

.grid {
  // These grid properties will be available to the .item inside it (see below).
	--grid-column-width: 1fr;
	--grid-column-count: 4;
	--grid-gap: 1.25rem;

	@media (min-width: 60em) {
		--grid-column-count: 8;
	}

	@media (min-width: 80em) {
		--grid-gap: 2.5rem;
		--grid-column-count: 12;
	}
  
  display: grid;
  grid-gap: var(--grid-gap);
  grid-template-columns: repeat(
    var(--grid-column-count),
    var(--grid-column-width)
  );
  
  // We can repeat custom property values elsewhere we find them useful.
  // In this case, combining these with calc() might be even more powerful to fit our theme.
  padding-left: var(--grid-gap);
  padding-right: var(--grid-gap);
  margin-left: auto;
  margin-right: auto;
  max-width: 90rem;
}

.item {
  // Calculate saturation based on the position of the element in the set.
  // Since we only manipulate this per item, it makes sense to define it here.
  --saturation: calc(var(--index) * (100 / var(--items)) * 1%);
  
  // You can use the custom property as part of a value like HSL.
  // Notice that we're using a global for the hue (theming anyone?)
  background: hsl(var(--color-primary-hue), var(--saturation), 40%);
  border-color: hsl(var(--color-primary-hue), var(--saturation), 50%);
  
  border-style: solid;
  border-width: 0.125rem;
  border-radius: 0.5rem;
  height: 10rem;
  
  // The grid column is set here and is updated through modifier classes (see below).
  // We're using a fallback which matches our grid automatically all the time.
  grid-column: span var(--span, var(--grid-column-count));
}

.item--half {
  @media (min-width: 60em) {
		--span: 4;
	}

	@media (min-width: 80em) {
		--span: 6;
	}
}

.item--third {
	@media (min-width: 80em) {
		--span: 4;
	}
}

.item--fourth {
  @media (min-width: 60em) {
		--span: 2;
	}

	@media (min-width: 80em) {
		--span: 3;
	}
}