/* destination mosaic grid */

.destinations-list {
	padding: 3rem 0;
	background: var(--body-color);
}

.destinations-list  .ccm-block-page-list-header {
	text-align: center;
}

.mosaic-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 240px;
	grid-auto-flow: dense;
	gap: 0.5rem;
	margin:3rem 0;
}

.destination {
	position: relative;
	overflow: hidden;
	min-width: 0;
}

.destination-inner {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	text-decoration: none;
}

.destination .image {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.destination .image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.9) brightness(0.6);
	transition: all 1s;
	transform: scale(1);
}

.destination:hover .image img {
	transform: scale(1.05);
	transition: all 1s;
}

.destination .info {
	position: absolute;
	z-index: 2;
	left: 25px;
	right: 25px;
	bottom: 25px;
}

.destination .info h4 {
	margin: 0 0 5px;
	color: inherit;
	text-transform: uppercase;
	  font-weight: 300;
	  font-size: 1.125rem;
	  letter-spacing: 0.05rem;
}

.destination .info p {
	margin: 0;
}

.destination:hover a {
	color: var(--body-color);
}

.destination .recommended {
	position: absolute;
	z-index: 3;
	top: 20px;
	right: 20px;
}



.destination--standard {
	grid-column: span 1;
	grid-row: span 1;
}

.destination--wide {
	grid-column: span 2;
	grid-row: span 1;
}

.destination--tall {
	grid-column: span 1;
	grid-row: span 2;
}

.destination--large {
	grid-column: span 2;
	grid-row: span 2;
}



@media (max-width: 991px) {
	.mosaic-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 260px;
	}

	.destination:nth-child(n) {
		grid-column: span 1;
		grid-row: span 1;
	}

	.destination:nth-child(5n + 1) {
		grid-column: span 2;
	}
}

@media (max-width: 575px) {
	.mosaic-grid {
		display: block;
	}

	.destination {
		margin-bottom: 15px;
		aspect-ratio: 4/3;
	}
	
	
}