:root {
  --grid-margin-desktop:22px;
  --grid-gutter-desktop:25px;
  --grid-column-width-desktop:72px;
  --grid-margin-tablet:16px;
  --grid-gutter-tablet:25px;
  --grid-column-width-tablet:72px;
  --grid-margin-phone:16px;
  --grid-gutter-phone:25px;
  --grid-column-width-phone:72px;
}

.mocked {
  margin: 0 auto;
  position: relative;
}

.flex,
.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.col {
  -ms-flex-preferred-size: 72px;
      flex-basis: 72px;
}

.block {
  display: block;
}

.flex-wrap {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.column {
  margin: 0 12.5px;
}

.grid-column-with-aside {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 2fr minmax(20%, 300px);
  grid-template-columns: 2fr minmax(20%, 300px);
  grid-gap: 25px;
}

/* RESPONSIVAS */
@media (max-width: 719px) and (min-width: 320px) {
  .grid {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin: 0;
    grid-gap: var(--grid-gutter-desktop,25px);
}
  .container {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    padding: var(--grid-margin-phone, 22px);
  }
  .xs-1 {
    grid-column-end: span 1;
    -ms-grid-column-span: 1;
  }
  .xs-2 {
    grid-column-end: span 2;
    -ms-grid-column-span: 2;
  }
  .xs-3 {
    grid-column-end: span 3;
    -ms-grid-column-span: 3;
  }
  .xs-4 {
    grid-column-end: span 4;
    -ms-grid-column-span: 4;
  }
}

@media (max-width: 1023px) and (min-width: 720px) {
  .grid {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    display: -ms-grid;
    display: grid;
    margin: 0;
    grid-gap: 25px;
    grid-gap: var(--grid-gutter-tablet, 25px);
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .container {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    padding: var(--grid-margin-tablet, 22px);
  }
  .sm-1 {
    grid-column-end: span 1;
    -ms-grid-column-span: 1;
  }
  .sm-2 {
    grid-column-end: span 2;
    -ms-grid-column-span: 2;
  }
  .sm-3 {
    grid-column-end: span 3;
    -ms-grid-column-span: 3;
  }
  .sm-4 {
    grid-column-end: span 4;
    -ms-grid-column-span: 4;
  }
  .sm-5 {
    grid-column-end: span 5;
    -ms-grid-column-span: 5;
  }
  .sm-6 {
    grid-column-end: span 6;
    -ms-grid-column-span: 6;
  }
  .sm-7 {
    grid-column-end: span 7;
    -ms-grid-column-span: 7;
  }
  .sm-8 {
    grid-column-end: span 8;
    -ms-grid-column-span: 8;
  }
}

@media (min-width: 1024px) {
  .grid {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin: 0;
    grid-gap: var(--grid-gutter-desktop,25px);
}

  .container {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    padding: var(--grid-margin-desktop, 22px);
  }
  .md-1 {
    grid-column: span 1;
    -ms-grid-column-span: 1;
  }
  .md-2 {
    grid-column: span 2;
    -ms-grid-column-span: 2;
  }
  .md-3 {
    grid-column: span 3;
    -ms-grid-column-span: 3;
  }
  .md-4 {
    grid-column: span 4;
    -ms-grid-column-span: 4;
  }
  .md-5 {
    grid-column: span 5;
    -ms-grid-column-span: 5;
  }
  .md-6 {
    grid-column: span 6;
    -ms-grid-column-span: 6;
  }
  .md-7 {
    grid-column: span 7;
    -ms-grid-column-span: 7;
  }
  .md-8 {
    grid-column: span 8;
    -ms-grid-column-span: 8;
  }
  .md-9 {
    grid-column: span 9;
    -ms-grid-column-span: 9;
  }
  .md-10 {
    grid-column: span 10;
    -ms-grid-column-span: 10;
  }
  .md-11 {
    grid-column: span 11;
    -ms-grid-column-span: 11;
  }
  .md-12 {
    grid-column: span 12;
    -ms-grid-column-span: 12;
  }
}

@media (min-width: 1200px) {
  .mocked {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
  }
  .container {
    max-width: 1280px;
  }
}
/*# sourceMappingURL=grid.css.map */