html,
body {
  width: 100%;
  max-width: none;
  margin: 0;
  overflow-x: hidden;
}

body > header,
body > main,
body > footer,
.header,
.hero,
.section,
.contact,
.footer {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 701px) {
  .hero {
    background-position: center;
    background-size: cover;
  }
}