body, html{
	margin: 0px;
	padding: 0px;
	/* overscroll-behavior: none; */
	background: var(--bg);
}

body{
	font-size: 15px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

:root{
	--padding: min(16px, var(--base-padding));
	--gap: min(16px, var(--base-gap));
}

* {
	box-sizing: border-box;
}

.background{
	/* scroll-snap-type: x mandatory; */
	position: relative;
	background: var(--bg)
}

main{
	max-width: var(--max-w);
	padding-left: var(--padding);
	padding-right: var(--padding);
}

main::after{
	content: "";
    display: block;
    width: var(--padding);
    margin-left: calc(-1* var(--gap));
    margin-top: calc(-1* var(--gap));
    flex-shrink: 0;
    pointer-events: none;
}

main.centered{
	margin: auto;
}

.swipe{
	display: flex;
	position: relative;
	gap: var(--gap);
}

.stack{
	display: flex;
	position: relative;
	flex-direction: column;
	gap: var(--gap);
}

.outer{
	container-type: inline-size;
	max-width: 100%;
	min-width: 100%;
	scroll-snap-align: center;
	top: 0px;
	padding: var(--padding) 0px;
}

.stack .outer{
	margin-bottom: calc(-2 * var(--padding));
}

.scroll-lock{
	overscroll-behavior-y: contain;
	position: relative,
}

.column{
	flex-direction: column;
	min-height: 100%;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	container-type: inline-size;
	align-content: start;
	gap: var(--gap);
}

.span-1 {
	grid-column: span 6;
	width: 100%;
}
.span-1_2 {
	grid-column: span 6;
	width: 100%;
}
.span-1_3 {
	grid-column: span 6;
	width: 100%;
}
.span-2_3 {
	grid-column: span 6;
	width: 100%;
}

.square{
	aspect-ratio: 1 / 1;
	overflow: auto;
	align-self: start;
}

@container (width > 400px) {

	.span-1 {
		grid-column: span 6;
	}
	.span-1_2 {
		grid-column: span 3;
	}
	.span-1_3 {
		grid-column: span 2;
	}
	.span-2_3 {
		grid-column: span 4;
	}
}

@container (width < 400px) {
	.column {
		column-gap: 0px !important;
	}
}

@media (min-width: 500px){

	body{
		font-size: 16px;
	}

	:root{
		--padding: min(32px, var(--base-padding));
		--gap: min(24px, var(--base-gap));
	}
}

@media (min-width: 800px) {

	:root{
		--padding: var(--base-padding);
		--gap: var(--base-gap);
	}

	.background{
		height: 100dvh;
		overflow: auto;
	}

	.swipe{
		display: flex;
		position: relative;
	}
	
	.stack{
		display: flex;
		position: relative;
		flex-direction: row;
	}

	.stack .outer{
		margin-bottom: unset;
	}

	.has-width{
		flex-grow: 0;
		flex-shrink: 0;
	}

	.scroll-lock{
		overscroll-behavior-y: contain;
		position: sticky;
		max-height: 100dvh;
		overflow: auto;
	}

	main{
		padding-right: 0px;
	}

	.outer {
		min-width: unset;
	}
}