.auto-grid-2,
.auto-grid-3, 
.auto-grid-4, 
.auto-grid-6 {
    --auto-grid-min-size: 100%;
      grid-gap: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
}

.grid-gap-0,
.auto-grid-nogap {
  grid-gap:0; /* introduced for colours list */
}
.auto-grid-gap-xs,
.grid-gap-xs {
  grid-gap: 0.5em;
}
.auto-grid-gap1,
.grid-gap-sm {
  grid-gap: 1em;
}
.auto-grid-gap2, 
.grid-gap-md {
  grid-gap: 2em;
}
.auto-grid-gap3, 
.grid-gap-lg {
  grid-gap: 3em;
}
.grid-gap-xl {
  grid-gap: 4em;
}


@media screen and (min-width:480px) {

.auto-grid-3 .box, 
.auto-grid-4 .box,
.auto-grid-6 .box {
  margin:0 0 .5em 0;
}
.auto-grid-2,
.auto-grid-3,
.auto-grid-4,
.auto-grid-6 {
/*  --auto-grid-min-size: 30%;*/	
  grid-gap: 0.5em;
}
.auto-grid-3.auto-grid-gap2 {
	grid-gap: 2em;
}
.grid-list {
  --auto-grid-min-size: 48%;
	grid-gap: 1em;
}
.auto-grid-3, .auto-grid-4, .auto-grid-6 {
  grid-gap: 0;
  /* set for home page */
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
}
@media screen and (min-width:600px) {


.auto-grid-3, .auto-grid-4, .auto-grid-6 {
  --auto-grid-min-size: 21rem; 
    grid-gap: .35rem;
}
.auto-grid-3.auto-grid-gap1 {
  --auto-grid-min-size: 100%; 
  grid-gap: 1rem;
}

.grid-list {
  --auto-grid-min-size: 48%;
	grid-gap: 1em;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
}
@media screen and (min-width:768px) {


.auto-grid-3,
.auto-grid-4,
.auto-grid-6 {
  --auto-grid-min-size: 22rem;
  grid-gap: 1rem;
}

.grid-list {
  --auto-grid-min-size: 30%;
	grid-gap: 1em;
}
.auto-grid-gap3 {
  grid-gap: 3em;
}
.auto-grid-3.auto-grid-gap1 {
    --auto-grid-min-size: 23rem;
    grid-gap: 0 .5rem;
}
.disc-content > .auto-grid-3 {
  --auto-grid-min-size: 11rem;
}
.carousel .auto-grid-3 {
      --auto-grid-min-size: 30%;
      grid-gap: 3.3%;
} 
.carousel .auto-grid-4 {
    --auto-grid-min-size: 16rem;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
}
@media screen and (min-width:992px) {

.auto-grid-2 {
  --auto-grid-min-size: 48%;
  grid-gap: 2rem;
}

.auto-grid-3.auto-grid-gap1 {
  --auto-grid-min-size: 49%; 
  grid-gap: 1rem;
  /* set for home page */
}
.carousel .auto-grid-4 {
    --auto-grid-min-size: 18rem;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
}
@media screen and (min-width:1024px) {

.auto-grid-3.auto-grid-gap1 {
  --auto-grid-min-size: 30rem; 
  grid-gap: 1rem;
}

.auto-grid-3.auto-grid-gap2 {
    grid-gap: 3em;
}

.auto-grid-3.auto-grid-gap3 {
  --auto-grid-min-size: 24rem; 
  grid-gap: 2rem;
}
.auto-grid-3, 
.auto-grid-4,
.auto-grid-6 {
    --auto-grid-min-size: 24rem;
    grid-gap: 1rem;
}
.disc-content > .auto-grid-3 {
  --auto-grid-min-size: 14rem;
}


.carousel .auto-grid-4 {
    --auto-grid-min-size: 20rem;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
}
@media screen and (min-width:1200px) {


.auto-grid-3, .auto-grid-4, .auto-grid-6 {
  --auto-grid-min-size: 24rem;
  grid-gap: 1rem 2rem;
}
.auto-grid-4 {
  --auto-grid-min-size: 20rem;
}
.auto-grid-3.auto-grid-gap1 {
  --auto-grid-min-size: 30rem; 
  grid-gap: 1rem;
}
.disc-content > .auto-grid-3 {
  --auto-grid-min-size: 19rem;
}
.carousel .auto-grid-3 {
      --auto-grid-min-size: 30%;
      grid-gap: 3.3%;
} 
.auto-grid-4.grid-gap-xs,
.auto-grid-6.grid-gap-xs {
  --auto-grid-min-size: 22rem;
  grid-gap: 0.5rem;
}
.col-lg-3 > .auto-grid-4 {
  grid-gap: 0;
}


.carousel .auto-grid-4 {
    --auto-grid-min-size: 22.5%;
      grid-gap: 2.5%;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
}
@media screen and (min-width:1600px) {
  
  .auto-grid-3,
  .auto-grid-4,
  .auto-grid-6 {
    grid-gap: 2rem;
  }
  
  .auto-grid-3 {
  --auto-grid-min-size: 23rem;
  }
  
  .auto-grid-4 {
  --auto-grid-min-size: 18rem;
  }
  .auto-grid-6 {
  --auto-grid-min-size: 12rem;
  }
  .auto-grid-4.grid-gap-cap {
    grid-gap:1.5rem;
    --auto-grid-min-size: 22rem; /* not 23 */
  }
.carousel .auto-grid-4 {
    --auto-grid-min-size: 17rem;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
}