@import '~@angular/material/theming';
@import '../../../theme';

$header-breakpoint: 503px;

header {
    background: mat-color(map-get($efd-app-theme, primary));
    color: rgba(255, 255, 255, 0.87);
    height: 300px;
    box-sizing: border-box;
    margin-bottom: 30px;
    padding: 60px 0 0;
    text-align: center;

    @media (max-width: $header-breakpoint) {
        padding-top: 8px;
    }

    h1 {
        font-size: 56px;
        font-weight: 300;
        line-height: 56px;
        margin: 15px 0 15px 0;

        @media (max-width: $header-breakpoint) {
            margin-top: 0;
        }
    }

    h2 {
        font-size: 18px;
        font-weight: 300;
        line-height: 28px;
        margin: 15px 0 25px 0;
    }

    a {
        margin-top: 36px;

        @media (max-width: $header-breakpoint) {
            margin-top: 16px;
        }
    }
}

main {
    min-height: 300px;

    article {
        margin: 0 16px;

        .rows {
            overflow: hidden;
            color: rgba(0, 0, 0, 0.87);

            .row {
                max-width: 920px;
                margin: 32px auto;
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;

                @media (max-width: 952px) {
                    margin: 16px;
                }

                .text-container {
                    max-width: 450px;
                    margin: auto;

                    h2 {
                        font-size: 25px;
                        font-weight: 400;
                        margin: 0 0 16px 0;
                        padding: 0;
                    }

                    p {
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 28px;
                        margin: 0 0 24px 0;
                        padding: 0;
                    }

                }
            }
        }
    }
}
