scrolling-panels {
	--scrolling-panels-frame-background-max-width: 770px;
	--scrolling-panels-frame-max-width: 1200px;
	--scrolling-panels-text-max-width: 400px;
	--scrolling-panels-text-min-width: 350px;
	--scrolling-panels-text-alignment: center;
}
scrolling-panels .impact {
	padding: var(--page-padding);
	max-width: var(--story-width);
}
scrolling-panels.full-screen div[slot='background'] > * {
	height: 100%;
	width: 100%;
	max-width: 100%;
}
scrolling-panels.full-fit div[slot='background'] > * {
	height: 100%;
	width: 100%;
	max-width: 100%;
	object-fit: contain;
}
scrolling-panels.story-fit  div[slot='background'] > * {
	height: 100%;
	max-width: min(var(--story-width), 100%);
	object-fit: contain;
}
scrolling-panels.left-frame div[slot='background'] > * {
	left: unset;
	right: 0%;
	transform: translate(0%, -50%);
}
scrolling-panels.right-frame div[slot='background'] > * {
	left: 0%;
	right: unset;
	transform: translate(0%, -50%);
}
scrolling-panels.left-frame div[slot='background'] > * , scrolling-panels.right-frame div[slot='background'] > *  {
	max-width: 100%;
	width: unset;
	max-height: 100%;
	
}
scrolling-panels.left-frame, scrolling-panels.right-frame {
	--scrolling-panels-background-width: fit-content;
	max-width: var(--scrolling-panels-frame-max-width, 1200px);
	margin: 0 auto;
	display: flex;
	justify-content: center;
}
scrolling-panels.right-frame {
	flex-direction: row-reverse;
}
div[slot='background'] > * {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: min(var(--story-width), 100%);
	transform: translate(-50%, -50%);
	object-fit: cover;
	opacity: 0;
	box-sizing: border-box;
	transition: opacity var(--opacity-transition, 0.5s) ease;
}
scrolling-panels.left-frame div[slot='background'] > *:first-child, scrolling-panels.right-frame div[slot='background'] > *:first-child {
    position: relative;
    transform: translate(0px, -50%) !important;
    top: 50%;
}
div[slot='background'] > .showing {
		opacity: 1;
}
scrolling-panels.show-first div[slot='background'] > .first, scrolling-panels.show-last div[slot='background'] > .last {
	opacity: 1;
}
div[slot='foreground'] {
	display: flex;
	flex-direction: column;
	gap: 100vh;
	padding-bottom: 100vh;
	width: 100%;
	margin: 0 5vw;
	align-items: var(--scrolling-panels-text-alignment, center);
}
scrolling-panels.left-frame div[slot='foreground'], scrolling-panels.right-frame div[slot='foreground'] {
	margin: 0 var(--space);
	margin-top: 100vh;
	max-width: var(--scrolling-panels-text-max-width);
	min-width: var(--scrolling-panels-text-min-width);
}
scrolling-panels.left-frame div[slot='foreground'] {
	--scrolling-panels-text-alignment: start !important;
}
scrolling-panels.right-frame div[slot='foreground'] {
	--scrolling-panels-text-alignment: end !important;
}
div[slot='foreground'] > * {
	margin: 0 !important;
	padding: var(--page-padding);
	background: var(--scrolling-panels-background, var(--paper-color));
	border: 0.5px solid var(--scrolling-panels-border-color, #888);
	max-width: min(var(--scrolling-panels-text-max-width), 100%);
	min-width: var(--scrolling-panels-text-min-width);
	width: fit-content;
	box-sizing: border-box;
}
@media only screen and (max-width: 1000px) {
	scrolling-panels.left-frame div[slot='background'] > *:first-child, scrolling-panels.right-frame div[slot='background'] > *:first-child {
	    position: relative;
	    transform: translate(0px, -50%) !important;
	    top: 50%;
	    left: 0 !important;
	}
	scrolling-panels.left-frame, scrolling-panels.right-frame {
		display: block;
	}
	scrolling-panels.left-frame div[slot='background'] > *, scrolling-panels.right-frame div[slot='background'] > * {
		max-width: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	scrolling-panels.left-frame div[slot='foreground'], scrolling-panels.right-frame div[slot='foreground'] {
		align-items: center;
		margin: 0 auto;
		margin-top: 100vh;
	}
}
@container (max-width: 1000px) {
	div[slot='background'] > *:first-child {
	    position: relative;
	    transform: translate(0px, -50%) !important;
	    top: 50%;
	    left: 0 !important;
	}
	scrolling-panels.left-frame, scrolling-panels.right-frame {
		display: block;
	}
	scrolling-panels.left-frame div[slot='background'] > *, scrolling-panels.right-frame div[slot='background'] > * {
		max-width: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	scrolling-panels.left-frame div[slot='foreground'], scrolling-panels.right-frame div[slot='foreground'] {
		align-items: center;
		margin: 0 auto;
		margin-top: 100vh;
	}
}
@media only screen and (max-width: 600px) {
	div[slot='foreground'] {
		align-items: center;
		margin: 0 20px !important;
	}
}
@container (max-width: 600px) {
	div[slot='foreground'] {
		align-items: center;
		margin: 0 20px !important;
	}
}