.hero { background: linear-gradient(#0f0f0f, #080808); position: relative; box-shadow: inset 0 -15px 7.5px -7.5px rgba(0,0,0,0.2); margin-top: -15px; } .hero > div { margin: 0 auto; max-width: 2000px; padding: 15px; position: relative; background-size: cover; background-position: center center; min-height: 400px; box-shadow: inset 0 -15px 7.5px -7.5px rgba(0,0,0,0.2); display: flex; flex-direction: row; align-items: center; justify-content: center; } .icon { margin-right: 20px; max-width: 300px; height: auto; display: block; } .content { max-width: 400px; left: 40%; right: 20%; padding-left: 20px; top: 80px; color: white; font-family: 'Cormorant Infant',serif; } .hero h2 { font-family: 'Cormorant SC',serif; font-size: 36px; } .hero p { opacity: .7; } @media (max-width: 650px) { .hero > div { flex-direction: column; } .icon { margin-right: 0; } .content { padding: 0; } }