body.x404 {
  .content {
    margin: 0 auto;
    max-width: 100%;
  }
}

.error {
  @include break;
  width: 100%;
  height: 120vw;
  background: #8283ed;
  text-align: center;
  padding-top: 65px;

  @include breakpoint(550px) {
    height: 685px;
    padding-top: 65px;
  }

  @include breakpoint($break-tablet) {
    height: 720px;
    padding-top: 105px;
  }

  .error-container {
    @include container;
    @include break;
    text-align: center;
    width: 90vw;
    height: 98vw;
    background-image: url('/img/assets/404_illustration.svg');
    background-size: cover;

    h2 {
      color: #ff857c;
      font-size: 11vw;
      padding: 0 10px;
    }

    p {
      color: #fff;
      font-weight: 400;
      line-height: 3.5vw;
      font-size: 3vw;
      padding: 0 10px;
    }

    @include breakpoint(550px) {
      width: 520px;
      height: 569px;

      h2 {
        font-size: 70px;
        padding: 0 10px;
      }

      p {
        font-weight: 400;
        line-height: 23px;
        font-size: 16px;
        padding: 0 10px;
      }
    }

    a {
      color: #fff;
      text-decoration: underline;

      &:hover {
        color: #ddd;
      }
    }
  }
}
