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: min(350px, 100%);
	--scrolling-panels-text-alignment: center;
	background: var(--scrolling-panels-background-color);
	
}
.header.center {
	text-align: center;
}

.header.center .article-details {
	justify-content: center;
}

time::before {
	display: none;
}

.story-body > scrolling-panels {
	max-width: 100vw;
}
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;
}

/* Enhanced background element styling with data-max-width support */
scrolling-panels div[slot='background'] > * {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: min(var(--element-max-width), 100%) !important;
	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%;
}
scrolling-panels div[slot='background'] > .showing {
		opacity: 1;
}
scrolling-panels.show-first div[slot='background'] > .first, scrolling-panels.show-last div[slot='background'] > .last {
	opacity: 1;
}
scrolling-panels 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;
}

/* Enhanced foreground element styling with custom background and border support */
scrolling-panels div[slot='foreground'] > * {
	margin: 0 !important;
	padding: var(--page-padding);
	background: var(--scrolling-panels-custom-background, var(--scrolling-panels-background, var(--paper-color)));
	border: var(--scrolling-panels-show-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;
}

scrolling-panels figcaption {
	display: none;
	line-height: 1.2;
}

scrolling-panels figcaption.showing {
	display: block;
}


@media only screen and (max-width: 1000px) {
	scrolling-panels div[slot='background'] > *:first-child {
		position: relative;
        transform: translate(-50%, -50%) !important;
        top: 50%;
        left: 50% !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: var(--element-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) {
	scrolling-panels div[slot='background'] > *:first-child {
		position: relative;
        transform: translate(-50%, -50%) !important;
        top: 50%;
        left: 50% !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: var(--element-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) {
	scrolling-panels div[slot='foreground'] {
		align-items: center;
		margin: 0 20px !important;
	}
}
@container (max-width: 600px) {
	scrolling-panels div[slot='foreground'] {
		align-items: center;
		margin: 0 20px !important;
	}
}