<div class="section" id="section-hero">

	<div class="section__media">
		<img src="https://cdn.onlinewebfonts.com/svg/img_223696.svg" alt="">
	</div>

	<div class="section__pad">
		<div class="section__center">
			<div class="section__contents">

				<div id="hero">
					<div class="grid grid--2">
						<div class="grid__cell grid__cell--6">
							<div class="f-container f-container--v">
								<div>
									<h1>Title</h1>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, officia esse temporibus?</p>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</div>
html,
body {
	padding: 0;
	margin: 0;
	background-color: #fff;
	font-family: monospace;
	font-size: 18px;
	line-height: 1.4;
	color: #333;
}

* {
	box-sizing: border-box;
}

.section {
	position: relative;
	overflow: hidden;

	&__media {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 40%;
		width: 100%;

		img {
			width: 100%;
			height: 100%;
			object-fit: contain;
			object-position: 50% center;
			opacity: .2;
		}
	}

	&__pad {
		width: 100%;
		height: 100%;
		padding: 80px 20px;
		position: relative;
		z-index: 1;
	}

	&__center {
		width: 100%;
		height: 100%;
		max-width: 1200px;
		margin: 0 auto;
	}

	&__contents {
		width: 100%;
		height: 100%;
	}
}

#section-hero {
	height: 100vh;
	min-height: 680px;
	background-color: #eee;
}

.grid {
	width: 100%;
	height: 100%;
	display: grid;
	grid-gap: 40px;
	grid-template-columns: repeat(12, 1fr);

	&__cell {
		&--6 {
			grid-column-end: span 6;
		}
	}
}

.f-container {
	width: 100%;
	height: 100%;
	display: flex;

	&--v {
		align-items: center;
	}

	&--h {
		justify-content: center;
	}
}

#hero {
	width: 100%;
	height: 100%;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js