Responsive grid with CSS Grids

Responsive grid with CSS Grids

HTML

<section class="section-page">
			<div class="block-bg row-bg">
				<div class="col-bg col-bg-7 bg-style-1"></div>
				<div class="col-bg col-bg-5 bg-style-4"></div>
			</div>
			
    		<div class="section-content">
				<div class="container">
					<div class="row-page">
						<div class="col col-7">
	    					<div class="content-page-block">
	    						<div class="content-page-block-wrap">
									
									<div class="text-page-block">
										Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum placeat voluptate quo expedita reprehenderit aliquam rerum cumque, labore! Illo quis placeat accusamus natus aliquam rerum labore, impedit exercitationem atque in.
									</div>
									
								</div>
							</div>
						</div>
						<div class="col col-5">
							<div class="content-page-block">
	    						<div class="content-page-block-wrap">
									
									<div class="text-page-block">
										Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum placeat voluptate quo expedita reprehenderit aliquam rerum cumque, labore! Illo quis placeat accusamus natus aliquam rerum labore, impedit exercitationem atque in.
									</div>
									
								</div>
							</div>
						</div>
					</div>
					
				</div>
			</div>
		</section>

CSS

.bg-style-1{
	background-color: #AB2323;
}
.bg-style-2{
	background-color: #2E37A5;
}
.bg-style-3{
	background-color: #F4A100;
}
.bg-style-4{
	background-color: #292930;
}
body {
	font-family: sans-serif;
	font-size: 14px;
	min-width: 320px;
	position: relative;
	line-height: 1.5;
	font-family: 'Montserrat', sans-serif;
	overflow-x: hidden;
	margin: 0;
	font-weight: 600;
	color: #fff;
	background-color: #F4F4F4;
}
.container {
    margin: 0 auto;
    position: relative;
    padding: 0 40px;
    width: 100%;
    max-width: 1360px;
}
.wrapper{
	overflow: hidden;
}
.row-page {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.col{
  position: relative;
  min-height: 1px;
}
.col-5 {
    width: 41.8%;
}
.col-7 {
    width: 58.2%;
    

}
.section-main-slider, .section-page {
    height: 100vh;
    position: relative;
}
.block-bg {
    height: 100%;
    width: 100%;
}
.col-bg {
    height: 100%;
}
.col-bg-7 {
    width: 55.5%;
}
.col-bg-5 {
    width: 44.5%;
}
.row-bg {
    display: flex;
    flex-wrap: wrap;
}
.section-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}