/**
 * Tiny Grid implementation
 **/

[grid] { 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  box-sizing: border-box;
}

[grid] > * { 
  -webkit-box-flex: 1; 
  -webkit-flex: 1; 
      -ms-flex: 1; 
          flex: 1;
  box-sizing: border-box;
}

[grid]:not([grid~="collapse"]) { 
 margin: -1rem 0 0 -1rem;
}

[grid]:not([grid~="collapse"]) > * { 
  padding-left: 1rem;
  padding-top: 1rem;
}

@media (max-width: 767px) { /* small */
    [grid] { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
    [grid] > * { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; }
}

@media (min-width: 768px) { /* medium */
  [grid~='1-10'] > *, .c-1-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 10%; -ms-flex: 0 0 10%; flex: 0 0 10%; }
  [grid~='1-5'] > *, .c-1-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; }
  [grid~='1-4'] > *, .c-1-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; }
  [grid~='1-3'] > *, .c-1-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.3333334%; -ms-flex: 0 0 33.3333334%; flex: 0 0 33.3333334%; }
  [grid~='1-2'] > *, .c-1-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; }
}

@media (min-width: 960px) { /* large */
  [grid~='l-1-10'] > *, .c-l-1-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 10%; -ms-flex: 0 0 10%; flex: 0 0 10%; }
  [grid~='l-1-5'] > *, .c-l-1-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; }
  [grid~='l-1-4'] > *, .c-l-1-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; }
  [grid~='l-1-3'] > *, .c-l-1-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.3333334%; -ms-flex: 0 0 33.3333334%; flex: 0 0 33.3333334%; }
  [grid~='l-1-2'] > *, .c-l-1-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; }
}

