.destinations {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.destinations-map {
	position: relative;
	width: 100%;
	height: auto;
	max-height: max(72rem, 50vw);
	aspect-ratio: 920/720;
	overflow: hidden;
	cursor: -webkit-grab;
	cursor: grab;
	touch-action: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.destinations-map.is-dragging {
	cursor: -webkit-grabbing;
	cursor: grabbing;
}
.destinations-map__stage {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 2195 / 1097;
	will-change: transform;
	touch-action: none;
}
.destinations-map__layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: fill;
	object-fit: fill;
	-o-object-position: center;
	object-position: center;
	opacity: 0;
	transition: opacity 0.7s ease;
	pointer-events: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.destinations-map__layer.is-active {
	opacity: 1;
}
.destinations-map__pins {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.destinations-map .map-pin {
	background: none;
	border: 0;
	padding: 0;
	opacity: 1;
	width: 2.75rem;
	height: 2.75rem;
	position: absolute;
	transform: translate(-50%, -50%);
	pointer-events: all;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	outline: none;
}
.destinations-map .map-pin.pin-label-left {
	flex-direction: row-reverse;
}
.destinations-map .map-pin__marker {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.4rem;
	height: 4.4rem;
	border-radius: 50%;
	color: rgb(var(--color-root-burgundy));
	background-color: currentColor;
	box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	transition: var(--duration) var(--easing);
}
.destinations-map .map-pin__marker::before {
	content: "";
	display: block;
	width: 120%;
	height: auto;
	aspect-ratio: 1/1;
	border: var(--border) currentColor;
	border-radius: 50%;
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	pointer-events: none;
	transition: var(--duration) var(--easing);
}
.destinations-map .map-pin.is-active .map-pin__marker {
	width: 5rem;
	height: 5rem;
}
.destinations-map .map-pin.is-active .map-pin__marker::before {
	opacity: 1;
}
.destinations-map .map-pin__icon {
	display: block;
	width: 54.54%;
	height: auto;
	aspect-ratio: 1/1;
	-o-object-fit: contain;
	object-fit: contain;
	-o-object-position: center;
	object-position: center;
	transition: var(--duration) var(--easing);
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);
}
.destinations-map .map-pin__label {
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	max-width: 45vw;
	position: absolute;
	left: calc(100% + var(--spacing-md));
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--font-size-2xs);
	white-space: normal;
	text-align: left;
	color: rgba(var(--color-black), 0.4);
	transition: var(--duration) var(--easing);
	pointer-events: none;
}
.destinations-map .map-pin.pin-label-left .map-pin__label {
	left: auto;
	right: calc(100% + var(--spacing-md));
	text-align: right;
}
.destinations-map .map-pin.is-active .map-pin__label {
	font-size: var(--font-size-sm);
	color: rgb(var(--color-root-burgundy));
}

.destinations-card {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.destinations-card__cover .object-fit {
	aspect-ratio: 4/3;
}
.destinations-card__details {
	position: relative;
	display: flex;
	flex-direction: column;
	grid-gap: var(--spacing-content);
	padding: var(--spacing-block) min(var(--spacing-container), var(--spacing-block));
}
.destinations-card {
	transition: opacity 0.35s ease-in-out;
}
.destinations-card.is-fading {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease-in-out;
}
.destinations-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 4.4rem;
	height: auto;
	aspect-ratio: 1/1;
	color: rgb(var(--color-white));
	background: rgb(var(--color-root-burgundy));
	border-radius: 50%;
	overflow: hidden;
}
.destinations-card__logo img {
	display: block;
	width: 54.5454545455%;
	height: auto;
	aspect-ratio: 1/1;
	-o-object-fit: contain;
	object-fit: contain;
	-o-object-position: center;
	object-position: center;
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);
}
.destinations-card__title {
	font-family: var(--font-heading);
	font-style: var(--font-heading-style);
	font-weight: var(--font-heading-weight);
	font-size: var(--font-size-h4);
	line-height: var(--font-heading-line-height);
	letter-spacing: var(--font-heading-letter-spacing);
	text-transform: var(--font-heading-text-transform);
	text-wrap: balance;
}
.destinations-card__desc {
	font-size: var(--font-base-size--sm);
}
.destinations-card__title,
.destinations-card__desc :is(p),
.destinations-card__explore {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

@media (max-width: 991px) {
	.destinations-map {
		aspect-ratio: 390/485;
	}
}

@media (min-width: 992px) {
	.destinations {
		flex-direction: row;
	}
	.destinations > .destinations-map {
		width: 63.8888888889%;
	}
	.destinations > .destinations-card {
		width: 36.1111111111%;
		height: auto;
		border-left: var(--border) var(--border-color);
	}

	.destinations-card__details {
		flex: 1;
	}
	.destinations-card__details > .destinations-card__explore {
		margin-top: auto;
	}
}