.flex-grid { margin: 0 auto; display: flex; box-sizing: border-box; flex-wrap: wrap; }

.flex-grid > * { box-sizing: border-box; }

.flex-grid.g-l-fullsize { margin: 0 -8px; }

/* grid */
.g-s-1 { width: 8.33334%; padding: 8px; display: block; word-wrap: break-word; }

.g-s-2 { width: 16.66668%; padding: 8px; display: block; word-wrap: break-word; }

.g-s-3 { width: 25.00001%; padding: 8px; display: block; word-wrap: break-word; }

.g-s-4 { width: 33.33334%; padding: 8px; display: block; word-wrap: break-word; }

.g-s-5 { width: 41.66668%; padding: 8px; display: block; word-wrap: break-word; }

.g-s-6 { width: 50.00001%; padding: 8px; display: block; word-wrap: break-word; }

.g-s-7 { width: 58.33334%; padding: 8px; display: block; word-wrap: break-word; }

.g-s-8 { width: 66.66668%; padding: 8px; display: block; word-wrap: break-word; }

.g-s-9 { width: 75.00001%; padding: 8px; display: block; word-wrap: break-word; }

.g-s-10 { width: 83.33334%; padding: 8px; display: block; word-wrap: break-word; }

.g-s-11 { width: 91.66668%; padding: 8px; display: block; word-wrap: break-word; }

.g-s-12 { width: 100.00001%; padding: 8px; display: block; word-wrap: break-word; }

@media (min-width: 768px) { .g-m-1 { width: 8.33334%; padding: 8px; display: block; word-wrap: break-word; }
  .g-m-2 { width: 16.66668%; padding: 8px; display: block; word-wrap: break-word; }
  .g-m-3 { width: 25.00001%; padding: 8px; display: block; word-wrap: break-word; }
  .g-m-4 { width: 33.33334%; padding: 8px; display: block; word-wrap: break-word; }
  .g-m-5 { width: 41.66668%; padding: 8px; display: block; word-wrap: break-word; }
  .g-m-6 { width: 50.00001%; padding: 8px; display: block; word-wrap: break-word; }
  .g-m-7 { width: 58.33334%; padding: 8px; display: block; word-wrap: break-word; }
  .g-m-8 { width: 66.66668%; padding: 8px; display: block; word-wrap: break-word; }
  .g-m-9 { width: 75.00001%; padding: 8px; display: block; word-wrap: break-word; }
  .g-m-10 { width: 83.33334%; padding: 8px; display: block; word-wrap: break-word; }
  .g-m-11 { width: 91.66668%; padding: 8px; display: block; word-wrap: break-word; }
  .g-m-12 { width: 100.00001%; padding: 8px; display: block; word-wrap: break-word; } }

@media (min-width: 992px) { .g-l-1 { width: 8.33334%; padding: 8px; display: block; word-wrap: break-word; }
  .g-l-2 { width: 16.66668%; padding: 8px; display: block; word-wrap: break-word; }
  .g-l-3 { width: 25.00001%; padding: 8px; display: block; word-wrap: break-word; }
  .g-l-4 { width: 33.33334%; padding: 8px; display: block; word-wrap: break-word; }
  .g-l-5 { width: 41.66668%; padding: 8px; display: block; word-wrap: break-word; }
  .g-l-6 { width: 50.00001%; padding: 8px; display: block; word-wrap: break-word; }
  .g-l-7 { width: 58.33334%; padding: 8px; display: block; word-wrap: break-word; }
  .g-l-8 { width: 66.66668%; padding: 8px; display: block; word-wrap: break-word; }
  .g-l-9 { width: 75.00001%; padding: 8px; display: block; word-wrap: break-word; }
  .g-l-10 { width: 83.33334%; padding: 8px; display: block; word-wrap: break-word; }
  .g-l-11 { width: 91.66668%; padding: 8px; display: block; word-wrap: break-word; }
  .g-l-12 { width: 100.00001%; padding: 8px; display: block; word-wrap: break-word; } }

/* skip */
.g-s-skip-1 { margin-left: 8.33333%; }

.g-s-skip-2 { margin-left: 16.66667%; }

.g-s-skip-3 { margin-left: 25%; }

.g-s-skip-4 { margin-left: 33.33333%; }

.g-s-skip-5 { margin-left: 41.66667%; }

.g-s-skip-6 { margin-left: 50%; }

.g-s-skip-7 { margin-left: 58.33333%; }

.g-s-skip-8 { margin-left: 66.66667%; }

.g-s-skip-9 { margin-left: 75%; }

.g-s-skip-10 { margin-left: 83.33333%; }

.g-s-skip-11 { margin-left: 91.66667%; }

.g-s-skip-12 { margin-left: 100%; }

@media (min-width: 768px) { .g-m-skip-1 { margin-left: 8.33333%; }
  .g-m-skip-2 { margin-left: 16.66667%; }
  .g-m-skip-3 { margin-left: 25%; }
  .g-m-skip-4 { margin-left: 33.33333%; }
  .g-m-skip-5 { margin-left: 41.66667%; }
  .g-m-skip-6 { margin-left: 50%; }
  .g-m-skip-7 { margin-left: 58.33333%; }
  .g-m-skip-8 { margin-left: 66.66667%; }
  .g-m-skip-9 { margin-left: 75%; }
  .g-m-skip-10 { margin-left: 83.33333%; }
  .g-m-skip-11 { margin-left: 91.66667%; }
  .g-m-skip-12 { margin-left: 100%; } }

@media (min-width: 992px) { .g-l-skip-1 { margin-left: 8.33333%; }
  .g-l-skip-2 { margin-left: 16.66667%; }
  .g-l-skip-3 { margin-left: 25%; }
  .g-l-skip-4 { margin-left: 33.33333%; }
  .g-l-skip-5 { margin-left: 41.66667%; }
  .g-l-skip-6 { margin-left: 50%; }
  .g-l-skip-7 { margin-left: 58.33333%; }
  .g-l-skip-8 { margin-left: 66.66667%; }
  .g-l-skip-9 { margin-left: 75%; }
  .g-l-skip-10 { margin-left: 83.33333%; }
  .g-l-skip-11 { margin-left: 91.66667%; }
  .g-l-skip-12 { margin-left: 100%; } }