.grid-wrapper {
    display: grid;
	grid-column-gap: 16px;
    position: relative;   
}

.grid-wrapper.grid-wrapper-top {
	margin: 0 auto 16px;
	padding: 50px 50px 0;
}

.grid-wrapper.grid-wrapper-bottom {
	margin: 0 auto;
	padding: 0 50px 50px;
}

.grid-wrapper.grid-wrapper-top.flip {
	margin: 0 auto;
	padding: 0 50px 50px;
}

.grid-wrapper.grid-wrapper-bottom.flip {
	margin: 0 auto 16px;
	padding: 50px 50px 0;
}

.grid-image {
    height: 100%;
}

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

.grid-item {
    position: relative;
}

.grid-content {
	background-color: rgba(59, 59, 58, .65);
	bottom: 0;
	color: #ffffff;
	position: absolute;
    width: 100%;
 }  
   

.grid-content h2 {
	color: #ffffff;
	margin: 0;
    padding: 45px 30px;    
}

.grid-wrapper-top {
    grid-template-columns: 60% 39%;
}

.grid-wrapper-top .grid-item:first-child {
    grid-column: 1;
}

.grid-wrapper-top .grid-item:last-child {
    grid-column: 2;
    place-self: center;
}

.grid-wrapper-top .grid-item:last-child .grid-content,
.grid-wrapper-bottom .grid-item:first-child .grid-content {
   background-color: rgba(59, 59, 58, .5);
}

.grid-wrapper-top .grid-item:first-child .grid-content,
.grid-wrapper-bottom .grid-item:last-child .grid-content  {
	bottom: 0;
    position: absolute;  
}

.grid-wrapper-top .grid-item:first-child .grid-content h2,
.grid-wrapper-bottom .grid-item:last-child .grid-content h2 {
    font-size: 26px;
}

.grid-wrapper-top .grid-item:last-child .grid-content h2,
.grid-wrapper-bottom .grid-item:first-child .grid-content h2 {
    font-size: 20px;
}

.grid-wrapper-bottom {
    grid-template-columns: 39% 60%;
}

.grid-wrapper-bottom .grid-item:first-child {
    grid-column: 1;
    place-self: center;
}

.grid-wrapper-bottom .grid-item:last-child {
    grid-column: 2;
}

/* Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
	.grid-bottom {
		margin-bottom: 70px;
	}
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
	.grid-bottom {
		margin-bottom: 50px;
	}
	
	.grid-wrapper {
		grid-column-gap: 10px;
		margin-bottom: 10px;
	}	
	
	.grid-wrapper-top .grid-item:last-child,
	.grid-wrapper-bottom .grid-item:first-child {
		place-self: unset;
	}
	
	.grid-wrapper-top .grid-item:last-child .grid-content,
	.grid-wrapper-bottom .grid-item:first-child .grid-content {
		bottom: 0;
	   	position: absolute;
	}
	
	.grid-content h2 {
	  	padding: 30px 20px;
	}
	
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
	.grid-wrapper.grid-wrapper-top {
	  	padding: 40px 30px 0;
	}
	
	.grid-wrapper.grid-wrapper-bottom {
	  	padding: 0 30px 40px;
	}
	
	.grid-wrapper.grid-wrapper-top.flip {
		margin: 0 auto;
		padding: 0 30px 40px;
	}

	.grid-wrapper.grid-wrapper-bottom.flip {
		margin: 0 auto 16px;
		padding: 40px 30px 0;
	}
		
	.grid-wrapper-top .grid-item:first-child .grid-content h2, 
	.grid-wrapper-bottom .grid-item:last-child .grid-content h2 {
	  font-size: 22px;
	}
	
	.grid-wrapper-top .grid-item:last-child .grid-content, 
	.grid-wrapper-bottom .grid-item:first-child .grid-content {
		height: 100%;
		left: 50%;
	  	position: absolute;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
	}
	
	.grid-wrapper-top .grid-item:last-child .grid-content h2, 
	.grid-wrapper-bottom .grid-item:first-child .grid-content h2 {
	  	position: absolute;
		bottom: 0;
	}
	
	.grid-content h2 {
	  padding: 20px 15px;
	}
}

@media (max-width: 650px) {
	.grid-wrapper {
        display: flex;
        flex-wrap: wrap;
    }

    .grid-item {
        margin-bottom: 10px;
    }
	
	.grid-wrapper-top .grid-item:last-child {
        margin-bottom: 0;
    }

    .grid-content {
        top: 50%;
        left: 50%;
        height: 100%;
        transform: translateX(-50%) translateY(-50%);
    }

    .grid-content h2 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 90%;
    }

    .grid-item:nth-child(1) .grid-content h2 {
        font-size: 22px;
	}
		
	.grid-wrapper-top .grid-item:last-child .grid-content, 
	.grid-wrapper-bottom .grid-item:first-child .grid-content,
	.grid-wrapper-top .grid-item:last-child .grid-content h2, 
	.grid-wrapper-bottom .grid-item:first-child .grid-content h2 {
	    bottom: unset;
	}
	
	.grid-content {
		text-align: center;
	}
	
	.grid-wrapper-top .grid-item:first-child .grid-content h2, 
	.grid-wrapper-top .grid-item:last-child .grid-content h2, 
	.grid-wrapper-bottom .grid-item:first-child .grid-content h2
	.grid-wrapper-bottom .grid-item:last-child .grid-content h2 {
		align-items: center;
		display: flex;
	  	font-size: 22px;
		justify-content: center;
		text-align: center;
	}
	
}

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
	.grid-wrapper.grid-wrapper-top {
	  	padding: 40px 15px 0;
	}
	
	.grid-wrapper-mobile.grid-wrapper-top {
		margin: 0 auto 10px;
	}
	
	.grid-wrapper.grid-wrapper-bottom {
	  	padding: 0 15px 40px;
	}
	
	.grid-wrapper.grid-wrapper-top.flip {
		padding: 0 15px 40px;
	}

	.grid-wrapper.grid-wrapper-bottom.flip {
		padding: 40px 15px 0;
	}
	
	.grid-wrapper-top .grid-item:first-child .grid-content h2, 
	.grid-wrapper-top .grid-item:last-child .grid-content h2, 
	.grid-wrapper-bottom .grid-item:first-child .grid-content h2
	.grid-wrapper-bottom .grid-item:last-child .grid-content h2 {
	  	font-size: 20px;
	}
}