*,
*:after,
*:before {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	display: flex;
	flex-direction: column;
}

.page-wrapper {
	flex: 1;
}

.content-wrapper {
	width: 90%;
	/* padding: 0 clamp(10px, 6vw, 120px); */
	margin: 0 auto;
}

.row {
	margin: 0 auto;
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
}

.col {
	position: relative;
	max-width: 100%;
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	flex: 1 1 0px;
	justify-content: start;
	align-items: flex-start;
	align-content: flex-start;
}

.col {
	flex: var(--span);
}

@media screen and (max-width: 1240px) {
	.col {
		flex: var(--mobile-span, var(--span));
	}
}

@media screen and (max-width: 880px) {
	.row-3-3-3-3 .col-3 {
		/* remove half the row gap */
		flex: 0 0 calc(50% - (2rem / 2));
	}
}

@media screen and (max-width: 500px) {
	.row-3-3-3-3 .col-3 {
		flex: 0 0 100%;
	}
}

/* @media screen and (min-width: 800px) {
  .col{
    flex: var(--span)
  }
} */

.block {
	width: 100%;
	height: fit-content;
}

.block {
	margin-bottom: 1rem;
}

.block:last-child() {
	margin-bottom: 0rem;
}

section {
	overflow-x: hidden;
}

section:not(.bordered) .block {
	margin-bottom: 1rem;
}

/* Section width classes */
.section-width-full .content-wrapper {
	max-width: 100%;
	width: 100%;
}

.section-width-default .content-wrapper {
	max-width: 1487px;
	margin: 0 auto;
}

.section-width-narrow .content-wrapper {
	max-width: 1235px;
	margin: 0 auto;
}

.section-width-extranarrow .content-wrapper {
	max-width: 1024px;
	margin: 0 auto;
}

@media screen and (min-width: 1707px) {
	/* max-content + 2 times padding  */
	/* we dont need padding anymore, the screen is bigger than max content */
	.content-wrapper {
		padding: 0;
	}
}

/* margin and padding: none */
.top-margin-none {
	margin-top: 0;
}
.top-padding-none {
	padding-top: 0;
}
.bottom-margin-none {
	margin-bottom: 0;
}
.bottom-padding-none {
	padding-bottom: 0;
}

/* margin and padding: default */
.top-margin-default {
	margin-top: 5vw;
}
.bottom-margin-default {
	margin-bottom: 5vw;
}
.top-padding-default {
	padding-top: 1rem;
}
.bottom-padding-default {
	padding-bottom: 1rem;
}

/* For custom spacing, inline styles will be applied directly to the section element */