@media only screen and (max-width: 1080px) {
  main section .padding-left {
    padding-left: 15%;
  }
  
  main section .padding-right {
    padding-right: 15%;
  }

  header nav ul li.hide-mobile {
    display: none;
  }
}

@media only screen and (max-width: 880px) {
  main section.hero {
    display: inline-block;
  }

  main section.hero .body,
  main section.hero figure {
    width: auto;
    margin-right: 0;
  }

  main section .padding-left {
    padding-left: 10%;
  }
  
  main section .padding-right {
    padding-right: 10%;
  }
}

@media only screen and (max-width: 680px) {
  main section.hero .body h1 {
    font-size: 32px;
    line-height: 42px;
  }

  main section.hero .body h2 {
    font-size: 18px;
    line-height: 28px;
  }

  main section > h2,
  main section > div > h2 {
    font-size: 24px;
    line-height: 34px;
  }

  main section > h3,
  main section > div > h3 {
    font-size: 18px;
    line-height: 28px;
  }

  main section .padding-left {
    padding-left: 0;
  }
  
  main section .padding-right {
    padding-right: 0;
  }
}

@media only screen and (max-width: 480px) {
  main article {
    padding: 25px;
  }

  main section {
    padding: 25px;
  }
  
  main section.hero .body .buttons > * {
    display: flex;
    margin-right: auto;
  }

  main section.hero .body .buttons a.button {
    display: block;
  }
}