Header.scss

@use 'App';

header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 0.5rem;

    .headline-container {
        position: relative;
        display: flex;
        flex-direction: column;

        .stroke-underline {
            // noinspection Stylelint
            @extend .stroke-common;

            left: 100%;
            opacity: 1;
            translate: -100% 300%;
            bottom: 0;
            height: 10%;
            position: absolute;
            transform: translateX(0);
        }
    }

    h3 {
        margin-top: 1.5rem;
        margin-bottom: 0.4rem;
    }
}

@media (width <= 650px), (height <= 650px) {
    header {
        h1 {
            margin-top: 3.0rem;
        }

        h3 {
            margin-top: 2rem;
            margin-bottom: 1rem;
            line-height: 1.3em;
            font-size: 1.1rem;
            width: 90%;
        }
    }
}