:root {
	color-scheme: light;

	--bg: #f8f8f6;
	--surface: #ffffff;
	--text: #25363e;
	--muted: #4c6068;
	--accent: #426472;
	--accent-soft: #e1e5e9;

	--dark-red: #461e1b;
	--red: #ff5250;
	--red-muted: #ff7f7f;
	--orange: #fb825d;
	--light-orange: #ffefd2;
	--yellow: #ffe372;

	--really-dark-steel: #495c67;
	--dark-steel: #79929f;
	--mid-steel: #a2c5d8;
	--light-steel: #d0dce9;

	--border: #e5e5e1;
	--radius: 2rem;

	--max-width: 120rem;
	--space: clamp(1rem, 0.6rem + 1.5vw, 2rem);
	--main-width: min(var(--max-width), calc(100vw - 2rem));
	--header-height: 6rem;

	--steel: linear-gradient(60deg, var(--dark-steel) 25%, var(--mid-steel) 50%, var(--dark-steel) 75%);
	--pale-steel: linear-gradient(30deg, var(--mid-steel) 25%, var(--light-steel) 50%, var(--mid-steel) 75%);
	--heat: linear-gradient(60deg, var(--red) 25%, var(--orange) 50%, var(--red) 75%);
	--bg-gradient: linear-gradient(90deg, #e9e9e5 10%, #f8f8f6 25%, #ffffff 50%, #f8f8f6 75%, #e9e9e5 90%);

	accent-color: var(--red);

}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: 'Plus Jakarta Sans',  sans-serif;
	font-size: 16px;
	color: var(--text);
	line-height: 1.6;
	background-color: #fff;
	height: 100vh;
	box-shadow: inset 0 0 10vw var(--bg);
	overflow-x: hidden;
}


main {
	width: var(--main-width);
	margin: 0 auto;
	position: relative;
}


h1,
h2,
h3 {
	margin: 0;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-wrap: balance;
	padding-bottom: .25rem;
}

h2 {
	font-size: clamp(1rem, 1rem + 1.5vw, 1.5rem);
	margin-bottom: 0.8rem;
	background-image: var(--heat);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 .5rem 1rem hsl(from var(--dark-steel) h s l / .25);
	@media screen and (width <= 500px) {
		margin-top: 2rem;
	}
}

.main_content {
	position: fixed;
	top: 2rem;
	display: flex;
	flex-direction: column;
	gap: var(--space);
	width: var(--main-width);
	padding: calc(var(--space) + 1rem);
	border-radius: 4rem;
	max-height: calc(100vh - 4rem);
	overflow-y: scroll;
	overflow-x: hidden;
	scrollbar-width: none;
	isolation: isolate;
	background-color: var(--bg);
	will-change: auto;
	@media screen and (width <= 1180px) {
		top: 1rem;
		max-height: calc(100vh - 2rem);
		border-radius: 2rem;
	}
	@media screen and (width <= 500px) {
		padding: calc(var(--space) / 1.5);
	}
	@media only screen and (hover: none), (pointer: coarse) {
		top: 2rem;
		bottom: 2rem;
		max-height: calc(100vh - 4rem);
	}
	&::before {
		content: "";
		position: fixed;
		left: calc((100vw - var(--main-width)) / 2);
		top: 2rem;
		bottom: 0;
		height: calc(100vh - 4rem);
		width: var(--main-width);
		border-radius: inherit;
		box-shadow: inset 0 .25rem 1.5rem rgb(0 0 0 / .15), 0 .125rem .125rem rgba(255 255 255 / .75), 0 -.125rem .125rem rgba(0 0 0 / .15) ;
		pointer-events: none;
		z-index: 1;
		@media screen and (width <= 1180px) {
			top: 1rem;
			height: calc(100vh - 2rem);
		}
	}
}

