@import '../../../styles/variables';
@import '../../../styles/mixins';

.ErrorPage {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 70px;
    padding: 0 50px;
    text-align: center;

    &__image {
        width: 230px;
        height: 230px;
        margin-bottom: 40px;

        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;

        //The images for error page are supposed to be installed via overriding "background-image" variable
        &_code {
            &_403 {
                background-image: var(--dc-error-image-403);
            }

            &_404 {
                background-image: var(--dc-error-image-404);
            }

            &_500 {
                background-image: var(--dc-error-image-500);
            }
        }
    }

    &__code {
        margin-bottom: 10px;
    }

    &__title {
        @include heading3();

        max-width: 800px;
        margin-bottom: 20px;
    }

    &__description {
        display: flex;
        flex-direction: column;
        gap: 10px;

        max-width: 600px;

        &-link {
            width: 100%;
            max-width: 200px;
        }
    }

    a {
        @include link();
    }

    .mobile & {
        margin-top: 40px;
        padding: 0 20px;
    }
}