/* R */

/*
TODO
- rename to grid (when PICO removed)
*/

/*
USAGE
- cta (grids-4)
- event sponsors (auto-fit)
*/

.grids {
  --n: 1;
  --grid-columns-width: 240px;
	display: grid;
  gap: 1rem var(--grid-4-gap);
  grid-template-columns: repeat(var(--n), 1fr);
}
@media screen and (min-width: 30em) {
  .grids-4 {
    --n: 2;
  }
}
@media screen and (min-width: 48em) {
  .grids {
    gap: 1rem var(--grid-12-gap);
  }
  .grids-3 {
    --n: 3;
  }
  .grids-4 {
    --n: 4;
  }
  .grids-6 {
    --n: 2;
  }
}
@media screen and (min-width: 60em) {
  .grids-6 {
    --n: 3;
  }
}
.grids-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-columns-width), 1fr));
}




/********************************************************
 DELETE
 ********************************************************/

/*
.grid {
  --grid-columns-width: 320px;
  --grid-mode: auto-fit;
	display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(var(--grid-mode), minmax(var(--grid-columns-width), 1fr));
}
.grids-3 {
  --n: 1;
  grid-template-columns: repeat(var(--n), 1fr);
}
.grid-flexible {
  --n: 1;
  --cell-width: 360px;
	display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(var(--n), 1fr);
}
@media screen and (min-width: 480px) {
  .grid-flexible-1 {
    grid-template-columns: repeat(auto-fill, minmax(var(--cell-width), 1fr));
  }
}
@media screen and (min-width: 768px) {
  .grids-flexible,
  .grid-flexible-2, 
  .grid-flexible-4 {
    --n: 3;
  }
}
@media screen and (min-width: 1200px) {
  .grid-flexible-2 {
    grid-template-columns: repeat(auto-fill, minmax(var(--cell-width), 1fr));
  }
}
@media screen and (min-width: 1440px) {
  .grids-flexible, 
  .grid-flexible-4 {
    --n: 4;
  }
}
.grid-flexible {
  display: grid;
  gap: 1em;
  border: 1px solid red;
}
@media screen and (min-width: 480px) {
  .grid-flexible-1 {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}
@media screen and (min-width: 768px) {
  .grid-flexible-2, 
.grid-flexible-3  {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}
*/