/* ------------------------------------------------------------ *\
	Section Sides
\* ------------------------------------------------------------ */

.section-sides {
	--media-width: min(824px, 51.5vw);
	--shell-offset: max(var(--container-gutter), (100vw - var(--container-max-width)) / 2);

	position: relative;
	overflow: hidden;
	background: var(--c-navy);
	color: var(--c-white);

	.section__inner {
		display: flex;
		align-items: center;
		min-height: 742px;
	}

	.section__content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		width: 582px;
		max-width: calc(100vw - var(--media-width) - var(--shell-offset) - 47px);
		padding: 30px 0 30px 17px;
	}

	.section__entry p + p {
		margin-top: 1.5em;
	}

	/* Image sticks to the right and bottom edges of the section */
	.section__aside {
		position: absolute;
		right: 0;
		bottom: 0;
		width: var(--media-width);
	}
}

@media (max-width: 1023px) {
	.section-sides {
		padding-top: var(--section-spacing);

		.section__inner {
			flex-direction: column;
			align-items: stretch;
			gap: 30px;
			min-height: 0;
		}

		.section__content {
			width: 100%;
			max-width: 640px;
			padding: 0;
		}

		.section__aside {
			position: static;
			width: min(824px, 100%);
			margin: 0 calc(var(--container-gutter) * -1) 0 auto;
		}
	}
}

@media (max-width: 575px) {
	.section-sides {
		padding-top: 60px;

		.section__inner {
			gap: 0;
		}

		.section__content {
			gap: 30px;
		}

		/* Full-bleed image */
		.section__aside {
			width: auto;
			margin-inline: calc(var(--container-gutter) * -1);
		}
	}
}