@import url('https://fonts.googleapis.com/css2?family=Grechen+Fuemen&family=Lato:wght@100;400;700;900&display=swap'); *, *::before, *::after { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { background: #f5f5f5; font-size: 16px; color: #000; font-family: 'Lato', Helvetica, Arial, sans-serif; color: #333; margin: 0; padding: 0; } .hero-blade { display: flex; flex-direction: row; height: 75vh; min-height: 650px; } .hero-blade__left { width: 55%; background-image: url(https://p1-ofp.static.pub/ShareResource/ww/img/solutions/hybrid-cloud/hybrid-cloud-solutions-hero-banner-left-pattern.jpg); color: #fff; position: relative; background-size: cover; order: 1; } .hero-blade__left-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: left; width: 80%; } .hero-blade__left-content--title { margin: 0 auto; font: 900 2.5rem/2.75rem 'Lato', sans-serif; } .hero-blade__left-content--text { margin: 16px 0 0; font: 400 1.125rem/1.5rem 'Lato', sans-serif; } .hero-blade__left-content--icon { position: absolute; padding: 15px; } .hero-blade__left-content--icon img { height: clamp(60px, 7vw, 90px); } .hero-blade__left-content--icon.top-left { top: 0; left: 0; } .hero-blade__left-content--icon.top-right { top: 0; right: 0; } .hero-blade__left-content--icon.bottom-left { bottom: 0; left: 0; } .hero-blade__left-content--icon.bottom-right { bottom: 0; right: 0; } .hero-blade__left-content--buttons { margin-top: 20px; } .hero-blade__left-content--buttons a { display: inline-block; float: none; margin-right: 15px; border: 1px solid #fff; color: #fff  !important; padding: 15px; border-radius: 4px; text-transform: uppercase; font: 900 1rem/1.375rem 'Lato', sans-serif; text-align: center; letter-spacing: .8px; text-decoration: none; } .hero-blade__right { width: 45%; background: #fff; order: 2; } .hero-blade__right-image { width: 100%; height: 100%; object-fit: cover; object-position: right; } @media (min-width: 1201px) { .hero-blade__left-content--title { font-size: 3.75rem; line-height: 4rem; } .hero-blade__left-content--text { margin-top: 20px; } } @media (max-width: 1200px) { .hero-blade { height: 70vh; } .hero-blade__left-content--title { font-size: 2.75rem; line-height: 3rem; } .hero-blade__left-content--text { font-size: 1rem; line-height: 1.25rem; } .hero-blade__right-image { object-position: 75%; } } @media (max-width: 768px) { .hero-blade { flex-direction: column; height: auto; } .hero-blade__left { width: 100%; height: 60vh; order: 2; } .hero-blade__left-content { width: 100%; padding: 20px 30px; } .hero-blade__left-content--title { font-size: 2.5rem; line-height: 2.75rem; } .hero-blade__right { order: 1; width: 100%; height: 40vh; } .hero-blade__right-image { object-position: center 20%; } .hero-blade__left-content--buttons a { font-size: .9rem; line-height: .95rem; padding: 10px; font-weight: 700; } } @media (max-width: 500px) { .hero-blade__left-content--title { font-size: 2rem; line-height: 2.25rem; } .hero-blade__right { height: 35vh; } }