body {
  min-width: 300px;
}

header {
  margin: 0;
  padding: 0;
}

footer {
  margin: 0;
  padding: 0 $gutter;
}

main {
  margin: 0 $gutter;
  padding: 0;
}

section {
  margin: ($gutter * 2) 0;

  &:nth-of-type(even) {
    margin-right: -$gutter;
    margin-left: -$gutter;
    background-color: $light-grey;
    padding: $gutter;
  }
}

@media screen and (min-width: 426px) {
  main {
    margin: 0 auto;
    width: 100%;
  }

  footer,
  section {
    padding: $gutter calc((100% - 425px) / 2);

    &:nth-of-type(even) {
      padding: $gutter calc(((100% - 425px) / 2) + #{$gutter});
    }
  }
}

@media screen and (min-width: 768px) {
  footer,
  main {
    width: calc(100% * 0.809);
    max-width: 860px;
  }

  footer {
    margin: 0 auto;
    padding: 0;
  }

  section {
    margin: ($gutter * 4) 0;
    padding: $gutter 0;
    width: auto;

    &:nth-of-type(even) {
      margin-right: calc(-100% * 0.809 / 2);
      margin-left: calc(-100% * 0.809 / 2);
      padding: ($gutter * 2) calc(100% * 0.809 / 2);
    }
  }

}