.front-flex {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;

    .hero {
        display: flex;
        background-color: rgba(255, 255, 255, 0.1);
        padding: 1rem;
    }

    .third {
        flex: 1 0 30%;
        padding: 0.5rem;
        min-width: 300px;
    }

    .small {
        flex: 1 0 38%;
        padding: 0.5rem;
        min-width: 300px;
    }

    .large {
        flex: 1 0 61%;
        padding: 0.5rem;
        min-width: 300px;
    }

    .odd {
        background-color: rgba(255, 255, 255, 0.05);
    }
}

@media only screen and (max-width: 960px) {
    .front-flex {
         display: block;

        div, .hero, .hero div {
            display: inline-block;
            width: 100%;
        }
    }
}