.apartments-listing-wrapper{
	background-color:#e8e6e2;
	padding:30px;
	padding-left:15px;
	padding-right:15px;
	margin-bottom:50px;
}

.apartments-listing-wrapper img{
	width:100%;
	margin-bottom:30px;
}

.apartments-listing-text{
	display: flex;
	flex-direction: column;
	justify-content: center;
	color:#1c1c1c;
}

.btn-apartment-listing{
	padding-toP:10px;
	padding-bottom:10px;
	width:100%;
	max-width:150px;
	margin-top:30px;
}

.balcony-wrapper{
	
}

.balcony-wrapper p, .balcony-wrapper h2{
	margin-bottom:0px;
}

:root{
	--gap: 12px;               /* spacing between tiles */
	--cta: #b49062;            /* color of the +4 tile */
}

.gallery-wrap{
	padding: var(--gap);
}

/* Grid layout (Bootstrap-friendly) */
.gallery-grid{
	display: grid;
	gap: var(--gap);
	grid-template-columns: 1fr;
}

.tile img{
	width:100%;
}

/* +4 CTA tile */
.tile-cta{
	background: var(--cta);
	color: #fff;
	display: flex;
	align-items: end;
	justify-content: start;
}

.tile-cta:hover{
	cursor:pointer;
}

.tile-cta .cta-content{
	width: 100%;
	padding: 18px;
	line-height: 1.1;
}

.tile-cta .count{
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 300;
}

.tile-cta .label{
	opacity: .95;
	font-weight: 300;
}

    /* Custom, iPhone Retina*/ 
    @media only screen and (min-width : 340px) {
    }

    /* Extra Small Devices, Phones */                                                                                                                                       
    @media only screen and (min-width : 460px) {
    }    
    
    /* Extra Small Devices, Phones */                                                                                                                                       
    @media only screen and (min-width : 550px) {
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
	}
	
	 /* Small Devices, Tablets */
    @media only screen and (min-width : 992px) {
			
	.apartments-listing-wrapper .col-md-6.order-md-2{
		padding:0px;
	}
	
	.gallery-grid{
		grid-template-columns: 2fr 1fr; /* big left, right column */
		grid-template-rows: auto auto;
	}
	.tile-big{
		grid-row: 1 / span 2; grid-column: 1;
		height:100%;
		width:100%;
	}
	.tile-right-top{
		grid-column: 2; grid-row: 1;
	}
	
	.right-bottom{
		grid-column: 2; grid-row: 2; display: grid; gap: var(--gap); grid-template-columns: 1fr 1fr;
	}

	/* Tiles */
	.tile{
		position: relative;
		overflow: hidden;
		background: #b49062;
		box-shadow: 0 2px 10px rgba(0,0,0,.15);
		transition: .35s ease all;
	} 

	/* aspect ratios for visual match */
	.ratio-hero{
		aspect-ratio: 16 / 9;
	} /* big left */
	.ratio-top{
		aspect-ratio: 4 / 3;
	}  /* right top */
	.ratio-small{
		aspect-ratio: 4 / 3;
	}  /* lower right pair */

	.tile > img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transform: scale(1.001); /* avoids hairline gaps on some GPUs */
		transition: .35s ease all;
	}
	
	.tile:hover{
		cursor:pointer;
	}

	/* Optional: subtle hover */
	.tile:hover img{
		transform: scale(1.03);
		transition: .35s ease all;
	}
	
	}
	
	 /* Desktop */
    @media only screen and (min-width : 1200px) {

	.apartments-listing-wrapper{
		padding:30px;
		padding-left:30px;
		padding-right:30px;
	}

	.apartments-listing-wrapper img{
		margin-bottom:0px;
	}

	}
	
	 /* Desktop */
    @media only screen and (min-width : 1600px) {
	}
	
	 /* Desktop */
    @media only screen and (min-width : 1900px) {

	.balcony-wrapper{
		padding-top:100px;
	}

	.apartments-listing-wrapper {
		padding: 50px;
	}	

	.apartments-listing-wrapper .col-md-6.apartments-listing-text {
		padding-left: 50px;
	}

	.apartments-listing-wrapper .col-md-6.order-md-1.apartments-listing-text {
		padding-left: 0px;
	}	
	
	.btn-apartment-listing{
		font-size:20px;
		min-width:200px;
	}
	
	}
	
	 /* Desktop */
    @media only screen and (min-width : 2500px) {
	
	.balcony-wrapper{
		padding-top:50px;
	}	
	
	}