@layer trappist {
[data-scroll-start],
[data-scroll-end] {
	position: relative;
	overflow-x: hidden;
}

[data-scroll-start] > *,
[data-scroll-end] > * {
	overflow-x: scroll;
	scroll-behavior: var(--scroll-behavior);
}

[data-scroll-start]::before,
[data-scroll-end]::after {
	position: absolute;
	top: 0;
	z-index: 1;
	transition: opacity var(--transition);
	background-image: linear-gradient(to right, #fff0);
	inline-size: var(--gutter);
	block-size: 100%;
	pointer-events: none;
	content: "";
}

[data-scroll-start]::before {
	left: 0;
}

[data-scroll-end]::after {
	right: 0;
	transform: scaleX(-1);
}

[data-scroll-start="true"]::before,
[data-scroll-end="true"]::after {
	opacity: 0;
}

.nav {
	display: flex;
	gap: calc(var(--gutter) / 3);
	margin: 0;
	padding: 0;
}

.nav-vertical {
	flex-direction: column;
}

.nav-separator {
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

.text-start {
	text-align: start;
}

.text-center {
	text-align: center;
}

.text-end {
	text-align: end;
}

.text-justify {
	text-align: justify;
}

.d-flex {
	display: flex !important;
}

.d-none {
	display: none !important;
}

.d-block {
	display: block !important;
}

.d-inline {
	display: inline !important;
}

.d-inline-block {
	display: inline-block !important;
}

.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.align-start {
	align-items: flex-start;
}

.align-end {
	align-items: flex-end;
}

.align-center {
	align-items: center;
}

.m-auto {
	margin: auto;
}

.mb-auto {
	margin-block: auto;
}

.mbs-auto {
	margin-block-start: auto;
}

.mbe-auto {
	margin-block-end: auto;
}

.mi-auto {
	margin-inline: auto;
}

.mis-auto {
	margin-inline-start: auto;
}

.mie-auto {
	margin-inline-end: auto;
}

.p-auto {
	padding: auto;
}

.pb-auto {
	padding-block: auto;
}

.pbs-auto {
	padding-block-start: auto;
}

.pbe-auto {
	padding-block-end: auto;
}

.pi-auto {
	padding-inline: auto;
}

.pis-auto {
	padding-inline-start: auto;
}

.pie-auto {
	padding-inline-end: auto;
}

.flex-row {
	flex-direction: row;
}

.flex-row-reverse {
	flex-direction: row-reverse;
}

.flex-column {
	flex-direction: column;
}

.flex-column-reverse {
	flex-direction: column-reverse;
}

.gap-none {
	--gap: 0;
}

.gutter-none {
	--gap: 0;
}

.gap-1 {
	--gap: calc(var(--gutter) * 1 / 12);
}

.gutter-1 {
	--gap: calc(var(--gutter) * 1 / 12);
}

.gap-2 {
	--gap: calc(var(--gutter) * 2 / 12);
}

.gutter-2 {
	--gap: calc(var(--gutter) * 2 / 12);
}

.gap-3 {
	--gap: calc(var(--gutter) * 3 / 12);
}

.gutter-3 {
	--gap: calc(var(--gutter) * 3 / 12);
}

.gap-4 {
	--gap: calc(var(--gutter) * 4 / 12);
}

.gutter-4 {
	--gap: calc(var(--gutter) * 4 / 12);
}

.gap-5 {
	--gap: calc(var(--gutter) * 5 / 12);
}

.gutter-5 {
	--gap: calc(var(--gutter) * 5 / 12);
}

.gap-6 {
	--gap: calc(var(--gutter) * 6 / 12);
}

.gutter-6 {
	--gap: calc(var(--gutter) * 6 / 12);
}

.gap-7 {
	--gap: calc(var(--gutter) * 7 / 12);
}

.gutter-7 {
	--gap: calc(var(--gutter) * 7 / 12);
}

.gap-8 {
	--gap: calc(var(--gutter) * 8 / 12);
}

.gutter-8 {
	--gap: calc(var(--gutter) * 8 / 12);
}

.gap-9 {
	--gap: calc(var(--gutter) * 9 / 12);
}

.gutter-9 {
	--gap: calc(var(--gutter) * 9 / 12);
}

.gap-10 {
	--gap: calc(var(--gutter) * 10 / 12);
}

.gutter-10 {
	--gap: calc(var(--gutter) * 10 / 12);
}

.gap-11 {
	--gap: calc(var(--gutter) * 11 / 12);
}

.gutter-11 {
	--gap: calc(var(--gutter) * 11 / 12);
}

.gap-12 {
	--gap: calc(var(--gutter) * 12 / 12);
}

.gutter-12 {
	--gap: calc(var(--gutter) * 12 / 12);
}

@media (min-width: 540px) {
	.text-sm-start {
		text-align: start;
	}

	.text-sm-center {
		text-align: center;
	}

	.text-sm-end {
		text-align: end;
	}

	.text-sm-justify {
		text-align: justify;
	}

	.d-sm-flex {
		display: flex !important;
	}

	.d-sm-none {
		display: none !important;
	}

	.d-sm-block {
		display: block !important;
	}

	.d-sm-inline {
		display: inline !important;
	}

	.d-sm-inline-block {
		display: inline-block !important;
	}

	.justify-sm-start {
		justify-content: flex-start;
	}

	.justify-sm-end {
		justify-content: flex-end;
	}

	.justify-sm-center {
		justify-content: center;
	}

	.justify-sm-between {
		justify-content: space-between;
	}

	.align-sm-start {
		align-items: flex-start;
	}

	.align-sm-end {
		align-items: flex-end;
	}

	.align-sm-center {
		align-items: center;
	}

	.m-sm-auto {
		margin: auto;
	}

	.mb-sm-auto {
		margin-block: auto;
	}

	.mbs-sm-auto {
		margin-block-start: auto;
	}

	.mbe-sm-auto {
		margin-block-end: auto;
	}

	.mi-sm-auto {
		margin-inline: auto;
	}

	.mis-sm-auto {
		margin-inline-start: auto;
	}

	.mie-sm-auto {
		margin-inline-end: auto;
	}

	.p-sm-auto {
		padding: auto;
	}

	.pb-sm-auto {
		padding-block: auto;
	}

	.pbs-sm-auto {
		padding-block-start: auto;
	}

	.pbe-sm-auto {
		padding-block-end: auto;
	}

	.pi-sm-auto {
		padding-inline: auto;
	}

	.pis-sm-auto {
		padding-inline-start: auto;
	}

	.pie-sm-auto {
		padding-inline-end: auto;
	}

	.flex-sm-row {
		flex-direction: row;
	}

	.flex-sm-row-reverse {
		flex-direction: row-reverse;
	}

	.flex-sm-column {
		flex-direction: column;
	}

	.flex-sm-column-reverse {
		flex-direction: column-reverse;
	}

	.gap-sm-none {
		--gap: 0;
	}

	.gutter-sm-none {
		--gap: 0;
	}

	.gap-sm-1 {
		--gap: calc(var(--gutter) * 1 / 12);
	}

	.gutter-sm-1 {
		--gap: calc(var(--gutter) * 1 / 12);
	}

	.gap-sm-2 {
		--gap: calc(var(--gutter) * 2 / 12);
	}

	.gutter-sm-2 {
		--gap: calc(var(--gutter) * 2 / 12);
	}

	.gap-sm-3 {
		--gap: calc(var(--gutter) * 3 / 12);
	}

	.gutter-sm-3 {
		--gap: calc(var(--gutter) * 3 / 12);
	}

	.gap-sm-4 {
		--gap: calc(var(--gutter) * 4 / 12);
	}

	.gutter-sm-4 {
		--gap: calc(var(--gutter) * 4 / 12);
	}

	.gap-sm-5 {
		--gap: calc(var(--gutter) * 5 / 12);
	}

	.gutter-sm-5 {
		--gap: calc(var(--gutter) * 5 / 12);
	}

	.gap-sm-6 {
		--gap: calc(var(--gutter) * 6 / 12);
	}

	.gutter-sm-6 {
		--gap: calc(var(--gutter) * 6 / 12);
	}

	.gap-sm-7 {
		--gap: calc(var(--gutter) * 7 / 12);
	}

	.gutter-sm-7 {
		--gap: calc(var(--gutter) * 7 / 12);
	}

	.gap-sm-8 {
		--gap: calc(var(--gutter) * 8 / 12);
	}

	.gutter-sm-8 {
		--gap: calc(var(--gutter) * 8 / 12);
	}

	.gap-sm-9 {
		--gap: calc(var(--gutter) * 9 / 12);
	}

	.gutter-sm-9 {
		--gap: calc(var(--gutter) * 9 / 12);
	}

	.gap-sm-10 {
		--gap: calc(var(--gutter) * 10 / 12);
	}

	.gutter-sm-10 {
		--gap: calc(var(--gutter) * 10 / 12);
	}

	.gap-sm-11 {
		--gap: calc(var(--gutter) * 11 / 12);
	}

	.gutter-sm-11 {
		--gap: calc(var(--gutter) * 11 / 12);
	}

	.gap-sm-12 {
		--gap: calc(var(--gutter) * 12 / 12);
	}

	.gutter-sm-12 {
		--gap: calc(var(--gutter) * 12 / 12);
	}
}

@media (min-width: 744px) {
	.text-md-start {
		text-align: start;
	}

	.text-md-center {
		text-align: center;
	}

	.text-md-end {
		text-align: end;
	}

	.text-md-justify {
		text-align: justify;
	}

	.d-md-flex {
		display: flex !important;
	}

	.d-md-none {
		display: none !important;
	}

	.d-md-block {
		display: block !important;
	}

	.d-md-inline {
		display: inline !important;
	}

	.d-md-inline-block {
		display: inline-block !important;
	}

	.justify-md-start {
		justify-content: flex-start;
	}

	.justify-md-end {
		justify-content: flex-end;
	}

	.justify-md-center {
		justify-content: center;
	}

	.justify-md-between {
		justify-content: space-between;
	}

	.align-md-start {
		align-items: flex-start;
	}

	.align-md-end {
		align-items: flex-end;
	}

	.align-md-center {
		align-items: center;
	}

	.m-md-auto {
		margin: auto;
	}

	.mb-md-auto {
		margin-block: auto;
	}

	.mbs-md-auto {
		margin-block-start: auto;
	}

	.mbe-md-auto {
		margin-block-end: auto;
	}

	.mi-md-auto {
		margin-inline: auto;
	}

	.mis-md-auto {
		margin-inline-start: auto;
	}

	.mie-md-auto {
		margin-inline-end: auto;
	}

	.p-md-auto {
		padding: auto;
	}

	.pb-md-auto {
		padding-block: auto;
	}

	.pbs-md-auto {
		padding-block-start: auto;
	}

	.pbe-md-auto {
		padding-block-end: auto;
	}

	.pi-md-auto {
		padding-inline: auto;
	}

	.pis-md-auto {
		padding-inline-start: auto;
	}

	.pie-md-auto {
		padding-inline-end: auto;
	}

	.flex-md-row {
		flex-direction: row;
	}

	.flex-md-row-reverse {
		flex-direction: row-reverse;
	}

	.flex-md-column {
		flex-direction: column;
	}

	.flex-md-column-reverse {
		flex-direction: column-reverse;
	}

	.gap-md-none {
		--gap: 0;
	}

	.gutter-md-none {
		--gap: 0;
	}

	.gap-md-1 {
		--gap: calc(var(--gutter) * 1 / 12);
	}

	.gutter-md-1 {
		--gap: calc(var(--gutter) * 1 / 12);
	}

	.gap-md-2 {
		--gap: calc(var(--gutter) * 2 / 12);
	}

	.gutter-md-2 {
		--gap: calc(var(--gutter) * 2 / 12);
	}

	.gap-md-3 {
		--gap: calc(var(--gutter) * 3 / 12);
	}

	.gutter-md-3 {
		--gap: calc(var(--gutter) * 3 / 12);
	}

	.gap-md-4 {
		--gap: calc(var(--gutter) * 4 / 12);
	}

	.gutter-md-4 {
		--gap: calc(var(--gutter) * 4 / 12);
	}

	.gap-md-5 {
		--gap: calc(var(--gutter) * 5 / 12);
	}

	.gutter-md-5 {
		--gap: calc(var(--gutter) * 5 / 12);
	}

	.gap-md-6 {
		--gap: calc(var(--gutter) * 6 / 12);
	}

	.gutter-md-6 {
		--gap: calc(var(--gutter) * 6 / 12);
	}

	.gap-md-7 {
		--gap: calc(var(--gutter) * 7 / 12);
	}

	.gutter-md-7 {
		--gap: calc(var(--gutter) * 7 / 12);
	}

	.gap-md-8 {
		--gap: calc(var(--gutter) * 8 / 12);
	}

	.gutter-md-8 {
		--gap: calc(var(--gutter) * 8 / 12);
	}

	.gap-md-9 {
		--gap: calc(var(--gutter) * 9 / 12);
	}

	.gutter-md-9 {
		--gap: calc(var(--gutter) * 9 / 12);
	}

	.gap-md-10 {
		--gap: calc(var(--gutter) * 10 / 12);
	}

	.gutter-md-10 {
		--gap: calc(var(--gutter) * 10 / 12);
	}

	.gap-md-11 {
		--gap: calc(var(--gutter) * 11 / 12);
	}

	.gutter-md-11 {
		--gap: calc(var(--gutter) * 11 / 12);
	}

	.gap-md-12 {
		--gap: calc(var(--gutter) * 12 / 12);
	}

	.gutter-md-12 {
		--gap: calc(var(--gutter) * 12 / 12);
	}
}

@media (min-width: 960px) {
	.text-lg-start {
		text-align: start;
	}

	.text-lg-center {
		text-align: center;
	}

	.text-lg-end {
		text-align: end;
	}

	.text-lg-justify {
		text-align: justify;
	}

	.d-lg-flex {
		display: flex !important;
	}

	.d-lg-none {
		display: none !important;
	}

	.d-lg-block {
		display: block !important;
	}

	.d-lg-inline {
		display: inline !important;
	}

	.d-lg-inline-block {
		display: inline-block !important;
	}

	.justify-lg-start {
		justify-content: flex-start;
	}

	.justify-lg-end {
		justify-content: flex-end;
	}

	.justify-lg-center {
		justify-content: center;
	}

	.justify-lg-between {
		justify-content: space-between;
	}

	.align-lg-start {
		align-items: flex-start;
	}

	.align-lg-end {
		align-items: flex-end;
	}

	.align-lg-center {
		align-items: center;
	}

	.m-lg-auto {
		margin: auto;
	}

	.mb-lg-auto {
		margin-block: auto;
	}

	.mbs-lg-auto {
		margin-block-start: auto;
	}

	.mbe-lg-auto {
		margin-block-end: auto;
	}

	.mi-lg-auto {
		margin-inline: auto;
	}

	.mis-lg-auto {
		margin-inline-start: auto;
	}

	.mie-lg-auto {
		margin-inline-end: auto;
	}

	.p-lg-auto {
		padding: auto;
	}

	.pb-lg-auto {
		padding-block: auto;
	}

	.pbs-lg-auto {
		padding-block-start: auto;
	}

	.pbe-lg-auto {
		padding-block-end: auto;
	}

	.pi-lg-auto {
		padding-inline: auto;
	}

	.pis-lg-auto {
		padding-inline-start: auto;
	}

	.pie-lg-auto {
		padding-inline-end: auto;
	}

	.flex-lg-row {
		flex-direction: row;
	}

	.flex-lg-row-reverse {
		flex-direction: row-reverse;
	}

	.flex-lg-column {
		flex-direction: column;
	}

	.flex-lg-column-reverse {
		flex-direction: column-reverse;
	}

	.gap-lg-none {
		--gap: 0;
	}

	.gutter-lg-none {
		--gap: 0;
	}

	.gap-lg-1 {
		--gap: calc(var(--gutter) * 1 / 12);
	}

	.gutter-lg-1 {
		--gap: calc(var(--gutter) * 1 / 12);
	}

	.gap-lg-2 {
		--gap: calc(var(--gutter) * 2 / 12);
	}

	.gutter-lg-2 {
		--gap: calc(var(--gutter) * 2 / 12);
	}

	.gap-lg-3 {
		--gap: calc(var(--gutter) * 3 / 12);
	}

	.gutter-lg-3 {
		--gap: calc(var(--gutter) * 3 / 12);
	}

	.gap-lg-4 {
		--gap: calc(var(--gutter) * 4 / 12);
	}

	.gutter-lg-4 {
		--gap: calc(var(--gutter) * 4 / 12);
	}

	.gap-lg-5 {
		--gap: calc(var(--gutter) * 5 / 12);
	}

	.gutter-lg-5 {
		--gap: calc(var(--gutter) * 5 / 12);
	}

	.gap-lg-6 {
		--gap: calc(var(--gutter) * 6 / 12);
	}

	.gutter-lg-6 {
		--gap: calc(var(--gutter) * 6 / 12);
	}

	.gap-lg-7 {
		--gap: calc(var(--gutter) * 7 / 12);
	}

	.gutter-lg-7 {
		--gap: calc(var(--gutter) * 7 / 12);
	}

	.gap-lg-8 {
		--gap: calc(var(--gutter) * 8 / 12);
	}

	.gutter-lg-8 {
		--gap: calc(var(--gutter) * 8 / 12);
	}

	.gap-lg-9 {
		--gap: calc(var(--gutter) * 9 / 12);
	}

	.gutter-lg-9 {
		--gap: calc(var(--gutter) * 9 / 12);
	}

	.gap-lg-10 {
		--gap: calc(var(--gutter) * 10 / 12);
	}

	.gutter-lg-10 {
		--gap: calc(var(--gutter) * 10 / 12);
	}

	.gap-lg-11 {
		--gap: calc(var(--gutter) * 11 / 12);
	}

	.gutter-lg-11 {
		--gap: calc(var(--gutter) * 11 / 12);
	}

	.gap-lg-12 {
		--gap: calc(var(--gutter) * 12 / 12);
	}

	.gutter-lg-12 {
		--gap: calc(var(--gutter) * 12 / 12);
	}
}

@media (min-width: 1260px) {
	.text-xl-start {
		text-align: start;
	}

	.text-xl-center {
		text-align: center;
	}

	.text-xl-end {
		text-align: end;
	}

	.text-xl-justify {
		text-align: justify;
	}

	.d-xl-flex {
		display: flex !important;
	}

	.d-xl-none {
		display: none !important;
	}

	.d-xl-block {
		display: block !important;
	}

	.d-xl-inline {
		display: inline !important;
	}

	.d-xl-inline-block {
		display: inline-block !important;
	}

	.justify-xl-start {
		justify-content: flex-start;
	}

	.justify-xl-end {
		justify-content: flex-end;
	}

	.justify-xl-center {
		justify-content: center;
	}

	.justify-xl-between {
		justify-content: space-between;
	}

	.align-xl-start {
		align-items: flex-start;
	}

	.align-xl-end {
		align-items: flex-end;
	}

	.align-xl-center {
		align-items: center;
	}

	.m-xl-auto {
		margin: auto;
	}

	.mb-xl-auto {
		margin-block: auto;
	}

	.mbs-xl-auto {
		margin-block-start: auto;
	}

	.mbe-xl-auto {
		margin-block-end: auto;
	}

	.mi-xl-auto {
		margin-inline: auto;
	}

	.mis-xl-auto {
		margin-inline-start: auto;
	}

	.mie-xl-auto {
		margin-inline-end: auto;
	}

	.p-xl-auto {
		padding: auto;
	}

	.pb-xl-auto {
		padding-block: auto;
	}

	.pbs-xl-auto {
		padding-block-start: auto;
	}

	.pbe-xl-auto {
		padding-block-end: auto;
	}

	.pi-xl-auto {
		padding-inline: auto;
	}

	.pis-xl-auto {
		padding-inline-start: auto;
	}

	.pie-xl-auto {
		padding-inline-end: auto;
	}

	.flex-xl-row {
		flex-direction: row;
	}

	.flex-xl-row-reverse {
		flex-direction: row-reverse;
	}

	.flex-xl-column {
		flex-direction: column;
	}

	.flex-xl-column-reverse {
		flex-direction: column-reverse;
	}

	.gap-xl-none {
		--gap: 0;
	}

	.gutter-xl-none {
		--gap: 0;
	}

	.gap-xl-1 {
		--gap: calc(var(--gutter) * 1 / 12);
	}

	.gutter-xl-1 {
		--gap: calc(var(--gutter) * 1 / 12);
	}

	.gap-xl-2 {
		--gap: calc(var(--gutter) * 2 / 12);
	}

	.gutter-xl-2 {
		--gap: calc(var(--gutter) * 2 / 12);
	}

	.gap-xl-3 {
		--gap: calc(var(--gutter) * 3 / 12);
	}

	.gutter-xl-3 {
		--gap: calc(var(--gutter) * 3 / 12);
	}

	.gap-xl-4 {
		--gap: calc(var(--gutter) * 4 / 12);
	}

	.gutter-xl-4 {
		--gap: calc(var(--gutter) * 4 / 12);
	}

	.gap-xl-5 {
		--gap: calc(var(--gutter) * 5 / 12);
	}

	.gutter-xl-5 {
		--gap: calc(var(--gutter) * 5 / 12);
	}

	.gap-xl-6 {
		--gap: calc(var(--gutter) * 6 / 12);
	}

	.gutter-xl-6 {
		--gap: calc(var(--gutter) * 6 / 12);
	}

	.gap-xl-7 {
		--gap: calc(var(--gutter) * 7 / 12);
	}

	.gutter-xl-7 {
		--gap: calc(var(--gutter) * 7 / 12);
	}

	.gap-xl-8 {
		--gap: calc(var(--gutter) * 8 / 12);
	}

	.gutter-xl-8 {
		--gap: calc(var(--gutter) * 8 / 12);
	}

	.gap-xl-9 {
		--gap: calc(var(--gutter) * 9 / 12);
	}

	.gutter-xl-9 {
		--gap: calc(var(--gutter) * 9 / 12);
	}

	.gap-xl-10 {
		--gap: calc(var(--gutter) * 10 / 12);
	}

	.gutter-xl-10 {
		--gap: calc(var(--gutter) * 10 / 12);
	}

	.gap-xl-11 {
		--gap: calc(var(--gutter) * 11 / 12);
	}

	.gutter-xl-11 {
		--gap: calc(var(--gutter) * 11 / 12);
	}

	.gap-xl-12 {
		--gap: calc(var(--gutter) * 12 / 12);
	}

	.gutter-xl-12 {
		--gap: calc(var(--gutter) * 12 / 12);
	}
}

/* frame spaces */
.space-before-extra-small {
	margin-block-start: calc(var(--gutter) * 1);
}

.space-before-small {
	margin-block-start: calc(var(--gutter) * 2);
}

.space-before-medium {
	margin-block-start: calc(var(--gutter) * 3);
}

.space-before-large {
	margin-block-start: calc(var(--gutter) * 4);
}

.space-before-extra-large {
	margin-block-start: calc(var(--gutter) * 5);
}

.space-after-extra-small {
	margin-block-end: calc(var(--gutter) * 1);
}

.space-after-small {
	margin-block-end: calc(var(--gutter) * 2);
}

.space-after-medium {
	margin-block-end: calc(var(--gutter) * 3);
}

.space-after-large {
	margin-block-end: calc(var(--gutter) * 4);
}

.space-after-extra-large {
	margin-block-end: calc(var(--gutter) * 5);
}

[class*="space-before-"] > hr {
	margin-block-start: unset;
}

[class*="space-after-"] > hr {
	margin-block-end: unset;
}

}