/* Responsive Layout

	--------------------------
	|
	| Above the fold content (hero, intro, about)
	|
	--------------------------
	|
	| Equipment section (kitchen and product equipment)
	|
	--------------------------
	|
	| content grid (support, contact)
	|
	--------------------------
	|
	| Gallery section (carousel)
	|
	--------------------------

	There were a lot of curve balls working on this layout.

	I began with everything in the same grid, that responded to the view port width. However, having to keep
	track of all the column and row spans in the layout when it was responding, even after reorganising the CSS into
	a more manageable structure, became a layout debugging nightmare.

	I ended up separating out the rows into three separate grids.

	The Kitchen equipment section was a challenge to go from mouse UI to touch UI and is still a little flaky as
	far as I can tell.

	The iOS iPad simulator dropped styles from the form elements. I thought it may have been an iOS thing but they
	all work properly on the iPhone simulator. Testing on a real, modern iPad, the layout and form elements all
	style correctly. Although I have run into issues around the viewport being smaller than that I had designed for
	and have to make adjustments to the layout and sizing of elements to accommodate the smaller viewport.

	My very old iPad Pro (2017) running iOS 16.7.16, didn't seem to be able to interpret the CSS at all and completely
	botched the layout rendering.

	Also the 3d carousel was a challenge to get working properly because the sizes were hard to get working together
	with the perspective and the radius of the carousel. I think it was a little easier making an X3D version of the
	carousel, which surprisingly responded very nicely and worked on everything but in the end I thought it was more
	appropriate to keep it in HTML/CSS/JS. Although I feel somewhat differently about that now. The X3D standard is
	XML and rendered straight into the DOM like SVG and I ended up changing it back. It would be nice to see this
	become a standard and become supported natively in the browser. I know there's the 'Canvas in HTML' standard API
	that Google is pushing, but to me, the X3D approach is a more intuitive approach for those that build 3D content.

*/

.above_the_fold, #equipment, .content_grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: auto auto;
	gap: var(--space);
	@media screen and (width <= 1440px) {
		grid-template-columns: repeat(4, 1fr);
	}
	@media screen and (width <= 1180px) {
		grid-template-columns: repeat(2, 1fr);
	}
	@media screen and (width <= 500px) {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}


/*
============================================
Above the fold
============================================
*/

.hero {
	grid-column: span 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	@media screen and (width <= 1440px) {
		grid-column: span 2;
		gap: 1rem;
	}
	@media screen and (width <= 1024px) {
		grid-column: span 3;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	@media screen and (width <= 834px) {
		grid-column: span 2 / span 2;
	}
	@media screen and (width <= 500px) {
		display: flex;
		flex-direction: column;
	}
}

.brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	img {
		transform: translateY(-0.5rem) translateX(-2rem);
		width: 80%;
		height: auto;
		margin: 0 auto;
		filter: drop-shadow(0 1rem 2rem hsl(from var(--dark-steel) h s l / .25));
		&.narrow_logo, &.vertical_logo {
			display: none;
		}
		&.wide_logo {
			display: block;
		}
		@media screen and (width <= 1300px) {
			width: 90%;
		}
		@media screen and (width <= 1024px) {
			&.wide_logo, &.vertical_logo {
				display: none;
			}
			&.narrow_logo {
				display: block;
				transform: translateY(-1rem) translateX(-1.25rem);
				width: 85%;
			}
		}
		@media screen and (width <= 500px) {
			&.wide_logo, &.narrow_logo {
				display: none;
			}
			&.vertical_logo {
				display: block;
				width: 80%;
				transform: translateY(0rem) translateX(0rem);
			}
		}
	}
}

h1#hero-title {
	display: block;
	font-size: clamp(1.5rem, 2rem + 2.5vw, 7rem);
	text-align: center;
	line-height: 1;
	color: var(--muted);
	background-image: var(--steel);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 .25rem .25rem rgba(0 0 0 / .15));
	margin: auto;
	@media screen and (width <= 1440px) {
		font-size: clamp(1.5rem, 2rem + 1.5vw, 5.25rem);
	}
	@media screen and (width <= 1024px) {
		font-size: clamp(1.5rem, 2.5rem + 1.25vw, 5.25rem);
		text-align: left;
		margin-bottom: 2rem;
	}
	@media screen and (width <= 834px) {
		font-size: clamp(1.5rem, 2rem + 2.25vw, 5.25rem);
	}
	@media screen and (width <= 500px) {
		font-size: clamp(1.5rem, 2rem + 2.25vw, 5.25rem);
		text-align: center;
		margin-bottom: 0;
	}
}

