@import "../variable";

.container,
.container-fluid {
  width: 100%;
  padding-right: $main-padding;
  padding-left: $main-padding;
  margin-right: auto;
  margin-left: auto
}

@media (min-width: $sm-breakpoint) {
  .container,
  .container-sm {
    max-width: 530px !important;
  }

  .container-fluid,
  .container-fluid-sm {
    width: 100% !important;
    padding-right: $main-padding;
    padding-left: $main-padding;
  }
}

@media (min-width: $md-breakpoint) {
  .container,
  .container-sm,
  .container-md {
    max-width: 714px !important;
    padding-right: $md-main-padding;
    padding-left: $md-main-padding;
  }

  .container-fluid,
  .container-fluid-sm,
  .container-fluid-md {
    width: 100% !important;
    padding-right: $md-main-padding;
    padding-left: $md-main-padding;
  }
}

@media (min-width: $lg-breakpoint) {
  .container,
  .container-sm,
  .container-md,
  .container-lg {
    max-width: 906px !important;
    padding-right: $md-main-padding;
    padding-left: $md-main-padding;
  }

  .container-fluid,
  .container-fluid-sm,
  .container-fluid-md,
  .container-fluid-lg {
    width: 100% !important;
    padding-right: $md-main-padding;
    padding-left: $md-main-padding;
  }
}

@media (min-width: $xl-breakpoint) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    max-width: 1120px !important;
    padding-right: $xl-main-padding;
    padding-left: $xl-main-padding;
  }

  .container-fluid,
  .container-fluid-sm,
  .container-fluid-md,
  .container-fluid-lg,
  .container-fluid-xl {
    width: 100% !important;
    padding-right: $xl-main-padding;
    padding-left: $xl-main-padding;
  }
}

@media (min-width: $xxl-breakpoint) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1504px !important;
    padding-right: $xl-main-padding;
    padding-left: $xl-main-padding;
  }

  .container-fluid,
  .container-fluid-sm,
  .container-fluid-md,
  .container-fluid-lg,
  .container-fluid-xl,
  .container-fluid-xxl {
    width: 100% !important;
    padding-right: $xl-main-padding;
    padding-left: $xl-main-padding;
  }
}

.no-gutters {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.no-gutters > .col, .no-gutters > [class*=col-] {
  padding-right: 0 !important;
  padding-left: 0 !important;
}