:root {
    --color-primary-500: #8c0a0a;
    --color-primary-400: #a91515;
    --color-primary-300: #c05757;
    --color-primary-200: #f18b8b;

    --color-primary-400-transparent: #a915156e;

    --color-grey-100: #fbfbfb;
    --color-grey-300: #d9d9d9;
    --color-grey-400: #afafaf;

    --color-beige-100: #f7f5f0;

    --color-grey-300-transparent: #b3b3b394;

    --color-text: #333;
    --border-radius-regular: 6px;
}

a {
    text-decoration: none;
}

.page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.page-header {
    min-height: 400px;
    height: 400px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

    &:after {
        position: absolute;
        width: 100%;
        height: 100%;
        content: '';
        display: block;
        background: #82828236;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .page-titles {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;

        .page-title, .page-subtitle {
            text-align: center;
        }

        .page-title {
            color: white;
            font-size: 7em;
            padding: 0 1em;
            white-space: normal;
            margin: 0;
            text-align: center;
            background-color: var(--color-primary-400-transparent);
            font-family: Times New Roman, serif;
        }

        .page-subtitle {
            color: white;
            font-size: 3em;
            white-space: normal;
            margin: 0;
            text-align: center;
            background-color: var(--color-grey-300-transparent);
            font-weight: 400;
        }
    }
}