/* GUTSCHEINE PAGE STYLES */

.gutscheine {
}

.gutscheine__container {
	max-width: 72rem;
	margin: 0 auto;
	padding: var(--spacing-6);
}

@media (min-width: 640px) {
	.gutscheine__container {
		padding: var(--spacing-6);
	}
}

@media (min-width: 768px) {
	.gutscheine__container {
		padding: var(--spacing-8);
	}
}

@media (min-width: 1024px) {
	.gutscheine__container {
		padding: var(--spacing-12);
	}
}

@media (min-width: 1280px) {
	.gutscheine__container {
		padding: var(--spacing-12);
	}
}

/* Hero Section */
.gutscheine__hero--with-image {
	background-image: url('/images/gutscheine/GutscheinHero-480w.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 250px;
	position: relative;
	padding: var(--spacing-8) 0;
}

@media (min-width: 768px) {
	.gutscheine__hero--with-image {
		background-image: url('/images/gutscheine/GutscheinHero-768w.webp');
	}
}

@media (min-width: 1024px) {
	.gutscheine__hero--with-image {
		background-image: url('/images/gutscheine/GutscheinHero.webp');
	}
}

.gutscheine__hero-overlay {
	background-color: var(--color-primary-500-overlay);
	padding: var(--spacing-8) 0;
	min-height: inherit;
	display: flex;
	align-items: center;
}

.gutscheine__hero--with-image .component-headline__tagline,
.gutscheine__hero--with-image .component-headline__heading {
	color: var(--color-neutral-white);
}

.gutscheine__hero--with-image .component-headline__divider-svg {
	fill: var(--color-neutral-white);
}

@media (min-width: 768px) {
	.gutscheine__hero--with-image {
		min-height: 350px;
		padding: var(--spacing-12) 0;
	}

	.gutscheine__hero-overlay {
		padding: var(--spacing-12) 0;
	}
}

@media (min-width: 1024px) {
	.gutscheine__hero--with-image {
		min-height: 400px;
		padding: var(--spacing-16) 0;
	}

	.gutscheine__hero-overlay {
		padding: var(--spacing-16) 0;
	}
}

/* Content Section */
.gutscheine__intro {
	font-size: var(--font-size-lg);
	line-height: var(--line-height-relaxed);
	color: var(--color-neutral-700);
	margin-bottom: var(--spacing-8);
	text-align: center;
}

.gutscheine__voucher-images {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6);
	align-items: center;
	margin: 0 auto;
}

.gutscheine__voucher-image {
	max-width: 100%;
	height: auto;
	border: var(--border-width-thin, 1px) solid var(--color-neutral-700);
	border-radius: var(--radius-md);
	display: block;
}

@media (min-width: 1024px) {
	.gutscheine__voucher-images {
		flex-direction: row;
		gap: var(--spacing-8);
		justify-content: center;
	}

	.gutscheine__voucher-image {
		max-width: 58%;
	}
}