.intro {
	align-self: center;
	@media screen and (width <= 1180px) {
		font-size: clamp(.75rem, .75rem + 0.25vw, 1.75rem)
	}
	@media screen and (width <= 1024px) {
		row-size: layout;
		align-self:flex-start;
	}
	@media screen and (width <= 834px) {
		grid-column: auto / auto;
		grid-row-start: 2;
	}
	.lead {
		font-size: clamp(1rem, 1rem + 0.75vw, 2rem);
		margin: 0;
		@media screen and (width <= 500px) {
			font-size: clamp(1.5rem, 1rem + 1.75vw, 2.5rem);
			text-align: center;
			margin: 2rem auto;
		}
	}
}

.about {
	align-self: center;
	@media screen and (width <= 1024px) {
		grid-column: span 2 / span 2;
		grid-column-start: 2;
		grid-row-start: 2;
		row-size: layout;
	}
	p:last-child {
		margin-bottom: 0;
	}
}

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	padding: clamp(.75rem, .75rem + 1vw, 1.25rem);
	display: grid;
	gap: 1rem;
	border-radius: 1.25rem;
	box-shadow: 0 1rem 2rem hsl(from var(--dark-steel) h s l / .25);
	ul {
		padding-left: 1rem;
		li {
			line-height: 1.4;
			padding-bottom: 0.5rem;
		}
	}
	&.image {
		padding: 0;
		border: 0;
		img {
			width: 100%;
			height: auto;
			border-radius: inherit;
			object-fit: cover;
		}
	}
}

/*
============================================
Equipment section
============================================
*/

#equipment {
	display: block;
	position: relative;
	perspective: 60rem;
	& > .card {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: 1fr auto;
		box-shadow: inset 0 0 8rem hsl(from var(--dark-steel) h s l / .5);
		h3 {
			margin-bottom: 0.5rem;
		}
		#kitchen_equipment {
			.kitchen-equipment-scroller {
				height: 100%;
				.kitchen-equipment-list {
					grid-column: span 1 / span 1;
					grid-row: span 2 / span 2;
					li img {
						display: none;
						@media only screen and (hover: none), (pointer: coarse) {
							display: block;
						}
					}
				}
			}
			.kitchen-swipe-hint {
				display: none;
				line-height: 1;
				@media only screen and (hover: none), (pointer: coarse) {
					display: block;
				}
			}
		}
		#product_equipment {
			.product-equipment-list {
				display: grid;
				gap: 0.25rem;
				grid-column: span 1 / span 1;
				grid-row: span 2 / span 2;
				grid-template-columns: 1fr;
				grid-template-rows: repeat(4, 1fr);
				li {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					cursor: auto;
					gap: 0.5rem;
					padding: 0.25rem;
					background-color: hsl(from var(--light-steel) h s calc(l + 10));
					box-shadow: inset 0 0 3rem hsl(from var(--dark-steel) h s l / .5);
					&:hover {
						border: thin solid var(--light-steel);
					}
					img {
						width: auto;
						max-height: 8rem;
						object-fit: contain;
						margin-bottom: .5rem;
					}
				}
			}
		}
		ul {
			list-style: none;
			margin: 0;
			padding:0;
			min-width: 0;
			display: grid;
			gap: 0.25rem;
			height: calc(100% - 3rem);
			font-size: 1rem;
			contain: layout;
			li {
				display: flex;
				align-items: center;
				padding: 0 .5rem;
				background-color: hsl(from var(--light-steel) h s calc(l + 10));
				border: thin solid var(--light-steel);
				border-radius: .5rem;
				cursor: pointer;
				transition: all 0.2s ease;
				box-shadow: none;
				line-height: 1.2;
				@media screen and (width <= 1280px) {
					font-size: 0.75rem;
				}
				&:hover,
				&.is-overlay-hover,
				&.is-centered {
					border-color: var(--red-muted);
					background-color: var(--light-orange);
					box-shadow: inset 0 0 .75rem var(--orange);
				}
			}
		}
		#kitchen_illustration {
			grid-column: span 3 / span 3;
			grid-row: span 2 / span 2;
			align-self: flex-start;
			position: relative;
			/* transform: translateZ(10rem) translateX(.5rem); */
			display:flex;
			justify-content: center;
			img {
				display: block;
				width: 100%;
				height: auto;
				object-fit: contain;
			}
			#kitchen_overlay {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				background-color: transparent;
				z-index: 2;
				mix-blend-mode: hard-light;
				svg {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			@media screen and (width <= 1440px) {
				align-self: center;
			}
		}
	}
}

