.hero { min-height: 100vh; max-width: 1800px; margin: 0 auto; display: flex; flex-direction: column; background-color: #ff4754; color: whitesmoke; > .body { flex-grow: 1; } .heroText { display: flex; justify-content: center; align-items: center; padding: 1rem; } .primary { max-width: 560px; h2 { font-size: 34px; font-weight: 700; } h3 { font-size: 34px; font-weight: 300; margin: 0; } } h4 { padding: 5px 0; } .signup { display: flex; margin-top: 2em; border-radius: 4px; background: rgba(0, 0, 0, 0.2); input { flex-grow: 1; padding: 10px; } button { flex: 0 1; padding: 10px; background: rgba(0, 0, 0, 0.1); white-space: nowrap; } } .heroFix { min-height: 128px; } .link { display: block; margin-top: 4em; color: white; text-decoration: none; span { font-weight: 400; border-bottom: 2px solid white; } } .heroImage { display: flex; align-items: center; justify-content: center; .container { background: url('/concept_outer.svg'); background-repeat: no-repeat; animation-name: outer; animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); animation-iteration-count: infinite; animation-duration: 5s; img { position: relative; left: -15px; top: 10px; animation-name: inner; animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); animation-iteration-count: infinite; animation-duration: 5s; } } } } @keyframes outer { 0% { transform: translateY(0px) }; 50% { transform: translateY(14px) }; 100% { transform: translateY(0px) }; } @keyframes inner { 0% { transform: translateY(0px) }; 50% { transform: translateY(4px) }; 100% { transform: translateY(0px) }; } // will be moved to its own component .nav { width: 100%; min-height: 128px; padding: 40px; flex: 0 1; display: flex; .logo { height: 38px; } } @media (max-width: 1240px) { .hero > .body { flex-direction: column-reverse; } .heroImage { margin-bottom: 2em; } } @media (max-width: 720px) { .heroImage { transform: scale(0.8); } .nav { justify-content: center; } } @media (max-width: 640px) { .heroImage { transform: scale(0.7); } }