sass/layout.scss

.widthWrapper {
  padding-left: $side-padding;
  padding-right: $side-padding;
  position: relative;
}

.flexWrapper {
  padding-bottom: 50px;
  padding-top: 50px;
}

.mainContainer {
  background: $footer-bg;
  box-sizing: border-box;
  height: 100%;
  padding-top: 62px;

  & > div {
    background: white;
    overflow: auto;
  }
}

.mainWrapper {
  max-width: $default-max-width;
}

.guideListWrapper {
  margin-bottom: 50px;
  padding-bottom: 50px;
}

.notFoundMessage {
  text-align: center;
}

.notFoundErrorPage {
  text-align: center;

  .pageTitle {
    display: none;
  }

  .mainWrapper {
    margin: 0 auto;
  }
}

@media only screen and (max-width: 1020px) {
  body {
    display: flex;
    flex-flow: column wrap;
  }

  .mainContainer {
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }

  .widthWrapper {
    padding-left: $side-padding-mob;
    padding-right: $side-padding-mob;
  }
}

@media only screen and (min-width: $large-screen-cutoff) {
  .mainWrapper {
    max-width: $large-screen-max-width;
  }
}