/* LIVE Rosenau */

.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/*,
  .grids-3-m*/ {
    --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));
  }
}
*/