anephenix/ui

#hero {
    margin-top: 60px;

    #heading-and-lead {
        margin-bottom: 200px;
    }

    h1 {
        margin-top: 240px;
        font-size: 64px;
        line-height: 1em;
    }

    p {
        font-size: 18px;
        font-weight: 400;
        margin-bottom: 32px;
    }

    @media screen and (max-width: 480px) {
        margin-top: 20vh;

        #heading-and-lead {
            margin-bottom: 20vh;
            text-align: center;
        }

        h1 {
            margin-top: 0vh;
            font-size: 40px;
            line-height: 1.1em;
        }

        p {
            font-size: 16px;
            margin-bottom: 10vh;
        }
    }
}

#hero-ctas {
    display: flex;
    width: 300px;
    justify-content: space-between;

    @media screen and (max-width: 480px) {
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .button {
            text-align: center;
            margin: 4px 0px;
            width: 80%;
        }
    }
}