/*
=============================================
=>	Equipment on mobile
=============================================
*/

@media only screen and (hover: none), (pointer: coarse) {
	#equipment {
		.card {
			display: flex;
			flex-direction: column;
			gap: .5rem;
			#kitchen_equipment {
				display: flex;
				flex-direction: column;
				gap: var(--space);
				.kitchen-equipment-scroller {
					position: relative;
					display: block;
					&::after {
						content: "";
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						border-radius: .75rem;
						box-shadow: inset 0 0 2rem rgba(0 0 0 / .25);
						pointer-events: none;
					}
				}
				.kitchen-swipe-hint {
					display: block;
					margin: 0;
					font-size: 0.8rem;
					font-weight: 600;
					letter-spacing: 0.01em;
					color: var(--muted);
					text-align: center;
				}
				ul.kitchen-equipment-list {
					position: relative;
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					overflow-x: auto;
					overflow-y: hidden;
					scrollbar-width: thin;
					scroll-behavior: smooth;
					scroll-snap-type: x mandatory;
					padding: .5rem calc(50% - 4rem);
					background-color: hsl(from var(--mid-steel) h s calc(l + 20));
					border-radius: .75rem;
					height: 9rem;
					box-shadow: inset 0 0 .5rem rgba(0 0 0 / .5);
					&:focus-visible {
						outline: 2px solid var(--red);
						outline-offset: 3px;
					}
					li {
						flex: 0 0 8rem;
						scroll-snap-align: center;
						flex-direction: column;
						text-align: center;
						justify-content: space-around;
						height: 8rem;
						gap: 0.5rem;
						box-shadow: 0 0 0.5rem rgba(0 0 0 / .25);
						&:hover,
						&.is-overlay-hover,
						&.is-centered {
							box-shadow: inset 0 0 1rem var(--orange);
						}
						img {
							display: block;
							width: auto;
							max-height: 5rem;
							object-fit: contain;
						}
					}
				}
			}
			#kitchen_illustration {
				@media screen and (width <= 1280px) {
					height: calc(100vh - 16rem);
					width: auto;
				}
				@media screen and (width <= 500px) {
					height: auto;
					width: auto;
				}
			}
			#product_equipment {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				gap: var(--space);
				ul.product-equipment-list {
					width: 100%;
					grid-template-columns: repeat(4, 1fr);
					grid-template-rows: repeat(1, 1fr);
					@media screen and (width <= 1180px) {
						grid-template-columns: repeat(2, 1fr);
						grid-template-rows: repeat(2, 1fr);
					}
					@media screen and (width <= 500px) {
						display: flex;
						flex-direction: column;
					}
					li {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						cursor: auto;
						gap: 0.5rem;
						padding: 0.25rem;
						&:hover,
						&.is-overlay-hover {
							background-color: hsl(from var(--light-steel) h s calc(l + 10));
						}
						img {
							width: auto;
							min-height: 12rem;
							object-fit: contain;
							margin-bottom: .5rem;
							@media screen and (width <= 1024px) {
								max-height: 5rem;
							}
						}
					}
				}
			}
		}

	}
}

/*
============================================
Support lists
============================================
*/

#support {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	grid-column: span 3;
	@media screen and (width <= 1440px) {
		grid-column: span 4;
	}
	#support_lists {
		flex: 1;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 100%;
		gap: var(--space);
		height: auto;
		@media screen and (width <= 500px) {
			display: flex;
			flex-direction: column;
		}
		.card {
			h3 {
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
			}
			ul {
				display: flex;
				flex-direction: column;
				justify-content: space-around;

			}
		}
	}
}

/*
============================================
Location, phone and email
============================================
*/

