#hero-section {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
}

/* desktop view */
@media (min-width: 1024px) {
    #hero-section {
        flex-direction: row;
    }

        #hero-section #hero-left {
            flex-basis: 50%;
        }

        #hero-section #hero-right {
            flex-basis: 50%;
        }
}

/* tablet view */
@media (min-width: 768px) and (max-width: 1023px) {
}

/* mobile view */
@media (max-width: 767px) {
}