:root {
  --max-width: 1740px;
  --max-width-pad: 70px;
}

@media screen and (max-width: 768px) {
  :root {
    --max-width-pad: 30px;
  }
}

@media screen and (max-width: 639px) {
  :root {
    --max-width-pad: 20px;
  }
}

.container {
  width: 100%;
  height: 100%;
  margin: auto;
  padding-left: var(--max-width-pad);
  padding-right: var(--max-width-pad);
  z-index: 10;
}

@media screen and (min-width: 1270px) {
  .container {
    max-width: var(--max-width);
  }
}

@media screen and (max-width: 1024px) {
  .container {
    max-width: calc(var(--max-width) - (250px - var(--max-width-pad)));
  }
}

@media screen and (max-width: 768px) {
  .container {
    max-width: calc(var(--max-width) - (580px - var(--max-width-pad)));
  }
}

@media screen and (max-width: 480px) {
  .container {
    max-width: calc(var(--max-width) - (780px - var(--max-width-pad)));
  }
}

@media screen and (max-width: 425px) {
  .container {
    max-width: calc(var(--max-width) - (815px - var(--max-width-pad)));
  }
}

@media screen and (max-width: 390px) {
  .container {
    max-width: calc(var(--max-width) - (865px - var(--max-width-pad)));
  }
}

@media screen and (max-width: 375px) {
  .container {
    max-width: calc(var(--max-width) - (875px - var(--max-width-pad)));
  }
}

@media screen and (max-width: 320px) {
  .container {
    max-width: calc(var(--max-width) - (920px - var(--max-width-pad)));
  }
}