div.hero {
    padding-top: var(--global-banner-height);
    background-color: var(--colour-primary);
    color: var(--colour-primary-compliment);
    box-shadow: var(--default-shadow);
    position: relative;
    min-height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    
    div.head {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 44px;

        p.title {
            margin-top: 0;
            padding-top: 44px;
            font-size: 3.5rem;

            @media (max-width: 768px) {
                font-size: 3rem;
            }

            span {
                display: block;
            }
        }

        hr {
            width: 280px;
            margin: 22px;
            height: 4px;
            background-color: white;
            margin-left: auto;
            margin-right: auto;
        }

        p.subtitle {
            font-size: 2rem;
        }
    }

    div.foot {
        margin-bottom: 120px;
        p {
            margin-top: 22px;
            padding-left: 22px;
            padding-right: 22px;
        }
    }

    a.button {
        position: absolute;
        bottom: -70px;
        left: calc(50% - 80px)
    }
}

div.section.intro > div.wrapper {
    margin-top: 66px;
    margin-bottom: 66px;

    display: flex;
    justify-content: space-between;
    gap: 22px;

    div.content {
        max-width: 800px;
        
        .title {
            font-size: 2rem;
        }    
    }

    @media (max-width: 768px) {
        flex-wrap: wrap;

        div.content {
            width: 100%;
        }
    }

    a.button {
        margin-top: 44px;
    }
}