:root {
	--text: black;
	--bg: white;
	--accent: color(display-p3 0.878 0.187 0.156);
	--whitespace: 5.55555;
}
@media (prefers-color-scheme: dark) {
	:root {
		--text: white;
		--bg: black;
	}
}
body {
	margin: 0;
	font-family: "Edge Sans 6", sans-serif;
	color: var(--text);
	background: var(--bg);
}
h1 {
	font-family: "Maro 2";
	font-size: clamp(2em, var(--h1), 6.66em);
	margin: calc(var(--whitespace) * 1dvh) calc(var(--whitespace) * 1dvw);
	text-align: end;
	line-height: 1;
}
p span:last-child,
a {
	color: var(--accent);
}
a:hover,
a:focus {
	background: var(--accent);
	color: var(--bg);
}

main > div {
	display: grid;
	grid-template-columns: 2fr 1fr;
}

main > figure {
	display: grid;
	grid-template-columns: repeat(3, auto);
	margin: 0;
}

.text {
	grid-template-columns: 1fr auto;
	margin: 5.55555dvh 5.55555dvw;
}
.text p {
	grid-column-start: 2;
	max-width: 30em;
	font-size: clamp(1em,2vw,1.414em);
	margin: 0 0 5.55555dvh;
}
.text p:has(+ p) {
	margin: 0 0 1em;
}
.text figure {
	grid-column-start: 1;
	grid-column-end: -1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0 -5.5555dvw 5.55555dvh;
}
.text figure:last-of-type {
	grid-template-columns: 2fr 1fr;
}

img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 50% 100%;
	background: black;
}
img[src*='close'] {
	object-fit: cover;
}
img[src*='back'] {
	background: color(display-p3 0.086 0.098 0.11)
}
img[src*='front'] {
	background: color(display-p3 0.216 0.22 0.227)
}
article div div:first-of-type img {
	object-position: 0 80%;
}

img[src*='top'] {
	grid-column-start: 1;
	grid-row-start: 1;
}
img[src*='top-right-1'],
img[src*='top-left-1'] {
	animation-name: z;
	animation-duration: 34s;
	animation-iteration-count: infinite;
}
img[src*='top-left-1'] {
	animation-duration: 22s;
}
@keyframes z {
	0%, 49% {
		z-index: -1;
	}
	50%, 100% {
		z-index: 1;
	}
}

img[src*='/left'],
img[src*='/right'] {
	grid-column-start: 3;
	grid-row-start: 1;
	z-index: 1;
}
img[src*='/left-2'],
img[src*='/right-2'] {
	animation-name: z-1;
	animation-duration: 69s;
	animation-iteration-count: infinite;
}
img[src*='/left-3'],
img[src*='/right-3'] {
	animation-name: z-1;
	animation-duration: 69s;
	animation-delay: -23s;
	animation-iteration-count: infinite;
}

@keyframes z-1 {
	0%, 65% {
		z-index: 0;
	}
	66%, 100% {
		z-index: 1;
	}
}

img[src*='/front'] {
	grid-column-start: 1;
	grid-row-start: 1;
	z-index: 1;
}
img[src*='/front-2'],
img[src*='/front-3'],
img[src*='/front-4'] {
	animation-name: z-f;
	animation-duration: 52s;
	animation-iteration-count: infinite;
}
img[src*='/front-3'] {
	animation-delay: -13s;
}
img[src*='/front-4'] {
	animation-delay: -26s;
}

@keyframes z-f {
	0%, 74% {
		z-index: 0;
	}
	75%, 100% {
		z-index: 1;
	}
}

img[src*='-k'] {
	animation-name: z-k;
	animation-duration: 200s;
	animation-iteration-count: infinite;
	opacity: 0;
}
@keyframes z-1 {
	0%, 65% {
		z-index: 0;
	}
	66%, 100% {
		z-index: 1;
	}
}

@media (width > 90em) {
	.text figure {
		grid-template-columns: repeat(4, 1fr);
	}
	img[src*='top-left-1'],
	img[src*='top-right-1'],
	img[src*='front-3'],
	img[src*='front-4'] {
		grid-column-start: 4;
		grid-row-start: 1;
	}
}