website-astro-stefanimhoff.de/src/components/GalleryDetail.astro

---
import cx from 'classnames';

import { animation, animationDelay } from '../data/site';

import Picture from './Picture.astro';
import { Headline } from '.';

const { entry } = Astro.props;

function randomPosition() {
	const positions = ['start', 'center', 'end'];
	const randomIndex = Math.floor(Math.random() * positions.length);
	return positions[randomIndex];
}

const imageLength = entry.data.images.length;
---

<div class="col-span-full row-start-1 row-end-3 flex flex-col lg:flex-row">
	<div class="p-gap lg:w-2/6">
		<div
			class="w-[66ch] lg:sticky lg:top-[calc(100vh_/_2_-_(max(30vh,_250px)_/_2))] lg:h-[max(30vh,_250px)] lg:w-full"
			{...animationDelay}
		>
			<Headline>{entry.data.title}</Headline>
			<slot />
		</div>
	</div>
	<div
		class={cx(
			'grid grid-cols-5 gap-x-[2vw] gap-y-gap grow bg-[#d0cdc8] dark:bg-[#0e0d0c] lg:w-2/3 print:!bg-transparent',
			{
				'lg:pbs-[calc(100vh_/_2_-_(max(30vh,_250px)_/_2))]': imageLength > 1,
				'lg:justify-items-center lg:items-center': imageLength === 1,
			}
		)}
	>
		{
			entry.data.images.map(({ src }: { src: string }, index: number) => (
				<div
					class={cx('col-span-full w-full !mbe-0  lg:col-span-3 lg:max-w-full', {
						'justify-self-start lg:col-start-1':
							randomPosition() === 'start' && imageLength > 1 && index > 0,
						'justify-self-center lg:col-start-2':
							randomPosition() === 'center' && imageLength > 1 && index > 0,
						'justify-self-end lg:col-start-3':
							randomPosition() === 'end' && imageLength > 1 && index > 0,
						'lg:col-start-2': imageLength === 1 || index === 0,
					})}
					{...animation}
				>
					<Picture
						alt={entry.data.title}
						aspect={entry.data.aspect}
						breakpoints={[500, 1000, 1500]}
						format={['avif']}
						src={src}
					/>
				</div>
			))
		}
	</div>
</div>