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

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

.grid-wrapper.grid-wrapper-bottom {
	margin: 0 auto;
	padding: 0 50px 50px;
}
    
.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, .5);
	color: #ffffff;
    width: 100%;    
}

.grid-content h2 {
	color: #ffffff;
	font-size: 20px;
	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:first-child .grid-content {
	bottom: 0;
    position: absolute;  
}

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

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

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

.grid-wrapper-bottom {
    grid-template-columns: repeat(3, 1fr);
}

.grid-wrapper-bottom .grid-item:nth-child(1) {
    grid-column: 1;
}

.grid-wrapper-bottom .grid-item:nth-child(2) {
    grid-column: 2;
}

.grid-wrapper-bottom .grid-item:nth-child(3) {
    grid-column: 3;
}

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

/*Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
	.grid-wrapper-bottom .grid-item:nth-child(1) .grid-content,
	.grid-wrapper-bottom .grid-item:nth-child(2) .grid-content,
	.grid-wrapper-bottom .grid-item:nth-child(3) .grid-content
	{
		height: 100%;
		text-align: center;
	}
	
	.grid-wrapper-bottom .grid-item:nth-child(1) .grid-content h2,
	.grid-wrapper-bottom .grid-item:nth-child(2) .grid-content h2,
	.grid-wrapper-bottom .grid-item:nth-child(3) .grid-content h2
	{
	  position: absolute;
	  top: 50%;
	  transform: translateY(-50%);
	}
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
	.grid-wrapper-top {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.grid-content h2 {
	  padding: 30px 20px;
	}
	
	.grid-wrapper-top .grid-item:last-child .grid-content {
		bottom: 0;
		position: absolute;
	}
	
	.grid-wrapper-top .grid-item:first-child .grid-content h2 {
	  font-size: 20px;
	}
}

@media (max-width: 900px) {
	.grid-wrapper {
		margin-bottom: 10px;
	}
	
	.grid-wrapper-top {
		grid-template-columns: 100%;
		grid-column-gap: 0;
		grid-row-gap: 10px;
	}
	
	.grid-wrapper-top .grid-item:first-child {
		grid-column: unset;
	  	grid-row: 1;
	}
	
	.grid-wrapper-top .grid-item:last-child {
		grid-column: unset;
	  	grid-row: 2;
		place-self: unset;
	}	
	
	.grid-wrapper-bottom {
		grid-column-gap: 10px;
		grid-row-gap: 10px;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, auto);
	}
	
	.grid-wrapper-bottom .grid-item:nth-child(1) {
	  grid-column: 1/span 2;
	  grid-row: 1;
	}
	
	.grid-wrapper-bottom .grid-item:nth-child(2) {
	  grid-column: 1;
	  grid-row: 2;
	}
	
	.grid-wrapper-bottom .grid-item:nth-child(3) {
	  grid-column: 2;
	  grid-row: 2;
	}
	
	.grid-wrapper-bottom .grid-item:nth-child(1) .grid-content
	{
		height: unset;
		text-align: left;
	}
	
	.grid-wrapper-bottom .grid-item:nth-child(1) .grid-content h2 {
	  	position: unset;
		transform: translateY(0);
	}
}

/* Extra small devices (portrait phones, less than 767px)*/
@media (max-width: 767.98px) {
	.grid-wrapper.grid-wrapper-top {
		padding: 40px 30px 0;
	}

	.grid-wrapper.grid-wrapper-bottom {
		padding: 0 30px 40px;
	}
	
	.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-wrapper-top .grid-item:nth-child(1) .grid-content,
	.grid-wrapper-top .grid-item:nth-child(2) .grid-content,
	.grid-wrapper-bottom .grid-item:nth-child(1) .grid-content
	{
        top: 50%;
        left: 50%;
        height: 100%;
		text-align: center;
        transform: translateX(-50%) translateY(-50%);
    }

	.grid-wrapper-top .grid-item:nth-child(1) .grid-content h2,
	.grid-wrapper-top .grid-item:nth-child(2) .grid-content h2,
    .grid-wrapper-bottom .grid-item:nth-child(1) .grid-content h2,
	.grid-content h2 {
		font-size: 22px;
        position: absolute;
		text-align: center;
        top: 50%;
        transform: translateY(-50%);
		width: 100%;
    }
	
}

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
	.grid-wrapper.grid-wrapper-top {
	  padding: 40px 15px 0;
	}
	
	.grid-wrapper.grid-wrapper-bottom {
		padding: 0 15px 40px;
	}
	
	.grid-wrapper-top {
		grid-template-columns: 100%;
	}
	
	.grid-wrapper-bottom {
		grid-template-columns: 100%;
	}
	
	.grid-wrapper-top .grid-item:nth-child(1) .grid-content h2,
	.grid-wrapper-top .grid-item:nth-child(2) .grid-content h2,
    .grid-wrapper-bottom .grid-item:nth-child(1) .grid-content h2,
	.grid-content h2 {
		font-size: 20px;
    }	
}