.xplora-page-cover {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: #0c1a2f;
	overflow-x: clip;
}

.xplora-page-cover__image {
	position: relative;
	height: var(--xplora-cover-height-desktop, 300px);
	background: var(--xplora-cover-bg, linear-gradient(120deg, #0b365f 0%, #0f223b 35%, #f06f24 67%, #10233f 100%));
}

.xplora-page-cover__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, var(--color-dark), var(--color-brand-dark));
}

.xplora-page-cover__overlay {
	position: relative;
	z-index: 1;
	max-width: 1400px;
	height: 100%;
	margin: 0 auto;
	padding: 24px 16px;
	display: grid;
	align-content: center;
	gap: 0;
}

.xplora-page-cover--destination .xplora-page-cover__eyebrow {
	display: inline-flex;
	width: fit-content;
	padding: 2px 8px;
	font-size: var(--type-body-size);
	line-height: 1.2;
	background: var(--color-white);
	color: var(--color-brand-dark);
	font-weight: var(--type-medium-weight);
}

.xplora-page-cover--destination .xplora-page-cover__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--type-h1-size);
	line-height: 1;
	font-weight: var(--type-link-weight);
	color: var(--color-white);
	background: var(--color-brand-dark);
	width: fit-content;
	padding: 2px 8px 4px;
}

@media (max-width: 1024px) {
	.xplora-page-cover__image {
		height: var(--xplora-cover-height-tablet, 250px);
	}

	.xplora-page-cover__overlay {
		padding: 20px 12px;
	}
}

@media (max-width: 767px) {
	.xplora-page-cover__image {
		height: var(--xplora-cover-height-mobile, 150px);
	}

	.xplora-page-cover__overlay {
		padding: 14px 16px;
	}
}