.container,
.container-fluid, .container--grid,
.container-fluid--grid {
  margin: auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-height: 100%;
  height: 100%;
  position: relative;
}

.container--grid,
.container-fluid--grid {
  display: -ms-grid;
  display: grid;
}

@media (max-width: 375px) {
  .container--grid,
  .container-fluid--grid {
    -ms-grid-columns: (1fr)[12];
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: calc(1rem * 2);
    padding: 0 1rem;
  }
}

@media only screen and (min-width: 568px) {
  .container--grid,
  .container-fluid--grid {
    -ms-grid-columns: (1fr)[12];
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: calc(1rem * 2);
    padding: 0 1rem;
  }
}

@media only screen and (min-width: 768px) {
  .container--grid,
  .container-fluid--grid {
    -ms-grid-columns: (1fr)[12];
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: calc(1.6rem * 2);
    padding: 0 1.6rem;
  }
}

@media only screen and (min-width: 1024px) {
  .container--grid,
  .container-fluid--grid {
    -ms-grid-columns: (1fr)[12];
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: calc(1.6rem * 2);
    padding: 0 1.6rem;
  }
}

@media only screen and (min-width: 1280px) {
  .container--grid,
  .container-fluid--grid {
    -ms-grid-columns: (1fr)[12];
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: calc(1.6rem * 2);
    padding: 0 1.6rem;
  }
}

.container--grid .row,
.container-fluid--grid .row {
  grid-column: 1 / -1;
}

@media (max-width: 375px) {
  .container--grid .row,
  .container-fluid--grid .row {
    margin: 0 -1rem;
  }
}

@media only screen and (min-width: 568px) {
  .container--grid .row,
  .container-fluid--grid .row {
    margin: 0 -1rem;
  }
}

@media only screen and (min-width: 768px) {
  .container--grid .row,
  .container-fluid--grid .row {
    margin: 0 -1.6rem;
  }
}

@media only screen and (min-width: 1024px) {
  .container--grid .row,
  .container-fluid--grid .row {
    margin: 0 -1.6rem;
  }
}

@media only screen and (min-width: 1280px) {
  .container--grid .row,
  .container-fluid--grid .row {
    margin: 0 -1.6rem;
  }
}

.container {
  width: 100%;
  max-width: 100%;
  padding: 0 1.6rem;
}

@media (max-width: 375px) {
  .container {
    width: 100%;
    max-width: 100%;
    padding: 0 1rem;
  }
}

@media only screen and (min-width: 568px) {
  .container {
    width: 600px;
    max-width: 600px;
    padding: 0 1rem;
  }
}

@media only screen and (min-width: 768px) {
  .container {
    width: 900px;
    max-width: 900px;
    padding: 0 1.6rem;
  }
}

@media only screen and (min-width: 1024px) {
  .container {
    width: 1200px;
    max-width: 1200px;
    padding: 0 1.6rem;
  }
}

@media only screen and (min-width: 1280px) {
  .container {
    width: 1800px;
    max-width: 1800px;
    padding: 0 1.6rem;
  }
}

@supports not (display: grid) {
  .container {
    display: block;
  }
}

.container-fluid {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 375px) {
  .container-fluid {
    padding: 0 1rem;
  }
}

@media only screen and (min-width: 568px) {
  .container-fluid {
    padding: 0 1rem;
  }
}

@media only screen and (min-width: 768px) {
  .container-fluid {
    padding: 0 1.6rem;
  }
}

@media only screen and (min-width: 1024px) {
  .container-fluid {
    padding: 0 1.6rem;
  }
}

@media only screen and (min-width: 1280px) {
  .container-fluid {
    padding: 0 1.6rem;
  }
}

@supports not (display: grid) {
  .container-fluid {
    display: block;
  }
}

@media (max-width: 375px) {
  .grid-gap {
    grid-gap: calc(1rem * 2);
  }
}

@media only screen and (min-width: 568px) {
  .grid-gap {
    grid-gap: calc(1rem * 2);
  }
}

@media only screen and (min-width: 768px) {
  .grid-gap {
    grid-gap: calc(1.6rem * 2);
  }
}

@media only screen and (min-width: 1024px) {
  .grid-gap {
    grid-gap: calc(1.6rem * 2);
  }
}

@media only screen and (min-width: 1280px) {
  .grid-gap {
    grid-gap: calc(1.6rem * 2);
  }
}

/*# sourceMappingURL=container-grid.css.map */