/**!
 * #Variant: Breakout Boxes
 */

 @media (min-width: 60em) {
	.breakout-variant-wrapper .page-section > .layout {
	--pad: 2rem;
	--pull: -1rem;
		:is(h3,h4,h5) {
			font-size: calc(1.2rem + .65vw);
		}
	}
}

.breakout-variant-wrapper {
	.page-main {
		--main-background: transparent;
	}
	.page-foot {
		--panel-background-color-a: transparent;
	}
	:is(.page-section, .page-head) {
		background-color: transparent;
	}

	&[data-nohero] .page-head :is(h1,h2)[id],
	&[data-nohero] .article .page-intro {
		--title-hue: ;
		color: var(--color-10);
		text-shadow: 0 0 2px var(--primary-200), 0 0 1em var(--color-10);
	}
	&[data-nohero] .article .page-intro {
			margin-top: 0;
			padding-top: 0;
			max-width: 65%;
			margin-inline: auto;
			text-align: center;
	}
}

.breakout-variant-wrapper .page-section > .layout {
	container: breakout inline-size;
	display: grid;
	grid-template-rows: 1fr;
	justify-items: start;
	isolation: isolate;
	margin-top: var(--spacing);
	--pad: 1rem;
	--pull: calc(-2 * var(--pad));

	:where(h3,h4,h5, .h3,.h4,.h5) {
		grid-area: h;
		isolation: isolate;
		z-index: 1;
		position: relative;
		align-self: start;
		margin-block: 0;
		line-height: 1.45;
		padding: var(--pad) var(--pad) var(--pad) calc(2 * var(--pad));
		background-color: var(--surface-8);
		box-shadow: 0 0 3px var(--shadow-shade);

		&::before {
			position: absolute;
			content: ' ';
			display: block;
			background: transparent;
			inset: 0;
			width: calc(2 * var(--pad));
			box-shadow: -9px 3px 8px var(--shadow-shade);
			opacity: 50%;
		}
	}

	ol, ul, p {
		grid-area: b;
		contain: paint;
		background-color: #fff3;
		box-shadow: inset 0 0 1ex #000A;
		list-style-type: none;
	}
	
	p, li {
		margin-block: 0 1.625ex;
		text-shadow: -1em 0 2em var(--color-10), -2em 0 2em var(--color-10), 2em 0 2em var(--color-10), 0 0 1em var(--color-10)
	}

	p, li {
		filter: drop-shadow(-3em 0 1rem #fff5) drop-shadow(4em 0 2rem #fff8);
	}
	
	&:nth-child(odd) {
		grid-template-columns: 1fr .6fr;
		grid-template-rows: 1fr;
		grid-template-areas: "b h"
	}
	&:nth-child(even) {
		grid-template-columns: .6fr 1fr;
		grid-template-rows: 1fr;
		grid-template-areas: "h b"
	}

	&:nth-child(odd) {
		:is(h3,h4,h5) {
			translate: var(--pull) calc(2 * var(--pad));
		}
		ol, ul, p {
			padding: 2em calc(3 * var(--pad)) 2em calc(2 * var(--pad));
		}
	}
	&:nth-child(even) {
		:is(h3,h4,h5) {
			translate: var(--pad) calc(2 * var(--pad));
			text-align: right;
			&::before {
				display: none;
			}
		}
		ol, ul, p {
			padding: 2em calc(1.65 * var(--pad)) 2em calc(2 * var(--pad));
		}
	}
}