:root {
	--headings-font: 'Roboto Slab', serif;
	--body-font: 'Roboto', sans-serif;
	--h1: clamp(1.75rem, 4vw, 2.5rem);
	--h2: clamp(1.5rem, 3vw, 2rem);
	--h3: clamp(1.25rem, 2vw, 1.75rem);
	--h4: clamp(1.125rem, 1.5vw, 1.5rem);
	--h5: clamp(1rem, 1vw, 1.25rem);
	--h6: clamp(0.875rem, 0.75vw, 1rem);
	--text-s: clamp(0.875rem, 0.75vw, 1rem);
	--text-m: clamp(1rem, 1vw, 1.25rem);
	--text-l: clamp(1.125rem, 1vw, 1.5rem);
	--lh-s: clamp(1.25rem, 1.2vw, 1.5rem);
	--lh-m: clamp(1.5rem, 1.5vw, 1.875rem);
	--lh-l: clamp(1.625rem, 1.5vw, 2.125rem);
}

body {
	font-family: var(--body-font);
}

.text-s {
	font-size: var(--text-s);
	line-height: var(--lh-s);
}
.text-m {
	font-size: var(--text-m);
	line-height: var(--lh-m);
}
.text-l {
	font-size: var(--text-l);
	line-height: var(--lh-l);
}

.text-s,
.text-m,
.text-l {
	a {
		font-size: inherit;
		line-height: inherit;
	}
}

.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--headings-font);
}

.h1 {
	font-size: var(--h1);
}

.h2 {
	font-size: var(--h2);
}

.h3 {
	font-size: var(--h3);
}

.h4 {
	font-size: var(--h4);
}

.h5 {
	font-size: var(--h5);
}

.h6 {
	font-size: var(--h6);
}

.sanktlukas-banner {
	&.hero--medium {
		min-height: clamp(15em, 30vw, 26.25em);
		max-height: clamp(15em, 30vw, 26.25em);
		height: clamp(15em, 30vw, 26.25em);
	}
}

.page-template-template-startpage {

	.wp-block-heading.section-heading {
		margin-block: 0 2.5rem;
	}

	.sanktlukas-puff {
		padding-block: 0;
		
		.sanktlukas-puff__data {
			display: flex;
			flex-direction: column;
			gap: 1rem;
		}
		.sanktlukas-puff__photo {
			margin-block: 0 1rem;
		}
		.wp-block-sanktlukas-genericheading {
			margin: 0;
			min-height: auto;
			text-align: left;
			font-size: 1.25rem;;
		}
		.wp-block-sanktlukas-generictextblock {
			padding-inline: 0;
			margin-bottom: 0;
			text-align: left;
		}
		.wp-block-sanktlukas-genericbutton > a{
			display: inline;
			padding: 0;
		}
	}

	.cb-onlinebooking .cb-section-header > h2 {
		color: var(--main-green-color);
	}

	.cb-book-treatment.cb-container {
		background-color: #ffffff;
		padding: 1rem 1.5rem;
		margin-block-end: 3rem;
	}
}

.img-cover {
	padding-inline: 1rem;
	img {
		aspect-ratio: 16 / 9;
		object-fit: cover;
		width: 100%;
		max-height: 29rem;
	}
}