.bio {
	--body-length-clamped: clamp(500, var(--body-length), 1000);
	--body-length-norm: calc((var(--body-length-clamped) - 500) / 500);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--s-sm);
	padding-bottom: 0 !important;
	background-color: var(--c-white);

	@media (max-width: 767px) {
		padding-top: 0 !important;
	}

	@media (min-width: 768px) {
		z-index: 1;
		flex-direction: row;
		align-items: flex-end;
		justify-content: center;
		gap: var(--s-md);
	}

	@media (min-width: 1200px) {
		padding-top: calc(var(--s-lg) * var(--body-length-norm));
	}

	&.mod-bg-color-gray {
		background-color: var(--c-bg-lt);
	}

	> header {
		display: flex;
		flex-direction: column;
		gap: var(--s-xs);
		width: 100%;
		margin-top: var(--s-sm);
		padding-bottom: var(--s-md);

		@media (min-width: 768px) {
			display: flex;
			flex-direction: column;
			width: calc(55% - var(--s-md));
			max-width: var(--w-lg);
		}

		@media (min-width: 992px) {
			width: calc(65% - var(--s-md));
		}

		@media (min-width: 1200px) {
			width: calc(70% - var(--s-md));
		}

		@media (min-width: 1600px) {
			width: calc(75% - var(--s-md));
		}
	}

	> img {
		order: -1;
		width: 100%;

		@media (min-width: 768px) {
			width: calc(45% - var(--s-md));
			max-width: var(--w-sm);
		}

		@media (min-width: 992px) {
			width: calc(35% - var(--s-md));
		}

		@media (min-width: 1200px) {
			width: calc(30% - var(--s-md));
		}

		@media (min-width: 1600px) {
			width: calc(25% - var(--s-md));
		}
	}

	&.mod-image-position-right > img {
		@media (min-width: 768px) {
			order: 2;
		}
	}
}