@media screen and (max-aspect-ratio: 7/3) {
  /* Footer */

  .footer > img {
    max-height: 2vw;
  }
}



@media screen and (max-aspect-ratio: 4/3) {
  body:before {
    bottom: 0;
    background-position: center bottom;
  }

  /* Main */

  .main {
    padding-top: -webkit-calc(125vh - 100%);
    padding-top: -moz-calc(125vh - 100%);
    padding-top: calc(125vh - 100%);
  }

  /* Footer */

  .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}



@media screen and (max-aspect-ratio: 3/3) {
  body {
    font-size: 2vw;
  }

  body:before {
    top: 0vw;
    bottom: 0;
    -webkit-background-size: 200% 200%;
    -moz-background-size: 200%;
    background-size: 200%;
    background-position: top center;
  }

  /* Header */

  .header {
    height: 15vw;
    padding-top: 5vw;
    padding-bottom: 2vw;
  }

  .logo {
    padding-left: 7vw;
  }

  .header .logo img {
    height: 11vw;
  }

  /* Main */

  .main {
    padding-top: -webkit-calc(60vh - 100%);
    padding-top: -moz-calc(60vh - 100%);
    padding-top: calc(60vh - 100%);
  }

  .main__title {
    font-size: 4em;
  }

  .main__button {
    margin-bottom: 60vw;
  }

  /* Footer */

  .footer {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
  }

  .footer > img {
    max-width: 15%;
    max-height: 100%;
  }
}



@media screen and (max-aspect-ratio: 2/3) {
  body:before {
    bottom: 10%;
    background-position: bottom center;
  }

  /* Main */

  .main__button {
    margin-bottom: 60vw;
  }

  /* Footer */

  .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}