@layer components {
  .error-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  @media (width >= 640px) {
    .error-page {
      padding-block: var(--space-8);
    }
  }

  .error-page__image {
    order: 2;

    & svg, & img {
      inline-size: 100%;
    }
  }

  .error-page__title {
    padding-block: var(--space-6);
    text-align: center;
    order: 3;
  }

  .error-page__subtitle {
    padding-block: var(--space-6);
    text-align: center;
    order: 1;
  }
}