.error {
  @include size(100%, 100%);
  @include flex(column, nowrap, $whitespace-4, center, center);

  flex: 1;
  padding-inline: $whitespace-7;

  &__wrapper {
    @include flex(column, nowrap, $whitespace-8, center, center);

    max-inline-size: 50rem;
    text-align: center;
  }

  &__illustration {
    max-block-size: 25rem;
  }

  &__body {
    @include flex(column, nowrap, $whitespace-7, center, center);
  }

  &__heading {
    font-size: $font-size-8;
    font-weight: $font-weight-bold;
  }

  &__description-container {
    @include flex(column, nowrap, $whitespace-5, center, center);
  }

  &__message {
    font-size: $font-size-4;
    color: $color-neutral-7;
  }

  &__description {
    font-size: $font-size-5;
    line-height: 1.7;
    color: $color-neutral-8;
  }

  &__action-group {
    @include flex(row, nowrap, $whitespace-4, center, space-between);

    flex: 1;
    inline-size: 100%;
  }
}