#location_phone_and_email {
	grid-column: span 2;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space);
	@media screen and (width <= 1440px) {
		grid-template-columns: repeat(3, 1fr);
		grid-column: span 4;
	}
	@media screen and (width <= 500px) {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: var(--space);
	}
	a {
		display: flex;
		align-items: center;
		position: relative;
		background-color: hsl(from var(--light-steel) h s calc(l + 10));
		border: thin solid var(--light-steel);
		box-shadow: inset 0 0 3rem hsl(from var(--dark-steel) h s l / .5);
		border-radius: .5rem;
		padding: 0 0 0 7rem;
		text-decoration: none;
		color: var(--text);
		transition: all 0.2s ease;
		height: 7rem;
		span {
			white-space: nowrap;
		}
		&::before {
			content: "";
			display: block;
			position: absolute;
			width: 6rem;
			height: 6rem;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
			background-color: transparent;
		}
		&.phone::before {
			background-image: url(img/phone_icon.png);
			transform: translateY(-2.75rem) translateX(-.25rem) rotate(-4deg);
			transition: transform 0.2s ease;

		}
		&.location::before {
			background-image: url(img/location_icon.png);
			transform: translateY(-2.75rem) translateX(.25rem);
			transition: transform 0.2s ease;
		}
		&:hover {
			border-color: var(--red-muted);
			background-color: var(--light-orange);
			box-shadow: inset 0 0 .75rem var(--orange);
			&.phone::before {
				transform: translateY(-2.5rem) rotate(-7deg) translateX(.25rem) scale(1.5);
			}
			&.location::before {
				transform: translateY(-2.5rem) translateX(.5rem) scale(1.5);
			}
		}
		@media screen and (width <= 1440px) {
			padding: 0 0 0 6rem;
			height: 5rem;
			&::before {
				width: 5rem;
				height: 5rem;
			}
		}
	}
	.photo_filler {
		display: none;
		justify-content: center;
		align-items: center;
		width: 100%;
		max-height: 100%;
		overflow: hidden;
		contain: size;
		border-radius: 1.5rem;
		@media screen and (width <= 1440px) {
			display: flex;
		}
		@media screen and (width <= 834px) {
			display: none;
		}
		img {
			object-fit: cover;
			border-radius: 1.5rem;
			height: 100%;
		}
	}
	#contact {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: calc(var(--space) / 2);
		padding-bottom: .125rem;
		@media screen and (width <= 500px) {
			p {
				margin: 0;
			}
		}
		#phone_and_location {
			display: flex;
			flex-direction: column;
			gap: calc(var(--space) / 2);
			flex-shrink: 0;
			.call_us {
				display: flex;
				flex-direction: column;
				gap: calc(var(--space) / 2);
			}
			.our_location {
				display: flex;
				flex-direction: column;
				gap: calc(var(--space) / 2);
			}
		}
	}
	#email_us {
		display: flex;
		flex-direction: column;
		width: 100%;
		.card {
			flex-grow: 1;
		}
		form {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 100%;
			gap: min(calc(var(--space) / 2), 1rem);
			label {
				display: grid;
				gap: 0.125rem;
				font-weight: 600;
				font-size: 0.9rem;
			}
			input,
			textarea {
				width: 100%;
				border: 1px solid var(--mid-steel);
				border-radius: .25rem;
				padding: 0.25rem 0.5rem;
				font: inherit;
				color: var(--text);
				background: hsl(from var(--light-steel) h s calc(l + 10));
				&:focus,
				&:focus-visible {
					outline: .125rem solid var(--orange);
				}
			}
			textarea {
				min-height: 6rem;
				resize: vertical;
			}
			[type=submit] {
				display:flex;
				justify-content: flex-start;
				align-items: center;
				position: relative;
				background-color: hsl(from var(--light-steel) h s calc(l + 10));
				border: thin solid var(--light-steel);
				border-radius: .5rem;
				box-shadow: inset 0 0 3rem hsl(from var(--dark-steel) h s l / .5);
				padding: 0 0 0 7rem;
				text-decoration: none;
				color: var(--text);
				transition: all 0.2s ease;
				height: 7rem;
				transition: all 0.2s ease;
				font-family: inherit;
				font-size: 1rem;
				&::before {
					content: "";
					display: block;
					position: absolute;
					width: 6rem;
					height: 6rem;
					left: 0;
					top: 50%;
					transform: translateY(-50%) translateX(.25rem);
					background-repeat: no-repeat;
					background-position: center;
					background-size: contain;
					background-color: transparent;
					background-image: url(img/email_icon.png);
					transition: transform 0.2s ease;
				}
				&:hover {
					border-color: var(--red-muted);
					background-color: var(--light-orange);
					box-shadow: inset 0 0 .75rem var(--orange);
					&::before {
						transform: translateY(-2.5rem) translateX(.5rem) scale(1.5);
					}
				}
			}
		}
	}
}


