/* DEMO */

/*
TODO
- calculate steps from main tokens
*/

:root {
  
  /* Colors */
  --color-grid-column: var(--color-light);
  --color-grid-gap: var(--color-light);
  --grid-step-1: 21.85%;
  --grid-step-2: 26.05%;
  
}

.stage {
  /* 4 */
  background: repeating-linear-gradient(90deg, var(--color-grid-column) 0%, var(--color-grid-column) var(--grid-step-1), var(--color-grid-gap) var(--grid-step-1), var(--color-grid-gap) var(--grid-step-2)); /* 4 */
  /*background: repeating-linear-gradient(90deg, var(--color-grid-column) 0%, var(--color-grid-column) 21.85%, var(--color-grid-gap) 21.85%, var(--color-grid-gap) 26.05%);*/
}
@media screen and (max-width: 47.938em) {
  .template-article .stage, 
  .template-events .stage, 
  .template-event .stage {
    /* 6 */
    --grid-step-1: 13.17%;
    --grid-step-2: 17.37%;
    /*background: repeating-linear-gradient(90deg, var(--color-grid-column) 0%, var(--color-grid-column) 13.17%, var(--color-grid-gap) 13.17%, var(--color-grid-gap) 17.37%); */ /* 6 */
  }
}
@media screen and (min-width: 48em) {
  .stage {
    /* 12 */
    --grid-step-1: 7.08%;
    --grid-step-2: 8.45%;
    /*background: repeating-linear-gradient(90deg, var(--color-grid-column) 0%, var(--color-grid-column) 7.08%, var(--color-grid-gap) 7.08%, var(--color-grid-gap) 8.45%);*/ /* 12 */
  }
}
@media screen and (min-width: 60em) {
  .event-card-full-grid, 
  .events {
    padding-block: 0.25em;
        /* 12 */
    --grid-step-1: 7.08%;
    --grid-step-2: 8.45%;
    /* 14  */
    /* NOT NEEDED
    --grid-step-1: 6.58%;
    --grid-step-2: 7.18%;
    */
    /*background: repeating-linear-gradient(90deg, var(--color-grid-column) 0%, var(--color-grid-column) 6.58%, var(--color-grid-gap) 6.58%, var(--color-grid-gap) 7.18%);*/ /* 14 */
    /*background: repeating-linear-gradient(90deg, var(--color-grid-column) 0%, var(--color-grid-column) 4.96%, var(--color-grid-gap) 4.96%, var(--color-grid-gap) 6.33%);*/ /* 16 */
  }
}