body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.hero {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 1em;
    /* margin-bottom: 6.5em; text doesn't overflow behind footer */
}

.hero .container .hero-content .hero-heading {
    font-size: 2em;
}

.hero .container .hero-content .paragraph-container {
    max-width: 1110px;
    margin: 0 auto;
    padding: 0em 2em;
    /* padding: 0 14em; */
}

.hero .container .hero-content .paragraph-container p {
    font-size: 1.5em;
    margin-top: 1em;
    line-height: 1.6em;
    color: #636363
}

footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: auto;
    flex-grow: 0;
}

@media (max-width: 860px) {
    .hero .container .hero-content .text-button-wrapper .paragraph-container p {
        margin-top: 0em;
        text-align: left;
    }
}