/*
============================================
Gallery
============================================
*/

#gallery {
	grid-column: span 5;
	grid-row: span 2;
	grid-auto-rows: 1fr;
	@media screen and (width <= 1440px) {
		grid-column: span 3;
		grid-row: span 1;
	}
	@media screen and (width <= 834px) {
		grid-column: span 2;
	}
	@media screen and (width <= 500px) {
		grid-column: span 1;
	}
	#carousel_container {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		margin: 0 auto;
		gap: 1rem;
		#carousel {
			display: block;
			margin: 0 auto;
			cursor: grab;
			touch-action: none;
			width: 100%;
			height: clamp(20rem, 56vw, 36rem);
			border: 0;
			border-radius: 1.5rem;
			overflow: hidden;
			background-color: hsl(from var(--light-steel) h s calc(l + 10));
			box-shadow: inset 0 0 2rem hsl(from var(--dark-steel) h s l / .2);
			&.is-dragging {
				cursor: grabbing;
			}
			canvas,
			x3d-canvas {
				cursor: inherit !important;
				touch-action: none;
			}
			&:focus-visible {
				outline: 2px solid var(--red);
				outline-offset: 2px;
			}
		}
		#carousel_controls {
			position: relative;
			width: 80%;
			z-index: 2;
			height: 7rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: hsl(from var(--light-steel) h s calc(l + 10));
			border: thin solid var(--light-steel);
			border-radius: 3.5rem;
			padding: 0 .25rem;
			@media screen and (width < 1440px) {
				height: 5rem;
				width: min(100%, 28rem);
			}
			@media screen and (width <= 500px)   {
				width: 100%;
				height: 3.5rem;
			}
		}
	}
	.carousel_btn {
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid color-mix(in oklab, var(--dark-steel) 45%, white);
		background: var(--steel);
		color: transparent;
		width: 6rem;
		height: 6rem;
		border-radius: 50%;
		font: inherit;
		font-weight: 700;
		cursor: pointer;
		transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
		@media screen and (width < 1440px) {
			width: 4rem;
			height: 4rem;
		}
		@media screen and (width <= 500px)   {
			width: 3rem;
			height: 3rem;
		}
		span {
			display: block;
			width: 2rem;
			height: 2rem;
			border: .125rem solid #fff;
			@media screen and (width < 1440px) {
				width: 1.5rem;
				height: 1.5rem;
			}
		}
		&[data-carousel="prev"] span {
			border-right: 0;
			border-top: 0;
			transform: rotate(45deg) translateX(.25rem) translateY(-.25rem);
		}
		&[data-carousel="next"] span {
			border-left: 0;
			border-bottom: 0;
			transform: rotate(45deg) translateX(-.25rem) translateY(.25rem);
		}
		&:hover {
			transform: translateY(-1px);
			background-color: var(--light-orange);
			box-shadow: 0 0.35rem 0.8rem rgba(0, 0, 0, 0.12);
		}
		&:focus-visible {
			outline: 2px solid var(--red);
			outline-offset: 2px;
		}
	}
	#gallery_status {
		min-width: 8.5rem;
		text-align: center;
		font-weight: 700;
		font-size: 1rem;
		color: var(--muted);
	}
	@media screen and (width < 834px) {
		#carousel_container {
			#carousel {
				height: clamp(18rem, 70vw, 28rem);
			}
		}
	}
	@media (prefers-reduced-motion: reduce) {
		#carousel {
			scroll-behavior: auto;
		}
	}
}