@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: 0.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: 0.9rem;
		line-height: 0.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;
	}
}