@use 'src/styles/framework' as *;

.page-empty {
  padding: 50px 40px 50px 124px;

  background-color: $white;
  background-image: url('~src/assets/img/icon-not-found.svg');
  background-position: 40px center;
  background-repeat: no-repeat;
  background-size: 55px auto;

  @include mobile {
    padding: 124px 40px 50px 40px;

    background-position: center 40px;
  }

  &__title {
    margin-bottom: $space-s;

    font-size: $font-size-xl;
    font-weight: $font-bold;
    color: $text-color;

    @include mobile {
      text-align: center;
    }
  }

  &__text {
    max-width: 80%;

    font-size: $font-size-m;
    line-height: 22px;
    color: $gray;

    @include mobile {
      text-align: center;
      max-width: initial;
    }
  }
}
