.hero-page {
    flex: 1 1 auto;

    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    background-color: #0e121b;
    padding-top: 8rem;
    text-align: center;
    align-items: center;
    color: #93a9c8;
    overflow-y: auto;

    &__icon {
        border-radius: 100%;
        width: 6rem;
        height: 6rem;
        min-height: 6rem;
        background-color: #233043;
        display: flex;
        align-items: center;
        justify-content: center;

        .mdi-icon {
            fill: currentColor;
            width: 4rem;
            height: 4rem;
        }
    }

    &__title {
        font-size: 2em;
        margin-top: 1rem;
        line-height: 2.5rem;
    }

    &__subtitle {
        margin-top: 1rem;
    }

    &__cta {
        margin-top: 1rem;
    }
}

.theme-light {
    .hero-page {
        background-color: inherit;
        color: inherit;

        &__icon {
            background-color: $color-light-bg-4;
        }
    }
}