.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    position: relative;
}

.grid-image img {
    height: 100%;
    object-fit: cover;
	width: 100%;
}

.grid-image {
    grid-column: 1/span 2;
    grid-row: 1/span 3;
}

.grid-content {
	background-color: rgba(59, 59, 58, .5);
	color: #ffffff;
    grid-column: 2/span 3;
    grid-row: 3;
	min-width: calc(100% - 50px);
	padding: 100px 150px;
    position: absolute; 
	transform: translateY(-30%);
}

.grid-content h2 {
	color: #ffffff;
    font-size: 26px;
    margin: 0;
}

@media (max-width: 1570px) {
	.grid-content {
		padding: 80px 90px;
	}	
	
}

@media (max-width: 1400px) {
	.grid-content {
		padding: 60px 50px;
		transform: translateY(-20%);
	}	
	
}

/* Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
	.grid-wrapper {
		grid-template-rows: repeat(2, 1fr);
	}	
	
	.grid-content {
		bottom: 50px;
		grid-row: 1;
		padding: 50px 40px;	
	}
}

/* Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
	.grid-content {
	  	padding: 30px 20px;
		transform: translateY(-20%);
	}
	
	.grid-content h2 {
		font-size: 23px;
	}
}

@media (max-width: 847px) {
	.grid-content {
	  	padding: 30px 20px;
		transform: translateX(-50px) translateY(-20%);
	}
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
	.grid-wrapper {
		grid-template-columns: repeat(1, auto);
		grid-template-rows: repeat(1, auto);
	}
	
	.grid-image {
		grid-column: 1;
		grid-row: 1;
	}
	
	.grid-content {
		grid-column: 1;
		grid-row: 1;
		height: 100%;
		margin: 0;
		max-width: unset;
		padding: 20px 15px;
		position: unset;
		transform: unset;
		width: 100%;  
	}

	.grid-content h2 {
		left: 50%;
		padding: 30px 20px;
		position: absolute;
		text-align: center;
		top: 50%;
        transform: translateX(-50%) translateY(-50%);
		width: 90%;
	}
}

@media (max-width: 650px) {
	.grid-content h2 {
		font-size: 22px;
	}
}

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
	.grid-wrapper-mobile {
		display: grid !important;
	}
	
	.grid-content h2 {
		font-size: 20px;
	}
}