{{- $model := . -}}
<div id="intropageroot" class="!mb-12">
	<image-reel class="hidden lg:block max-w-full my-8 mx-12 relative" id="imagecontainer">
		<div class="overflow-hidden flex flex-row justify-between">
			{{- range $i, $img := $model.bilder -}}
				<div class="shrink-0 shadow-lg primages overflow-hidden w-[200px]">
					<popup-image
						data-image-url="{{- $img.BildPath -}}"
						aria-role="button"
						tabindex="0"
						data-hide-dl-button="true">
						<img
							class="shadow h-full scale-[1.3]"
							src="{{ $img.VorschauPath }}?thumb=500x0"
							alt="musen" />
						<div class="image-description hidden">
							{{- Safe $img.Beschreibung -}}
						</div>
					</popup-image>
				</div>
			{{- end -}}
		</div>
	</image-reel>

	<div class="w-full min-h-full mt-8 mb-12">
		<div class="text-center relative max-w-screen-xl mx-auto">
			<img
				src="/assets/musen.png"
				class="max-w-[28rem] mx-auto lg:absolute left-2/3 top-2"
				alt="Bild von aufsteigenden Musen" />
			<a href="/reihen" class="block no-underline !font-[Spectral] small-caps text-slate-700">
				<h1 class="text-2xl lg:text-4xl pt-8 lg:!pt-52 !font-[Spectral]">Willkommen auf der</h1>
				<h1 class="text-4xl lg:text-8xl !font-[Spectral]">Musenalm</h1>
				<h2 class="text-2xl lg:text-4xl !font-[Spectral]">Bibliographie deutscher Almanache</h2>
			</a>
		</div>
		<div class="mt-8 lg:text-lg font-medium lg:w-9/12 xl:w-7/12 mx-auto px-4 lg:px-0">
			<div class="lg:flex gap-x-12 starttext font-serif hyphens-auto" id="introtext">
				<div class="lg:w-2/3">
					{{- pageHtml "index" "abs1" -}}
				</div>
				<div class="lg:mt-36 lg:w-1/3">
					{{- pageHtml "index" "abs2" -}}
				</div>
			</div>
			<div class="text-center mt-8 startlinks font-serif text-xl">
				<a href="/redaktion/einleitung" class="">Einleitung</a>
				<div class="inline px-1">|</div>
				<a href="/reihen" class="font-bold">Alle Bände<i class="ri-arrow-right-double-line"></i></a>
			</div>
		</div>
	</div>
</div>