/* Hessian's Hero Carousel. Every part is found by its data-hessian-carousel-part attribute, never by a class, so the
   page editor's Style Manager keeps writing rules on each component's own id. The design is the root's
   data-hessian-carousel-design attribute; with none, or an unknown one, the carousel is laid out as full-bleed-overlay.

   The root is a grid. The controls element and the control set hessian-carousel.js builds inside it are display:
   contents, so every control is a grid item of the root and sits in the slides' cell (stage) or the thumbnails row.

   Without hessian-carousel.js (no hessian-carousel-ready class on the root) every slide is stacked in one cell and only
   the first one shows; the others are transparent but stay in the page, so their images, alt text and captions are in
   the text a reader without JavaScript gets. With it, the classes the script adds move the slides with the root's
   data-hessian-carousel-transition, over the time in the --hessian-carousel-duration property the script sets.

   Breakpoints are the page editor's devices: Tablet up to 992px, Mobile up to 768px.

   Fonts and colours come from the site theme's custom properties (the site's /site_theme.css), so a carousel matches
   its site; each falls back to the carousel's own value for a site with no theme. */

[data-hessian-carousel-part="root"] {
	font-family: var(--site-body-font, inherit);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "stage";
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}

[data-hessian-carousel-part="root"] [data-hessian-carousel-part],
[data-hessian-carousel-part="root"] .hessian-carousel-control-set * {
	box-sizing: border-box;
}

