.wrapper {
  margin: auto 15px;
}
@media (min-width: 576px) {
  .wrapper {
    margin: auto 30px;
  }
}
@media (min-width: 768px) {
  .wrapper {
    width: 750px;
    margin: auto;
  }
}
@media (min-width: 992px) {
  .wrapper {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .wrapper {
    width: 1170px;
  }
}
@media (min-width: 1400px) {
  .wrapper {
    width: 1370px;
  }
}
.wrapper.pd {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  margin: 0;
}
@media (min-width: 576px) {
  .wrapper.pd {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (min-width: 768px) {
  .wrapper.pd {
    padding-left: calc((100% - 750px) / 2);
    padding-right: calc((100% - 750px) / 2);
  }
}
@media (min-width: 992px) {
  .wrapper.pd {
    padding-left: calc((100% - 970px) / 2);
    padding-right: calc((100% - 970px) / 2);
  }
}
@media (min-width: 1200px) {
  .wrapper.pd {
    padding-left: calc((100% - 1170px) / 2);
    padding-right: calc((100% - 1170px) / 2);
  }
}
@media (min-width: 1400px) {
  .wrapper.pd {
    padding-left: calc((100% - 1370px) / 2);
    padding-right: calc((100% - 1370px) / 2);
  }
}