@media (min-width: 1440px) {
  body {
    background-size: cover;
  }
}


@media (max-width: 1366px) {
  body {
    background-size: cover;
  }
  footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}


@media (max-width: 1024px) {
  .header {
    margin-bottom: 8em;
  }
}


@media (max-width: 768px) {
  .header {
    margin-bottom: 4em;
  }
  .main__title > span {
    font-size: 0.82em;
  }
  .main__button {
    margin: 4vw 0 9vw 0;
  }
}


@media (max-width: 420px) {
  .header {
    justify-content: space-between;
    height: 17vw;
    padding-top: 5vw;
    padding-bottom: 2vw;
    margin-bottom: 10em;
  }
}


@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;
  }

  .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;
  }

  .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;
  }
}