/* Materialise grid-compat (grid only) */
/* Supports: .container, .row, .col, .s1-12, .m1-12, .l1-12, .xl1-12, offsets */
/* Designed to be framework-agnostic */

:root{
  --grid-gutter: 1.5rem;          /* total gutter between columns */
  --grid-max-width: 1200px;       /* container max width */
}

/* Container */
.container{
  width: 100%;
  margin: 0 auto;
  padding-left: calc(var(--grid-gutter) / 2);
  padding-right: calc(var(--grid-gutter) / 2);
  max-width: var(--grid-max-width);
}

/* Row */
.row{
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--grid-gutter) / -2);
  margin-right: calc(var(--grid-gutter) / -2);
}

/* Column */
.col{
  box-sizing: border-box;
  padding-left: calc(var(--grid-gutter) / 2);
  padding-right: calc(var(--grid-gutter) / 2);
  flex: 0 0 auto;
  width: 100%;
}

/* Utility */
.hide { display: none !important; }
.show { display: block !important; }


.col .row{
  margin-left: 0;
  margin-right: 0;
}

.valign-middle { align-items: center;}
.flex { display: flex;}


/* --- Breakpoints (Materialise-ish) --- */
/* s: default (0+) */
/* m: 600px+ */
/* l: 992px+ */
/* xl: 1200px+ */

@media (min-width: 600px){
  .container{ max-width: 900px; }
}
@media (min-width: 992px){
  .container{ max-width: 1200px; }
}
@media (min-width: 1200px){
  .container{ max-width: 1400px; }
}

/* --- Column width generator (1-12) --- */
[class*=" s"], [class^="s"], [class*=" m"], [class^="m"], [class*=" l"], [class^="l"], [class*=" xl"], [class^="xl"]{
  /* no-op: makes it easy to search/debug in devtools */
}

/* Small (default) */
.col.s1  { width: 8.333333%; }
.col.s2  { width: 16.666667%; }
.col.s3  { width: 25%; }
.col.s4  { width: 33.333333%; }
.col.s5  { width: 41.666667%; }
.col.s6  { width: 50%; }
.col.s7  { width: 58.333333%; }
.col.s8  { width: 66.666667%; }
.col.s9  { width: 75%; }
.col.s10 { width: 83.333333%; }
.col.s11 { width: 91.666667%; }
.col.s12 { width: 100%; }

/* Medium */
@media (min-width: 600px){
  .col.m1  { width: 8.333333%; }
  .col.m2  { width: 16.666667%; }
  .col.m3  { width: 25%; }
  .col.m4  { width: 33.333333%; }
  .col.m5  { width: 41.666667%; }
  .col.m6  { width: 50%; }
  .col.m7  { width: 58.333333%; }
  .col.m8  { width: 66.666667%; }
  .col.m9  { width: 75%; }
  .col.m10 { width: 83.333333%; }
  .col.m11 { width: 91.666667%; }
  .col.m12 { width: 100%; }
}

/* Large */
@media (min-width: 992px){
  .col.l1  { width: 8.333333%; }
  .col.l2  { width: 16.666667%; }
  .col.l3  { width: 25%; }
  .col.l4  { width: 33.333333%; }
  .col.l5  { width: 41.666667%; }
  .col.l6  { width: 50%; }
  .col.l7  { width: 58.333333%; }
  .col.l8  { width: 66.666667%; }
  .col.l9  { width: 75%; }
  .col.l10 { width: 83.333333%; }
  .col.l11 { width: 91.666667%; }
  .col.l12 { width: 100%; }
}

/* XL */
@media (min-width: 1200px){
  .col.xl1  { width: 8.333333%; }
  .col.xl2  { width: 16.666667%; }
  .col.xl3  { width: 25%; }
  .col.xl4  { width: 33.333333%; }
  .col.xl5  { width: 41.666667%; }
  .col.xl6  { width: 50%; }
  .col.xl7  { width: 58.333333%; }
  .col.xl8  { width: 66.666667%; }
  .col.xl9  { width: 75%; }
  .col.xl10 { width: 83.333333%; }
  .col.xl11 { width: 91.666667%; }
  .col.xl12 { width: 100%; }
}

/* --- Offsets (optional but handy) --- */
.col.offset-s1  { margin-left: 8.333333%; }
.col.offset-s2  { margin-left: 16.666667%; }
.col.offset-s3  { margin-left: 25%; }
.col.offset-s4  { margin-left: 33.333333%; }
.col.offset-s5  { margin-left: 41.666667%; }
.col.offset-s6  { margin-left: 50%; }
.col.offset-s7  { margin-left: 58.333333%; }
.col.offset-s8  { margin-left: 66.666667%; }
.col.offset-s9  { margin-left: 75%; }
.col.offset-s10 { margin-left: 83.333333%; }
.col.offset-s11 { margin-left: 91.666667%; }

@media (min-width: 600px){
  .col.offset-m1  { margin-left: 8.333333%; }
  .col.offset-m2  { margin-left: 16.666667%; }
  .col.offset-m3  { margin-left: 25%; }
  .col.offset-m4  { margin-left: 33.333333%; }
  .col.offset-m5  { margin-left: 41.666667%; }
  .col.offset-m6  { margin-left: 50%; }
  .col.offset-m7  { margin-left: 58.333333%; }
  .col.offset-m8  { margin-left: 66.666667%; }
  .col.offset-m9  { margin-left: 75%; }
  .col.offset-m10 { margin-left: 83.333333%; }
  .col.offset-m11 { margin-left: 91.666667%; }
}

@media (min-width: 992px){
  .col.offset-l1  { margin-left: 8.333333%; }
  .col.offset-l2  { margin-left: 16.666667%; }
  .col.offset-l3  { margin-left: 25%; }
  .col.offset-l4  { margin-left: 33.333333%; }
  .col.offset-l5  { margin-left: 41.666667%; }
  .col.offset-l6  { margin-left: 50%; }
  .col.offset-l7  { margin-left: 58.333333%; }
  .col.offset-l8  { margin-left: 66.666667%; }
  .col.offset-l9  { margin-left: 75%; }
  .col.offset-l10 { margin-left: 83.333333%; }
  .col.offset-l11 { margin-left: 91.666667%; }
}