.grid-wrapper {
    display: grid;
	grid-gap: 16px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.grid-item:nth-child(1) {
    grid-column: 1/span 2;
    grid-row: 1/span 2;
}

.grid-item:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
}

.grid-item:nth-child(3) {
    grid-column: 3;
    grid-row: 2;
}

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

.grid-item {
    position: relative;
}

.grid-image {
    height: 100%;
}

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

.grid-item h2 {
	color: #ffffff;
    font-size: 20px;
    padding: 25px 15px;
}

.grid-item:nth-child(1) .grid-content h2 {
    padding: 45px 30px;
    font-size: 26px;
}

/* Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {	
	.grid-item:nth-child(2) .grid-content,
	.grid-item:nth-child(3) .grid-content
	{
		height: 100%;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
	}	
	
	.grid-item:nth-child(2) .grid-content h2,
	.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 {
    	grid-gap: 10px;
	}	
	
	.grid-content h2 {
	  	padding: 30px 20px;
	}	
}


@media (max-width: 900px) {
	.grid-wrapper {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, auto);
	}	
	
	.grid-item:nth-child(1) {
	  grid-column: 1/span 2;
	  grid-row: 1;
	}
	
	.grid-item:nth-child(2) {
	  grid-column: 1;
	  grid-row: 2;
	}
	
	.grid-item:nth-child(3) {
	  grid-column: 2;
	  grid-row: 2;
	}
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {	
	.grid-wrapper {
	  grid-gap: 10px;
	}	
	
	.grid-content h2 {
	  padding: 20px 15px;
	}
	
	.grid-item:nth-child(1) .grid-content h2 {
	 font-size: 24px;	
     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-item .grid-content {
		text-align: center;	
	}

    .grid-item:nth-child(1) .grid-content {
		height: 100%;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
	}	
	
	.grid-item:nth-child(1) .grid-content h2,
	.grid-item:nth-child(2) .grid-content h2,
	.grid-item:nth-child(3) .grid-content h2
	{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
	}	
	
	.grid-item:nth-child(1) .grid-content h2,
	.grid-content h2
	{
		font-size: 22px;
	}
}

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
	.grid-item:nth-child(1) .grid-content h2,
	.grid-content h2
	{
		font-size: 20px;
	}
}