/* The shared text block, by default bottom left over the image (full-bleed-overlay). */
[data-hessian-carousel-part="root"] > [data-hessian-carousel-part="text"] {
	grid-area: stage;
	align-self: end;
	justify-self: start;
	position: relative;
	z-index: 3;
	max-width: min(720px, 60%);
	padding: 48px 48px 80px;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

[data-hessian-carousel-part="root"] [data-hessian-carousel-part="eyebrow"] {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

[data-hessian-carousel-part="root"] [data-hessian-carousel-part="headline"] {
	margin: 0;
	font-family: var(--site-heading-font, inherit);
	font-size: clamp(32px, 5vw, 64px);
	font-weight: 700;
	line-height: 1.1;
	color: inherit;
}

[data-hessian-carousel-part="root"] [data-hessian-carousel-part="subheadline"] {
	margin: 16px 0 0;
	max-width: 560px;
	font-size: 18px;
	line-height: 1.5;
}

[data-hessian-carousel-part="root"] [data-hessian-carousel-part="actions"] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 28px;
}

[data-hessian-carousel-part="root"] [data-hessian-carousel-part="primary-button"] {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 6px;
	background: var(--site-accent-color, #2563eb);
	color: var(--site-accent-text-color, #ffffff);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-shadow: none;
}

[data-hessian-carousel-part="root"] [data-hessian-carousel-part="primary-button"]:hover {
	background: var(--site-accent-hover-color, #1d4ed8);
}

[data-hessian-carousel-part="root"] [data-hessian-carousel-part="secondary-link"] {
	color: inherit;
	font-size: 16px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

[data-hessian-carousel-part="root"] [data-hessian-carousel-part="primary-button"]:focus-visible,
[data-hessian-carousel-part="root"] [data-hessian-carousel-part="secondary-link"]:focus-visible {
	outline: 3px solid var(--site-accent-color, #2563eb);
	outline-offset: 3px;
}

/* The slides: every slide in the same cell. By default a full-width stage at least 80vh and 480px tall. */
[data-hessian-carousel-part="root"] > [data-hessian-carousel-part="slides"] {
	grid-area: stage;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	position: relative;
	z-index: 1;
	min-height: max(80vh, 480px);
	margin: 0;
	overflow: hidden;
	background: #111827;
	touch-action: pan-y;
}

[data-hessian-carousel-part="root"] > [data-hessian-carousel-part="slides"]:focus-visible {
	outline: 3px solid var(--site-accent-color, #2563eb);
	outline-offset: -3px;
}

/* The full-bleed gradient from the bottom left, above the slides and below the text block. */
[data-hessian-carousel-part="root"] > [data-hessian-carousel-part="slides"]::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(to top right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 75%);
}

/* A slide is a grid too, its caption placed in its one cell. The image fills the slide whatever its own size, so the
   stage's height comes from the design, never from the image. */
[data-hessian-carousel-part="root"] > [data-hessian-carousel-part="slides"] > [data-hessian-carousel-part="slide"] {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	position: relative;
	min-width: 0;
	min-height: 0;
	margin: 0;
}

[data-hessian-carousel-part="root"] [data-hessian-carousel-part="slide"] > [data-hessian-carousel-part="image"] {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

[data-hessian-carousel-part="root"] [data-hessian-carousel-part="slide"] > [data-hessian-carousel-part="caption"] {
	grid-area: 1 / 1;
	align-self: end;
	justify-self: end;
	position: relative;
	z-index: 1;
	max-width: 40%;
	margin: 16px;
	padding: 6px 12px;
	border-radius: 4px;
	background: rgba(17, 24, 39, 0.7);
	color: #ffffff;
	font-size: 14px;
	line-height: 1.4;
}

/* No JavaScript: the first slide shows, the others are transparent in the same cell. */
[data-hessian-carousel-part="root"]:not(.hessian-carousel-ready) > [data-hessian-carousel-part="slides"] > [data-hessian-carousel-part="slide"] + [data-hessian-carousel-part="slide"] {
	opacity: 0;
	pointer-events: none;
}

/* The controls, built by hessian-carousel.js. A carousel with one slide gets the hidden attribute on its set. */
[data-hessian-carousel-part="root"] > [data-hessian-carousel-part="controls"],
[data-hessian-carousel-part="root"] .hessian-carousel-control-set {
	display: contents;
}

[data-hessian-carousel-part="root"] .hessian-carousel-control-set[hidden] {
	display: none;
}

/* Arrows: round, at the left and right middle of the slides, the chevrons drawn by borders. */
[data-hessian-carousel-part="root"] .hessian-carousel-arrow {
	grid-area: stage;
	align-self: center;
	position: relative;
	z-index: 4;
	width: 48px;
	height: 48px;
	margin: 0 16px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(17, 24, 39, 0.55);
	cursor: pointer;
}

[data-hessian-carousel-part="root"] .hessian-carousel-arrow:hover {
	background: rgba(17, 24, 39, 0.8);
}

[data-hessian-carousel-part="root"] .hessian-carousel-arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	border-top: 3px solid #ffffff;
}

[data-hessian-carousel-part="root"] .hessian-carousel-arrow-previous {
	justify-self: start;
}

[data-hessian-carousel-part="root"] .hessian-carousel-arrow-previous::before {
	border-left: 3px solid #ffffff;
	transform: translate(-35%, -50%) rotate(-45deg);
}

[data-hessian-carousel-part="root"] .hessian-carousel-arrow-next {
	justify-self: end;
}

[data-hessian-carousel-part="root"] .hessian-carousel-arrow-next::before {
	border-right: 3px solid #ffffff;
	transform: translate(-65%, -50%) rotate(45deg);
}

/* Dots: centred at the bottom of the slides. */
[data-hessian-carousel-part="root"] .hessian-carousel-dots {
	grid-area: stage;
	align-self: end;
	justify-self: center;
	display: flex;
	gap: 4px;
	position: relative;
	z-index: 4;
	margin-bottom: 16px;
	padding: 4px 8px;
	border-radius: 999px;
	background: rgba(17, 24, 39, 0.35);
}

[data-hessian-carousel-part="root"] .hessian-carousel-dot {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

[data-hessian-carousel-part="root"] .hessian-carousel-dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.75);
}

[data-hessian-carousel-part="root"] .hessian-carousel-dot[aria-current="true"]::before {
	background: var(--site-accent-color, #2563eb);
	box-shadow: 0 0 0 2px #ffffff;
}

/* Counter: "n of N" at the top right of the slides. Shown when switched on, and in framed-inset unless switched off. */
[data-hessian-carousel-part="root"] .hessian-carousel-counter {
	display: none;
	grid-area: stage;
	align-self: start;
	justify-self: end;
	position: relative;
	z-index: 4;
	margin: 16px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(17, 24, 39, 0.6);
	color: #ffffff;
	font-size: 14px;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

[data-hessian-carousel-part="root"][data-hessian-carousel-counter="on"] .hessian-carousel-counter,
[data-hessian-carousel-part="root"][data-hessian-carousel-design="framed-inset"]:not([data-hessian-carousel-counter="off"]) .hessian-carousel-counter {
	display: block;
}

/* Thumbnails: only in gallery-thumbnails, a row of equal small 16/9 buttons scrolling sideways when they do not fit. */
[data-hessian-carousel-part="root"] .hessian-carousel-thumbnails {
	display: none;
	grid-area: thumbs;
	gap: 12px;
	padding: 6px;
	overflow-x: auto;
}

[data-hessian-carousel-part="root"] .hessian-carousel-thumbnail {
	flex: 0 0 120px;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	border-radius: 6px;
	overflow: hidden;
	background: #e5e7eb;
	opacity: 0.7;
	cursor: pointer;
}

[data-hessian-carousel-part="root"] .hessian-carousel-thumbnail:hover {
	opacity: 1;
}

[data-hessian-carousel-part="root"] .hessian-carousel-thumbnail[aria-current="true"] {
	opacity: 1;
	box-shadow: 0 0 0 3px var(--site-accent-color, #2563eb);
}

[data-hessian-carousel-part="root"] .hessian-carousel-thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

[data-hessian-carousel-part="root"] .hessian-carousel-arrow:focus-visible,
[data-hessian-carousel-part="root"] .hessian-carousel-dot:focus-visible,
[data-hessian-carousel-part="root"] .hessian-carousel-thumbnail:focus-visible {
	outline: 3px solid var(--site-accent-color, #2563eb);
	outline-offset: 2px;
}

/* Hidden by the root's switches. */
[data-hessian-carousel-part="root"][data-hessian-carousel-arrows="off"] .hessian-carousel-arrow {
	display: none;
}

[data-hessian-carousel-part="root"][data-hessian-carousel-dots="off"] .hessian-carousel-dots {
	display: none;
}

/* centred-statement: the full-bleed stage with an even, darker overlay and the text centred on it. */
[data-hessian-carousel-part="root"][data-hessian-carousel-design="centred-statement"] > [data-hessian-carousel-part="slides"]::after {
	background: rgba(0, 0, 0, 0.55);
}

[data-hessian-carousel-part="root"][data-hessian-carousel-design="centred-statement"] > [data-hessian-carousel-part="text"] {
	align-self: center;
	justify-self: center;
	max-width: 860px;
	padding: 64px 32px;
	text-align: center;
}

[data-hessian-carousel-part="root"][data-hessian-carousel-design="centred-statement"] [data-hessian-carousel-part="headline"] {
	font-size: clamp(40px, 6.5vw, 84px);
}

[data-hessian-carousel-part="root"][data-hessian-carousel-design="centred-statement"] [data-hessian-carousel-part="subheadline"] {
	margin-left: auto;
	margin-right: auto;
}

[data-hessian-carousel-part="root"][data-hessian-carousel-design="centred-statement"] [data-hessian-carousel-part="actions"] {
	justify-content: center;
}

/* split-screen: the text on the left on a light panel, the slides on the right. */
[data-hessian-carousel-part="root"][data-hessian-carousel-design="split-screen"] {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas: "text stage";
	background: var(--site-background-color, #ffffff);
}

[data-hessian-carousel-part="root"][data-hessian-carousel-design="split-screen"] > [data-hessian-carousel-part="text"] {
	grid-area: text;
	align-self: stretch;
	justify-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: none;
	padding: 64px;
	background: var(--site-background-color, #ffffff);
	color: var(--site-text-color, #111827);
	text-shadow: none;
}

[data-hessian-carousel-part="root"][data-hessian-carousel-design="split-screen"] > [data-hessian-carousel-part="slides"] {
	min-height: 560px;
}

[data-hessian-carousel-part="root"][data-hessian-carousel-design="split-screen"] > [data-hessian-carousel-part="slides"]::after,
[data-hessian-carousel-part="root"][data-hessian-carousel-design="framed-inset"] > [data-hessian-carousel-part="slides"]::after,
[data-hessian-carousel-part="root"][data-hessian-carousel-design="gallery-thumbnails"] > [data-hessian-carousel-part="slides"]::after {
	content: none;
}

/* Horizontal fade, in every design while the root's data-hessian-carousel-fade is on: in place of the design's own
   overlay, the root's --hessian-carousel-fade-color is fully opaque from the slides' left edge to its
   --hessian-carousel-fade-start, and fades from there to transparent at its --hessian-carousel-fade-end. With both at
   0% nothing covers the slides. The whole fade is drawn at the opacity in its --hessian-carousel-fade-opacity (0 to 1).
   The four properties are set on the root's own style rule. */
[data-hessian-carousel-part="root"][data-hessian-carousel-fade="on"] > [data-hessian-carousel-part="slides"]::after {
	content: "";
	opacity: var(--hessian-carousel-fade-opacity, 1);
	background: linear-gradient(to right, var(--hessian-carousel-fade-color, var(--site-background-color, #ffffff)) var(--hessian-carousel-fade-start, 0%), transparent var(--hessian-carousel-fade-end, 50%));
}

/* On mobile, where the text sits over the whole width of the slides, the horizontal fade is an even overlay of its
   colour across the whole image instead, at the fade's opacity. The width is the page editor's Mobile device, up to
   768px. */
@media (max-width: 768px) {
	[data-hessian-carousel-part="root"][data-hessian-carousel-fade="on"] > [data-hessian-carousel-part="slides"]::after {
		background: var(--hessian-carousel-fade-color, var(--site-background-color, #ffffff));
	}

}

/* framed-inset: the slides in a rounded 16/9 frame on a light ground, the text on a card over the frame's lower left. */
[data-hessian-carousel-part="root"][data-hessian-carousel-design="framed-inset"] {
	padding: 48px 48px 88px;
	background: var(--site-background-color, #ffffff);
}

[data-hessian-carousel-part="root"][data-hessian-carousel-design="framed-inset"] > [data-hessian-carousel-part="slides"] {
	align-self: start;
	min-height: 0;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	background: #e5e7eb;
	box-shadow: 0 24px 48px rgba(17, 24, 39, 0.25);
}

[data-hessian-carousel-part="root"][data-hessian-carousel-design="framed-inset"] > [data-hessian-carousel-part="text"] {
	max-width: min(480px, 44%);
	margin: 0 0 -40px -24px;
	padding: 32px;
	border-radius: 12px;
	background: var(--site-background-color, #ffffff);
	color: var(--site-text-color, #111827);
	text-shadow: none;
	box-shadow: 0 12px 32px rgba(17, 24, 39, 0.18);
}

[data-hessian-carousel-part="root"][data-hessian-carousel-design="framed-inset"] [data-hessian-carousel-part="headline"] {
	font-size: clamp(28px, 3.5vw, 44px);
}

/* gallery-thumbnails: three rows on a light ground, the text centred, the slides 16/9, the thumbnails strip. */
[data-hessian-carousel-part="root"][data-hessian-carousel-design="gallery-thumbnails"] {
	grid-template-areas: "text" "stage" "thumbs";
	row-gap: 24px;
	padding: 48px;
	background: var(--site-background-color, #ffffff);
}

[data-hessian-carousel-part="root"][data-hessian-carousel-design="gallery-thumbnails"] > [data-hessian-carousel-part="text"] {
	grid-area: text;
	justify-self: center;
	max-width: 760px;
	padding: 0;
	color: var(--site-text-color, #111827);
	text-align: center;
	text-shadow: none;
}

[data-hessian-carousel-part="root"][data-hessian-carousel-design="gallery-thumbnails"] [data-hessian-carousel-part="subheadline"] {
	margin-left: auto;
	margin-right: auto;
}

[data-hessian-carousel-part="root"][data-hessian-carousel-design="gallery-thumbnails"] [data-hessian-carousel-part="actions"] {
	justify-content: center;
}

[data-hessian-carousel-part="root"][data-hessian-carousel-design="gallery-thumbnails"] > [data-hessian-carousel-part="slides"] {
	align-self: start;
	min-height: 0;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	background: #e5e7eb;
}

[data-hessian-carousel-part="root"][data-hessian-carousel-design="gallery-thumbnails"] .hessian-carousel-thumbnails {
	display: flex;
}

/* The script's states. Every slide is hidden but the current one and the one leaving, the current one on top. */
[data-hessian-carousel-part="root"].hessian-carousel-ready > [data-hessian-carousel-part="slides"] > [data-hessian-carousel-part="slide"] {
	visibility: hidden;
	z-index: 0;
}

[data-hessian-carousel-part="root"].hessian-carousel-ready > [data-hessian-carousel-part="slides"] > [data-hessian-carousel-part="slide"].hessian-carousel-slide-leaving {
	visibility: visible;
	z-index: 1;
}

[data-hessian-carousel-part="root"].hessian-carousel-ready > [data-hessian-carousel-part="slides"] > [data-hessian-carousel-part="slide"].hessian-carousel-slide-current {
	visibility: visible;
	z-index: 2;
}

/* slide: the slides move sideways, one slide width before or after the stage. */
[data-hessian-carousel-part="root"].hessian-carousel-ready[data-hessian-carousel-transition="slide"] > [data-hessian-carousel-part="slides"] > [data-hessian-carousel-part="slide"] {
	opacity: 1;
	transform: translateX(0);
	transition: transform var(--hessian-carousel-duration) ease-in-out;
}

[data-hessian-carousel-part="root"].hessian-carousel-ready[data-hessian-carousel-transition="slide"] > [data-hessian-carousel-part="slides"] > [data-hessian-carousel-part="slide"].hessian-carousel-slide-current {
	transform: translateX(0);
}

[data-hessian-carousel-part="root"].hessian-carousel-ready[data-hessian-carousel-transition="slide"] > [data-hessian-carousel-part="slides"] > [data-hessian-carousel-part="slide"].hessian-carousel-slide-at-before {
	transform: translateX(-100%);
}

[data-hessian-carousel-part="root"].hessian-carousel-ready[data-hessian-carousel-transition="slide"] > [data-hessian-carousel-part="slides"] > [data-hessian-carousel-part="slide"].hessian-carousel-slide-at-after {
	transform: translateX(100%);
}

/* A slide being put at its start place moves there with no transition. */
[data-hessian-carousel-part="root"].hessian-carousel-ready[data-hessian-carousel-transition="slide"] > [data-hessian-carousel-part="slides"] > [data-hessian-carousel-part="slide"].hessian-carousel-slide-instant {
	transition: none;
}

/* fade, also used for a missing or unknown transition: the two slides cross at the same time. */
[data-hessian-carousel-part="root"].hessian-carousel-ready:not([data-hessian-carousel-transition="slide"]):not([data-hessian-carousel-transition="dissolve"]):not([data-hessian-carousel-transition="cut"]) > [data-hessian-carousel-part="slides"] > [data-hessian-carousel-part="slide"] {
	opacity: 0;
	transition: opacity var(--hessian-carousel-duration) ease-in-out;
}

[data-hessian-carousel-part="root"].hessian-carousel-ready:not([data-hessian-carousel-transition="slide"]):not([data-hessian-carousel-transition="dissolve"]):not([data-hessian-carousel-transition="cut"]) > [data-hessian-carousel-part="slides"] > [data-hessian-carousel-part="slide"].hessian-carousel-slide-current {
	opacity: 1;
}

[data-hessian-carousel-part="root"].hessian-carousel-ready:not([data-hessian-carousel-transition="slide"]):not([data-hessian-carousel-transition="dissolve"]):not([data-hessian-carousel-transition="cut"]) > [data-hessian-carousel-part="slides"] > [data-hessian-carousel-part="slide"].hessian-carousel-slide-leaving {
	opacity: 0;
}

/* dissolve: the slide leaving blurs out as the next one comes into focus from a slight zoom. */
[data-hessian-carousel-part="root"].hessian-carousel-ready[data-hessian-carousel-transition="dissolve"] > [data-hessian-carousel-part="slides"] > [data-hessian-carousel-part="slide"] {
	opacity: 0;
	filter: blur(16px);
	transform: scale(1.06);
	transition: opacity var(--hessian-carousel-duration) ease-in-out, filter var(--hessian-carousel-duration) ease-in-out, transform var(--hessian-carousel-duration) ease-in-out;
}

[data-hessian-carousel-part="root"].hessian-carousel-ready[data-hessian-carousel-transition="dissolve"] > [data-hessian-carousel-part="slides"] > [data-hessian-carousel-part="slide"].hessian-carousel-slide-current {
	opacity: 1;
	filter: none;
	transform: none;
}

[data-hessian-carousel-part="root"].hessian-carousel-ready[data-hessian-carousel-transition="dissolve"] > [data-hessian-carousel-part="slides"] > [data-hessian-carousel-part="slide"].hessian-carousel-slide-leaving {
	opacity: 0;
	filter: blur(16px);
	transform: none;
}

/* cut: no transition. */
[data-hessian-carousel-part="root"].hessian-carousel-ready[data-hessian-carousel-transition="cut"] > [data-hessian-carousel-part="slides"] > [data-hessian-carousel-part="slide"] {
	opacity: 0;
	transition: none;
}

[data-hessian-carousel-part="root"].hessian-carousel-ready[data-hessian-carousel-transition="cut"] > [data-hessian-carousel-part="slides"] > [data-hessian-carousel-part="slide"].hessian-carousel-slide-current {
	opacity: 1;
}

/* Mobile. */
@media (max-width: 768px) {
	[data-hessian-carousel-part="root"] > [data-hessian-carousel-part="text"] {
		max-width: 100%;
		padding: 32px 20px 72px;
	}

	[data-hessian-carousel-part="root"] [data-hessian-carousel-part="slide"] > [data-hessian-carousel-part="caption"] {
		align-self: start;
	}

	[data-hessian-carousel-part="root"] .hessian-carousel-arrow {
		width: 44px;
		height: 44px;
		margin: 0 8px;
	}

	[data-hessian-carousel-part="root"] .hessian-carousel-thumbnail {
		flex-basis: 88px;
	}

	[data-hessian-carousel-part="root"][data-hessian-carousel-design="centred-statement"] > [data-hessian-carousel-part="text"] {
		padding: 48px 20px;
	}

	[data-hessian-carousel-part="root"][data-hessian-carousel-design="split-screen"] {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "stage" "text";
	}

	[data-hessian-carousel-part="root"][data-hessian-carousel-design="split-screen"] > [data-hessian-carousel-part="slides"] {
		min-height: 360px;
	}

	[data-hessian-carousel-part="root"][data-hessian-carousel-design="split-screen"] > [data-hessian-carousel-part="text"] {
		padding: 40px 24px;
	}

	[data-hessian-carousel-part="root"][data-hessian-carousel-design="framed-inset"] {
		grid-template-areas: "stage" "text";
		padding: 24px 16px 32px;
	}

	[data-hessian-carousel-part="root"][data-hessian-carousel-design="framed-inset"] > [data-hessian-carousel-part="text"] {
		grid-area: text;
		justify-self: stretch;
		max-width: none;
		margin: 16px 0 0;
		padding: 24px;
	}

	[data-hessian-carousel-part="root"][data-hessian-carousel-design="gallery-thumbnails"] {
		padding: 32px 16px;
	}

	[data-hessian-carousel-part="root"][data-hessian-carousel-design="gallery-thumbnails"] > [data-hessian-carousel-part="text"] {
		padding: 0;
	}

}