/* Keep hero text, actions and pagination fully visible on phones. */
@media (max-width: 767.98px) {
	.intro,
	.intro.hero-slider,
	.hero-swiper .swiper-slide {
		height: auto;
		min-height: min(68svh, 38rem);
	}

	/* Keep the complete artwork visible and fill the surrounding area with a blurred copy. */
	.hero-swiper .swiper-slide[data-bg-image],
	.intro.hero-single[data-bg-image] {
		background-image: none !important;
		isolation: isolate;
		position: relative;
		overflow: hidden;
		contain: paint;
		background-color: #1c1c1c;
	}
	.hero-swiper .swiper-slide[data-bg-image]::before,
	.intro.hero-single[data-bg-image]::before {
		position: absolute;
		inset: 0;
		z-index: 0;
		background-image: var(--hero-slide-image);
		background-position: center;
		background-size: cover;
		filter: blur(1.8rem) brightness(.55);
		transform: scale(1.08);
		content: '';
	}
	.hero-swiper .swiper-slide[data-bg-image]::after,
	.intro.hero-single[data-bg-image]::after {
		position: absolute;
		inset: 0;
		z-index: 1;
		background-image: var(--hero-slide-image);
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		content: '';
	}
	.hero-swiper .swiper-slide .color-layer,
	.hero-swiper .swiper-slide .intro__content,
	.hero-swiper .swiper-slide .intro__header,
	.hero-swiper .swiper-slide .intro__scroll { z-index: 2; }

	/* Let content determine the slide height instead of clipping it in an absolute box. */
	.hero-swiper .swiper-slide .intro__content {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		min-height: min(68svh, 38rem);
		align-items: center;
		padding: 5rem 1.8rem 5rem;
		box-sizing: border-box;
	}

	.hero-swiper .swiper-slide .intro__content--right-center {
		justify-content: flex-start;
		padding-inline: 1.8rem;
	}

	.hero-swiper .swiper-slide .intro__content .headline,
	.hero-swiper .swiper-slide .headline--right-aligned,
	.hero-swiper .swiper-slide .intro__content .container-fluid,
	.hero-swiper .swiper-slide .intro__content .row,
	.hero-swiper .swiper-slide .intro__content [class*="col-"] {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		margin-inline: 0;
	}

	.hero-swiper .swiper-slide .intro__content .row { --bs-gutter-x: 0; }
	.hero-swiper .swiper-slide .headline--right-aligned,
	.hero-swiper .swiper-slide .headline--right-aligned .headline__subtitle,
	.hero-swiper .swiper-slide .headline--right-aligned h1,
	.hero-swiper .swiper-slide .headline--right-aligned p {
		text-align: right !important;
	}
	.hero-swiper .swiper-slide .intro__content .row,
	.hero-swiper .swiper-slide .intro__content [class*="col-"] { direction: rtl; }
	.hero-swiper .swiper-slide .headline--right-aligned h1 {
		margin-block: 1.2rem;
		font-size: clamp(3.2rem, 9vw, 5.2rem);
		line-height: 1.3;
		overflow-wrap: anywhere;
	}
	.hero-swiper .swiper-slide .headline--right-aligned p {
		font-size: clamp(1.5rem, 4vw, 1.8rem);
		line-height: 1.9;
		overflow-wrap: anywhere;
	}
	.hero-swiper .swiper-slide .headline--right-aligned .headline__btngroup {
		justify-content: flex-start;
		gap: 1rem;
		margin-top: 2rem;
	}
	.hero-swiper .swiper-slide .headline__btngroup .btn {
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}
	.intro.hero-slider { margin-bottom: 0 !important; }
	.intro + section,
	.intro.hero-slider + section { margin-top: 0; }
}

@media (max-width: 480px) {
	.intro,
	.intro.hero-slider,
	.hero-swiper .swiper-slide { min-height: min(62svh, 32rem); }
	.hero-swiper .swiper-slide .intro__content {
		min-height: min(62svh, 32rem);
		padding: 4.5rem 1.4rem 5rem;
	}
	.hero-swiper .swiper-slide .intro__content--right-center { padding-inline: 1.4rem; }
	.hero-swiper .swiper-slide .headline--right-aligned h1 { font-size: clamp(3rem, 9.5vw, 4.2rem); }
	.hero-swiper .swiper-slide .headline--right-aligned .headline__btngroup {
		flex-direction: column;
		align-items: stretch;
	}
	.hero-swiper .swiper-slide .headline__btngroup .btn { width: 100%; }
	.hero-slider-pagination,
	.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
	.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
		bottom: 1.2rem;
		z-index: 6;
	}
	.hero-swiper .swiper-slide .intro__scroll { bottom: 2rem; z-index: 5; }
}