/******* 
 * css file for when colcade is initialised on the .grid-menu-container 
 * the number of visible columns is determined by the number of columns that have 'display: block'
 * we always need at least one column so 'ul.colcade-column--1' (first column) always remains visible
 * as it does not have 'display: none'. to display additional columns we simply use dispay: block 
 *******/

/* hide colcade-columns except for first one */
.grid-menu-container ul.colcade-column--2,
.grid-menu-container ul.colcade-column--3,
.grid-menu-container ul.colcade-column--4 {
  display: none;
}

/* flex container */
.grid-menu-container > ul {
  column-gap: 24px;
}

/* second column */
@media only screen and (min-width: 768px) {
  .grid-menu-container ul.colcade-column--2 {
    display: block;
  }
  .grid-menu-container li.colcade {
    flex: 0 0 calc(50% - 12px );
  }
}

/* third column */
@media only screen and (min-width: 992px) {
  .grid-menu-container ul.colcade-column--3 {
    display: block;
  }
  /* this overwrites the above where we have two columns */
  .grid-menu-container li.colcade {
    flex: 0 0 calc(33.333% - 16px );
  }
}

/* fouth column */
/* 
@media only screen and (min-width: 1200px) {
  .grid-menu-container ul.colcade-column--4 {
    display: block;
  }
  .grid-menu-container li.colcade {
    flex: 0 0 calc(25% - 18px );
  }
}
*/