/*
	NOTE: DO NOT CHANGE THIS FILE, THIS IS A GENERIC STYLESHEET WHICH MUST BE LOADED BEFORE REST OF YOUR STYLESHEETS
	THIS IS A UTILITY STYLESHEET WHICH HAS THE FOLLOWING:
		- GRID SYSTEM
		- TEXT ALIGNMENTS
		- ICON MEASUREMENTS/SIZES
		- IMAGE MEASUREMENTS/SIZES
		- HEADING/HEADLINE TEXT STYLES
		- BASIC CAROUSEL
*/

:root {
	--grid-gap: 2.4rem;
	--grid-1: repeat(auto-fit, minmax(calc(100% / 1 - var(--grid-gap)), 1fr));
	--grid-2: repeat(auto-fit, minmax(calc(100% / 2 - var(--grid-gap)), 1fr));
	--grid-3: repeat(auto-fit, minmax(calc(100% / 3 - var(--grid-gap)), 1fr));
	--grid-4: repeat(auto-fit, minmax(calc(100% / 4 - var(--grid-gap)), 1fr));
	--grid-5: repeat(auto-fit, minmax(calc(100% / 5 - var(--grid-gap)), 1fr));
	--grid-6: repeat(auto-fit, minmax(calc(100% / 6 - var(--grid-gap)), 1fr));
	--grid-7: repeat(auto-fit, minmax(calc(100% / 7 - var(--grid-gap)), 1fr));
	--grid-8: repeat(auto-fit, minmax(calc(100% / 8 - var(--grid-gap)), 1fr));
	--grid-9: repeat(auto-fit, minmax(calc(100% / 9 - var(--grid-gap)), 1fr));
	--grid-10: repeat(auto-fit, minmax(calc(100% / 10 - var(--grid-gap)), 1fr));
	--grid-11: repeat(auto-fit, minmax(calc(100% / 11 - var(--grid-gap)), 1fr));
	--grid-12: repeat(auto-fit, minmax(calc(100% / 12 - var(--grid-gap)), 1fr));
	--grid-cell-1: span 1 / auto;
	--grid-cell-2: span 2 / auto;
	--grid-cell-3: span 3 / auto;
	--grid-cell-4: span 4 / auto;
	--grid-cell-5: span 5 / auto;
	--grid-cell-6: span 6 / auto;
	--grid-cell-7: span 7 / auto;
	--grid-cell-8: span 8 / auto;
	--grid-cell-9: span 9 / auto;
	--grid-cell-10: span 10 / auto;
	--grid-cell-11: span 11 / auto;
	--grid-cell-12: span 12 / auto;
}

/* ~~~~~~~~~~~~~~~~~~~~ ALIGNMENTS ~~~~~~~~~~~~~~~~~~~~ */

.align--baseline {
	vertical-align: baseline;
}

.align--top {
	vertical-align: top;
}

.align--middle {
	vertical-align: middle;
}

.align--bottom {
	vertical-align: bottom;
}

.align--text-top {
	vertical-align: text-top;
}

.align--text-bottom {
	vertical-align: text-bottom;
}

/* ~~~~~~~~~~~~~~~~~~~~ ICON ~~~~~~~~~~~~~~~~~~~~ */

.icon {
	width: 100%;
	height: auto;
	padding: 0.4rem;
	justify-content: center;
	align-items: center;
	display: inline-flex;
}
.icon::before {
	width: 100%;
	height: auto;
	text-align: center;
}
.icon--xs {
	height: 1.6rem;
	width: 1.6rem;
	font-size: 1.2rem;
}
.icon--sm {
	height: 2.4rem;
	width: 1.6rem;
}
.icon--md {
	height: 3.2rem;
	width: 3.2rem;
	font-size: 2rem;
}
.icon--lg {
	height: 4.8rem;
	width: 4.8rem;
	font-size: 2.6rem;
}
.icon--xl {
	height: 5.6rem;
	width: 5.6rem;
	font-size: 3.2rem;
}
.icon--xxl {
	height: 7.2rem;
	width: 7.2rem;
	font-size: 4.8rem;
}

/* ~~~~~~~~~~~~~~~~~~~~ ACCORDION  ~~~~~~~~~~~~~~~~~~~~ */
.accordion__item,
.accordion__header,
.accordion__icon {
	transition: 0.25s;
	transition-timing-function: ease-in-out;
}


/* ~~~~~~~~~~~~~~~~~~~~ CAROUSEL  ~~~~~~~~~~~~~~~~~~~~ */

.carousel {
	display: block;
	position: relative;
	width: 100%;
	max-width: 100%;
	height: auto;
	z-index: 0;
}
.carousel .carousel__list {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
}
.carousel .carousel__item {
	display: block;
	position: relative;
	width: 100%;
}
.carousel .carousel__overlay {
	position: absolute;
	top: 3.2rem;
	right: 7.2rem;
	z-index: 9;
	color: var(--white-color);
	padding: 3.2rem;
	width: 48rem;
	background: rgba(0, 0, 0, 0.75);
	border-radius: 0.8rem;
	box-shadow: 0 0 1.6rem rgba(0, 0, 0, 0.25);
}
.carousel .carousel__image {
	width: 100%;
	height: auto;
	max-width: 100%;
	margin: 0;
	position: relative;
	z-index: 0;
	object-fit: cover;
}
.carousel .carousel__title {
	font-size: 2.4rem;
	line-height: 3.2rem;
	margin-bottom: 1.6rem;
}
.carousel .carousel__description {
	font-size: 1.6rem;
	line-height: 2.4rem;
	margin-bottom: 2.4rem;
}
.carousel .carousel__button__group {
	display: flex;
	flex-direction: row;
	padding: 0;
	gap: 1.6rem;
}
.carousel .carousel__button {
	background-color: var(--grey-color-100);
	color: var(--black-color);
	font-weight: 600;
	padding: 0 1.6rem;
	height: 4rem;
	line-height: 4rem;
	border-radius: 0.4rem;
	box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
	display: inline-flex;
}
.carousel .carousel__button:hover {
	background-color: var(--white-color);
	color: var(--black-color);
}
.carousel .carousel__action {
	width: 5.6rem;
	height: 100%;
	color: var(--white-color);
	position: absolute;
	top: 0;
	z-index: 99;
}
.carousel .carousel__action:hover {
	background-color: rgba(0, 0, 0, 0.1);
}
.carousel .carousel__prev {
	left: 0;
}
.carousel .carousel__next {
	right: 0;
}

@media (max-width: 991px) {
	.carousel .carousel__overlay {
		width: calc(100% - (7.2rem * 2));
	}
	.carousel .carousel__item,
	.carousel .carousel__image {
		min-height: 36rem;
	}
}
@media (max-width: 767px) {
	.carousel .carousel__item,
	.carousel .carousel__image {
		min-height: unset;
	}
	.carousel .carousel__item {
		height: 100%;
	}
	.carousel .carousel__overlay {
		position: relative;
		top: auto;
		right: auto;
		border-radius: 0;
		width: 100%;
		padding-left: 7.2rem;
		padding-right: 7.2rem;
		background-color: var(--grey-color-800);
		min-height: 40rem;
	}
	.carousel .carousel__button__group {
		flex-direction: column;
	}
	.carousel .carousel__button {
		display: flex;
		height: 4.8rem;
		line-height: 4.8rem;
		text-align: center;
		justify-content: center;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~ NAV ~~~~~~~~~~~~~~~~~~~~ */

.nav {
	display: flex;
	/* flex-wrap: nowrap; */
	position: relative;
}
.nav--horizontal {
	flex-direction: row;
	flex-wrap: wrap;
	height: inherit;
}
.nav--vertical {
	flex-direction: column;
}
.nav__item,
.nav__item a {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.nav__item a {
	text-decoration: none;
	color: inherit;
	position: relative;
	height: 100%;
	line-height: 2.4rem;
	padding: 0.8rem 1.6rem;
	white-space: nowrap;
	word-break: break-word;
}
.nav__item:hover a,
.nav__item:focus a {
	background-color: var(--black-color);
	color: var(--white-color);
}
.nav__item--active a {
	background-color: var(--grey-color-100);
	color: var(--black-color);
}

.nav--vertical .nav__item {
	height: auto;
	flex: 1;
	width: 100%;
}
.nav--vertical .nav__item a {
	flex: 1;
	width: 100%;
	white-space: normal;
}

/* ~~~~~~~~~~~~~~~~~~~~ CARD ~~~~~~~~~~~~~~~~~~~~ */
.card {
	position: relative;
}
.card__section {
	position: relative;
}
.card__section__title {
	font-size: 3.2rem;
	line-height: 4.8rem;
	margin-bottom: 3.2rem;
	color: var(--black-color);
	font-weight: 700;
}
.card__list {
	position: relative;
	width: 100%;
	padding: 0.8rem;
}
.card__item {
	background-color: var(--white-color);
	box-shadow: 0 0.2rem 1.6rem var(--grey-color-200);
	border-radius: 0.8rem;
	padding: 3.2rem 3.2rem 1.6rem;
	margin-bottom: 1.6rem;
	width: 100%;
}
.card__item--clickable {
	justify-content: center;
	align-items: center;
	display: inline-flex;
	padding: 0;
}
.card__item--clickable:hover {
	transition: all 0.1s ease-out;
	transform: scale(102%);
}
.card__list > .grid__cell > .card__item {
	height: 100%;
	margin: 0;
}
.card__title {
	font-size: 2.2rem;
	line-height: 2.8rem;
	margin-bottom: 1.6rem;
	color: var(--black-color);
	font-weight: 700;
}
.card__body {
	position: relative;
	line-height: 2rem;
}
.card__item--clickable .card__body {
	width: 100%;
}
.card__item--clickable .card__body > a {
	justify-content: center;
	align-items: center;
	display: flex;
	flex-direction: column;
	padding: 3.2rem 1.6rem;
}
.card__item--clickable .card__body > a:focus,
.card__item--clickable .card__body > a:hover {
	outline: none;
}
.card__body p {
	padding: 0;
	margin: 0 0 1.6rem;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
}
.card__body a {
	text-decoration: underline;
}
.card__body ul {
	list-style: disc;
	padding: 0 3.2rem;
	margin-bottom: 1.6rem;
}
.card__body__title {
	text-align: center;
	margin: 1.6rem 0;
	text-transform: uppercase;
	line-height: 2rem;
}
.card__button {
	background-color: var(--grey-color-800);
	color: var(--white-color);
	font-weight: 600;
	padding: 0 1.6rem;
	height: 4rem;
	line-height: 4rem;
	border-radius: 0.4rem;
	box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
	display: inline-flex;
	margin-bottom: 1.6rem;
}
.card__button:hover {
	background-color: var(--black-color);
	color: var(--white-color);
}

/* ~~~~~~~~~~~~~~~~~~~~ DRAWER ~~~~~~~~~~~~~~~~~~~~ */

.drawer {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}
.drawer__overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	background-color: rgba(0, 0, 0, 0.75);
	width: 100vw;
	height: 100vh;
}
.drawer__container {
	background: var(--white-color);
	width: 25vh;
	min-width: 32rem;
	height: 100vh;
	position: relative;
	z-index: 9999;
	padding: 2.4rem 3.2rem;
	overflow: hidden auto;
}
.drawer__header {
	padding: 0;
	margin-bottom: 3.2rem;
}
.drawer__body {
	padding: 0;
}
.drawer__toggle {
	width: 7.2rem;
	height: 7.2rem;
	position: absolute;
	top: -2.4rem;
	right: -2.4rem;
}
.drawer__toggle:hover {
	background-color: var(--grey-color-50);
}

/* ~~~~~~~~~~~~~~~~~~~~ CONTAINER  ~~~~~~~~~~~~~~~~~~~~ */
.container {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

/* ~~~~~~~~~~~~~~~~~~~~ PADDING  ~~~~~~~~~~~~~~~~~~~~ */
/* .padding {}
.padding--xs {}
.padding--sm {}
.padding--md {}
.padding--lg {}
.padding--xxl {} */

/* ~~~~~~~~~~~~~~~~~~~~ DISPLAY  ~~~~~~~~~~~~~~~~~~~~ */
.display--flex {
	display: flex;
}
.display--flex-wrap {
	display: flex;
	flex-wrap: wrap;
}
.display--flex-no-wrap {
	display: flex;
	flex-wrap: nowrap;
}

/* ~~~~~~~~~~~~~~~~~~~~ GRID ~~~~~~~~~~~~~~~~~~~~ */
/* TODO: To add support for auto-based columns, and change it with Bootstrap ones used within the header section */
.grid {
	display: grid;
	gap: var(--grid-gap);
	padding: calc(var(--grid-gap) * 1);
	position: relative;
	width: 100%;
	max-width: 100%;
}
.grid--no-gap {
	gap: 0;
}
.grid--no-padding {
	padding: 0;
}
.grid .grid__cell {
	position: relative;
}

/* ~~~~~~~~~~ ROW ~~~~~~~~~~ */
.grid.grid--row {
	display: flex;
	/* flex-wrap: wrap; */
}
.grid.grid--row > .grid__col {
	flex: 1 0 0%;
}
.grid.grid--row > .grid__col.grid__col--auto {
	flex: 0 0 auto;
	width: auto;
}

/* XS and larger */
@media (min-width: 0px) {
	.grid--xs-1 { grid-template-columns: var(--grid-1) }
	.grid--xs-2 { grid-template-columns: var(--grid-2) }
	.grid--xs-3 { grid-template-columns: var(--grid-3) }
	.grid--xs-4 { grid-template-columns: var(--grid-4) }
	.grid--xs-5 { grid-template-columns: var(--grid-5) }
	.grid--xs-6 { grid-template-columns: var(--grid-6) }
	.grid--xs-7 { grid-template-columns: var(--grid-7) }
	.grid--xs-8 { grid-template-columns: var(--grid-8) }
	.grid--xs-9 { grid-template-columns: var(--grid-9) }
	.grid--xs-10 { grid-template-columns: var(--grid-10) }
	.grid--xs-11 { grid-template-columns: var(--grid-11) }
	.grid--xs-12 { grid-template-columns: var(--grid-12) }

	/* Container */
	.container--fixed {
		max-width: none;
	}

	/* Row & Col */
	.grid.grid--row-xs {
		display: flex;
		flex-direction: row;
	}
	.grid.grid--col-xs {
		display: flex;
		flex-direction: column;
	}

	/* Cell size */
	.grid > .grid--xs-col-1 { grid-column: var(--grid-cell-1); }
	.grid > .grid--xs-col-2 { grid-column: var(--grid-cell-2); }
	.grid > .grid--xs-col-3 { grid-column: var(--grid-cell-3); }
	.grid > .grid--xs-col-4 { grid-column: var(--grid-cell-4); }
	.grid > .grid--xs-col-5 { grid-column: var(--grid-cell-5); }
	.grid > .grid--xs-col-6 { grid-column: var(--grid-cell-6); }
	.grid > .grid--xs-col-7 { grid-column: var(--grid-cell-7); }
	.grid > .grid--xs-col-8 { grid-column: var(--grid-cell-8); }
	.grid > .grid--xs-col-9 { grid-column: var(--grid-cell-9); }
	.grid > .grid--xs-col-10 { grid-column: var(--grid-cell-10); }
	.grid > .grid--xs-col-11 { grid-column: var(--grid-cell-11); }
	.grid > .grid--xs-col-12 { grid-column: var(--grid-cell-12); }

	/* Visibility */
	.hidden--xs { display: none; }
}
/* XS only */
@media (min-width: 0px) and (max-width: 575px) {
	.grid--xs-only-1 { grid-template-columns: var(--grid-1) }
	.grid--xs-only-2 { grid-template-columns: var(--grid-2) }
	.grid--xs-only-3 { grid-template-columns: var(--grid-3) }
	.grid--xs-only-4 { grid-template-columns: var(--grid-4) }
	.grid--xs-only-5 { grid-template-columns: var(--grid-5) }
	.grid--xs-only-6 { grid-template-columns: var(--grid-6) }
	.grid--xs-only-7 { grid-template-columns: var(--grid-7) }
	.grid--xs-only-8 { grid-template-columns: var(--grid-8) }
	.grid--xs-only-9 { grid-template-columns: var(--grid-9) }
	.grid--xs-only-10 { grid-template-columns: var(--grid-10) }
	.grid--xs-only-11 { grid-template-columns: var(--grid-11) }
	.grid--xs-only-12 { grid-template-columns: var(--grid-12) }

	/* Row & Col */
	.grid.grid--row-xs-only {
		display: flex;
		flex-direction: row;
	}
	.grid.grid--col-xs-only {
		display: flex;
		flex-direction: column;
	}

	/* Cell size */
	.grid > .grid--xs-only-col-1 { grid-column: var(--grid-cell-1); }
	.grid > .grid--xs-only-col-2 { grid-column: var(--grid-cell-2); }
	.grid > .grid--xs-only-col-3 { grid-column: var(--grid-cell-3); }
	.grid > .grid--xs-only-col-4 { grid-column: var(--grid-cell-4); }
	.grid > .grid--xs-only-col-5 { grid-column: var(--grid-cell-5); }
	.grid > .grid--xs-only-col-6 { grid-column: var(--grid-cell-6); }
	.grid > .grid--xs-only-col-7 { grid-column: var(--grid-cell-7); }
	.grid > .grid--xs-only-col-8 { grid-column: var(--grid-cell-8); }
	.grid > .grid--xs-only-col-9 { grid-column: var(--grid-cell-9); }
	.grid > .grid--xs-only-col-10 { grid-column: var(--grid-cell-10); }
	.grid > .grid--xs-only-col-11 { grid-column: var(--grid-cell-11); }
	.grid > .grid--xs-only-col-12 { grid-column: var(--grid-cell-12); }

	/* Visibility */
	.hidden--xs-only { display: none; }

	/* Positioning/Ordering */
	.grid--xs-only-order-1 { order: 1; }
	.grid--xs-only-order-2 { order: 2; }
	.grid--xs-only-order-3 { order: 3; }
	.grid--xs-only-order-4 { order: 4; }
	.grid--xs-only-order-5 { order: 5; }
	.grid--xs-only-order-6 { order: 6; }
	.grid--xs-only-order-7 { order: 7; }
	.grid--xs-only-order-8 { order: 8; }
	.grid--xs-only-order-9 { order: 9; }
	.grid--xs-only-order-10 { order: 10; }
	.grid--xs-only-order-11 { order: 11; }
	.grid--xs-only-order-12 { order: 12; }
	.grid--xs-only-order-first { order: -9999; }
	.grid--xs-only-order-last { order: 9999; }
	.grid--xs-only-order-none { order: none; }
}

/* SM and larger */
@media (min-width: 576px) {
	.grid--sm-1 { grid-template-columns: var(--grid-1) }
	.grid--sm-2 { grid-template-columns: var(--grid-2) }
	.grid--sm-3 { grid-template-columns: var(--grid-3) }
	.grid--sm-4 { grid-template-columns: var(--grid-4) }
	.grid--sm-5 { grid-template-columns: var(--grid-5) }
	.grid--sm-6 { grid-template-columns: var(--grid-6) }
	.grid--sm-7 { grid-template-columns: var(--grid-7) }
	.grid--sm-8 { grid-template-columns: var(--grid-8) }
	.grid--sm-9 { grid-template-columns: var(--grid-9) }
	.grid--sm-10 { grid-template-columns: var(--grid-10) }
	.grid--sm-11 { grid-template-columns: var(--grid-11) }
	.grid--sm-12 { grid-template-columns: var(--grid-12) }

	/* Container */
	.container--fixed {
		max-width: 54rem;
	}

	/* Row & Col */
	.grid.grid--row-sm {
		display: flex;
		flex-direction: row;
	}
	.grid.grid--col-sm {
		display: flex;
		flex-direction: column;
	}

	/* Cell size */
	.grid > .grid--sm-col-1 { grid-column: var(--grid-cell-1); }
	.grid > .grid--sm-col-2 { grid-column: var(--grid-cell-2); }
	.grid > .grid--sm-col-3 { grid-column: var(--grid-cell-3); }
	.grid > .grid--sm-col-4 { grid-column: var(--grid-cell-4); }
	.grid > .grid--sm-col-5 { grid-column: var(--grid-cell-5); }
	.grid > .grid--sm-col-6 { grid-column: var(--grid-cell-6); }
	.grid > .grid--sm-col-7 { grid-column: var(--grid-cell-7); }
	.grid > .grid--sm-col-8 { grid-column: var(--grid-cell-8); }
	.grid > .grid--sm-col-9 { grid-column: var(--grid-cell-9); }
	.grid > .grid--sm-col-10 { grid-column: var(--grid-cell-10); }
	.grid > .grid--sm-col-11 { grid-column: var(--grid-cell-11); }
	.grid > .grid--sm-col-12 { grid-column: var(--grid-cell-12); }

	/* Visibility */
	.hidden--sm { display: none; }
}
/* SM only */
@media (min-width: 576px) and (max-width: 767px) {
	.grid--sm-only-1 { grid-template-columns: var(--grid-1) }
	.grid--sm-only-2 { grid-template-columns: var(--grid-2) }
	.grid--sm-only-3 { grid-template-columns: var(--grid-3) }
	.grid--sm-only-4 { grid-template-columns: var(--grid-4) }
	.grid--sm-only-5 { grid-template-columns: var(--grid-5) }
	.grid--sm-only-6 { grid-template-columns: var(--grid-6) }
	.grid--sm-only-7 { grid-template-columns: var(--grid-7) }
	.grid--sm-only-8 { grid-template-columns: var(--grid-8) }
	.grid--sm-only-9 { grid-template-columns: var(--grid-9) }
	.grid--sm-only-10 { grid-template-columns: var(--grid-10) }
	.grid--sm-only-11 { grid-template-columns: var(--grid-11) }
	.grid--sm-only-12 { grid-template-columns: var(--grid-12) }

	/* Row & Col */
	.grid.grid--row-sm-only {
		display: flex;
		flex-direction: row;
	}
	.grid.grid--col-sm-only {
		display: flex;
		flex-direction: column;
	}

	/* Cell size */
	.grid > .grid--sm-only-col-1 { grid-column: var(--grid-cell-1); }
	.grid > .grid--sm-only-col-2 { grid-column: var(--grid-cell-2); }
	.grid > .grid--sm-only-col-3 { grid-column: var(--grid-cell-3); }
	.grid > .grid--sm-only-col-4 { grid-column: var(--grid-cell-4); }
	.grid > .grid--sm-only-col-5 { grid-column: var(--grid-cell-5); }
	.grid > .grid--sm-only-col-6 { grid-column: var(--grid-cell-6); }
	.grid > .grid--sm-only-col-7 { grid-column: var(--grid-cell-7); }
	.grid > .grid--sm-only-col-8 { grid-column: var(--grid-cell-8); }
	.grid > .grid--sm-only-col-9 { grid-column: var(--grid-cell-9); }
	.grid > .grid--sm-only-col-10 { grid-column: var(--grid-cell-10); }
	.grid > .grid--sm-only-col-11 { grid-column: var(--grid-cell-11); }
	.grid > .grid--sm-only-col-12 { grid-column: var(--grid-cell-12); }

	/* Visibility */
	.hidden--sm-only { display: none; }

	/* Positioning/Ordering */
	.grid--sm-only-order-1 { order: 1; }
	.grid--sm-only-order-2 { order: 2; }
	.grid--sm-only-order-3 { order: 3; }
	.grid--sm-only-order-4 { order: 4; }
	.grid--sm-only-order-5 { order: 5; }
	.grid--sm-only-order-6 { order: 6; }
	.grid--sm-only-order-7 { order: 7; }
	.grid--sm-only-order-8 { order: 8; }
	.grid--sm-only-order-9 { order: 9; }
	.grid--sm-only-order-10 { order: 10; }
	.grid--sm-only-order-11 { order: 11; }
	.grid--sm-only-order-12 { order: 12; }
	.grid--sm-only-order-first { order: -9999; }
	.grid--sm-only-order-last { order: 9999; }
	.grid--sm-only-order-none { order: none; }
}

/* MD and larger */
@media (min-width: 768px) {
	.grid--md-1 { grid-template-columns: var(--grid-1) }
	.grid--md-2 { grid-template-columns: var(--grid-2) }
	.grid--md-3 { grid-template-columns: var(--grid-3) }
	.grid--md-4 { grid-template-columns: var(--grid-4) }
	.grid--md-5 { grid-template-columns: var(--grid-5) }
	.grid--md-6 { grid-template-columns: var(--grid-6) }
	.grid--md-7 { grid-template-columns: var(--grid-7) }
	.grid--md-8 { grid-template-columns: var(--grid-8) }
	.grid--md-9 { grid-template-columns: var(--grid-9) }
	.grid--md-10 { grid-template-columns: var(--grid-10) }
	.grid--md-11 { grid-template-columns: var(--grid-11) }
	.grid--md-12 { grid-template-columns: var(--grid-12) }

	/* Container */
	.container--fixed {
		max-width: 72rem;
	}

	/* Row & Col */
	.grid.grid--row-md {
		display: flex;
		flex-direction: row;
	}
	.grid.grid--col-md {
		display: flex;
		flex-direction: column;
	}

	/* Cell size */
	.grid > .grid--md-col-1 { grid-column: var(--grid-cell-1); }
	.grid > .grid--md-col-2 { grid-column: var(--grid-cell-2); }
	.grid > .grid--md-col-3 { grid-column: var(--grid-cell-3); }
	.grid > .grid--md-col-4 { grid-column: var(--grid-cell-4); }
	.grid > .grid--md-col-5 { grid-column: var(--grid-cell-5); }
	.grid > .grid--md-col-6 { grid-column: var(--grid-cell-6); }
	.grid > .grid--md-col-7 { grid-column: var(--grid-cell-7); }
	.grid > .grid--md-col-8 { grid-column: var(--grid-cell-8); }
	.grid > .grid--md-col-9 { grid-column: var(--grid-cell-9); }
	.grid > .grid--md-col-10 { grid-column: var(--grid-cell-10); }
	.grid > .grid--md-col-11 { grid-column: var(--grid-cell-11); }
	.grid > .grid--md-col-12 { grid-column: var(--grid-cell-12); }

	/* Visibility */
	.hidden--md { display: none; }
}
/* MD only */
@media (min-width: 768px) and (max-width: 991px) {
	.grid--md-only-1 { grid-template-columns: var(--grid-1) }
	.grid--md-only-2 { grid-template-columns: var(--grid-2) }
	.grid--md-only-3 { grid-template-columns: var(--grid-3) }
	.grid--md-only-4 { grid-template-columns: var(--grid-4) }
	.grid--md-only-5 { grid-template-columns: var(--grid-5) }
	.grid--md-only-6 { grid-template-columns: var(--grid-6) }
	.grid--md-only-7 { grid-template-columns: var(--grid-7) }
	.grid--md-only-8 { grid-template-columns: var(--grid-8) }
	.grid--md-only-9 { grid-template-columns: var(--grid-9) }
	.grid--md-only-10 { grid-template-columns: var(--grid-10) }
	.grid--md-only-11 { grid-template-columns: var(--grid-11) }
	.grid--md-only-12 { grid-template-columns: var(--grid-12) }

	/* Row & Col */
	.grid.grid--row-md-only {
		display: flex;
		flex-direction: row;
	}
	.grid.grid--col-md-only {
		display: flex;
		flex-direction: column;
	}

	/* Cell size */
	.grid > .grid--md-only-col-1 { grid-column: var(--grid-cell-1); }
	.grid > .grid--md-only-col-2 { grid-column: var(--grid-cell-2); }
	.grid > .grid--md-only-col-3 { grid-column: var(--grid-cell-3); }
	.grid > .grid--md-only-col-4 { grid-column: var(--grid-cell-4); }
	.grid > .grid--md-only-col-5 { grid-column: var(--grid-cell-5); }
	.grid > .grid--md-only-col-6 { grid-column: var(--grid-cell-6); }
	.grid > .grid--md-only-col-7 { grid-column: var(--grid-cell-7); }
	.grid > .grid--md-only-col-8 { grid-column: var(--grid-cell-8); }
	.grid > .grid--md-only-col-9 { grid-column: var(--grid-cell-9); }
	.grid > .grid--md-only-col-10 { grid-column: var(--grid-cell-10); }
	.grid > .grid--md-only-col-11 { grid-column: var(--grid-cell-11); }
	.grid > .grid--md-only-col-12 { grid-column: var(--grid-cell-12); }

	/* Visibility */
	.hidden--md-only { display: none; }

	/* Positioning/Ordering */
	.grid--md-only-order-1 { order: 1; }
	.grid--md-only-order-2 { order: 2; }
	.grid--md-only-order-3 { order: 3; }
	.grid--md-only-order-4 { order: 4; }
	.grid--md-only-order-5 { order: 5; }
	.grid--md-only-order-6 { order: 6; }
	.grid--md-only-order-7 { order: 7; }
	.grid--md-only-order-8 { order: 8; }
	.grid--md-only-order-9 { order: 9; }
	.grid--md-only-order-10 { order: 10; }
	.grid--md-only-order-11 { order: 11; }
	.grid--md-only-order-12 { order: 12; }
	.grid--md-only-order-first { order: -9999; }
	.grid--md-only-order-last { order: 9999; }
	.grid--md-only-order-none { order: none; }
}

/* LG and larger */
@media (min-width: 992px) {
	.grid--lg-1 { grid-template-columns: var(--grid-1) }
	.grid--lg-2 { grid-template-columns: var(--grid-2) }
	.grid--lg-3 { grid-template-columns: var(--grid-3) }
	.grid--lg-4 { grid-template-columns: var(--grid-4) }
	.grid--lg-5 { grid-template-columns: var(--grid-5) }
	.grid--lg-6 { grid-template-columns: var(--grid-6) }
	.grid--lg-7 { grid-template-columns: var(--grid-7) }
	.grid--lg-8 { grid-template-columns: var(--grid-8) }
	.grid--lg-9 { grid-template-columns: var(--grid-9) }
	.grid--lg-10 { grid-template-columns: var(--grid-10) }
	.grid--lg-11 { grid-template-columns: var(--grid-11) }
	.grid--lg-12 { grid-template-columns: var(--grid-12) }

	/* Container */
	.container--fixed {
		max-width: 96rem;
	}

	/* Row & Col */
	.grid.grid--row-lg {
		display: flex;
		flex-direction: row;
	}
	.grid.grid--col-lg {
		display: flex;
		flex-direction: column;
	}

	/* Cell size */
	.grid > .grid--lg-col-1 { grid-column: var(--grid-cell-1); }
	.grid > .grid--lg-col-2 { grid-column: var(--grid-cell-2); }
	.grid > .grid--lg-col-3 { grid-column: var(--grid-cell-3); }
	.grid > .grid--lg-col-4 { grid-column: var(--grid-cell-4); }
	.grid > .grid--lg-col-5 { grid-column: var(--grid-cell-5); }
	.grid > .grid--lg-col-6 { grid-column: var(--grid-cell-6); }
	.grid > .grid--lg-col-7 { grid-column: var(--grid-cell-7); }
	.grid > .grid--lg-col-8 { grid-column: var(--grid-cell-8); }
	.grid > .grid--lg-col-9 { grid-column: var(--grid-cell-9); }
	.grid > .grid--lg-col-10 { grid-column: var(--grid-cell-10); }
	.grid > .grid--lg-col-11 { grid-column: var(--grid-cell-11); }
	.grid > .grid--lg-col-12 { grid-column: var(--grid-cell-12); }

	/* Visibility */
	.hidden--lg { display: none; }
}
/* LG only */
@media (min-width: 992px) and (max-width: 1199px) {
	.grid--lg-only-1 { grid-template-columns: var(--grid-1) }
	.grid--lg-only-2 { grid-template-columns: var(--grid-2) }
	.grid--lg-only-3 { grid-template-columns: var(--grid-3) }
	.grid--lg-only-4 { grid-template-columns: var(--grid-4) }
	.grid--lg-only-5 { grid-template-columns: var(--grid-5) }
	.grid--lg-only-6 { grid-template-columns: var(--grid-6) }
	.grid--lg-only-7 { grid-template-columns: var(--grid-7) }
	.grid--lg-only-8 { grid-template-columns: var(--grid-8) }
	.grid--lg-only-9 { grid-template-columns: var(--grid-9) }
	.grid--lg-only-10 { grid-template-columns: var(--grid-10) }
	.grid--lg-only-11 { grid-template-columns: var(--grid-11) }
	.grid--lg-only-12 { grid-template-columns: var(--grid-12) }

	/* Row & Col */
	.grid.grid--row-lg-only {
		display: flex;
		flex-direction: row;
	}
	.grid.grid--col-lg-only {
		display: flex;
		flex-direction: column;
	}

	/* Cell size */
	.grid > .grid--lg-only-col-1 { grid-column: var(--grid-cell-1); }
	.grid > .grid--lg-only-col-2 { grid-column: var(--grid-cell-2); }
	.grid > .grid--lg-only-col-3 { grid-column: var(--grid-cell-3); }
	.grid > .grid--lg-only-col-4 { grid-column: var(--grid-cell-4); }
	.grid > .grid--lg-only-col-5 { grid-column: var(--grid-cell-5); }
	.grid > .grid--lg-only-col-6 { grid-column: var(--grid-cell-6); }
	.grid > .grid--lg-only-col-7 { grid-column: var(--grid-cell-7); }
	.grid > .grid--lg-only-col-8 { grid-column: var(--grid-cell-8); }
	.grid > .grid--lg-only-col-9 { grid-column: var(--grid-cell-9); }
	.grid > .grid--lg-only-col-10 { grid-column: var(--grid-cell-10); }
	.grid > .grid--lg-only-col-11 { grid-column: var(--grid-cell-11); }
	.grid > .grid--lg-only-col-12 { grid-column: var(--grid-cell-12); }

	/* Visibility */
	.hidden--lg-only { display: none; }
	
	/* Positioning/Ordering */
	.grid--lg-only-order-1 { order: 1; }
	.grid--lg-only-order-2 { order: 2; }
	.grid--lg-only-order-3 { order: 3; }
	.grid--lg-only-order-4 { order: 4; }
	.grid--lg-only-order-5 { order: 5; }
	.grid--lg-only-order-6 { order: 6; }
	.grid--lg-only-order-7 { order: 7; }
	.grid--lg-only-order-8 { order: 8; }
	.grid--lg-only-order-9 { order: 9; }
	.grid--lg-only-order-10 { order: 10; }
	.grid--lg-only-order-11 { order: 11; }
	.grid--lg-only-order-12 { order: 12; }
	.grid--lg-only-order-first { order: -9999; }
	.grid--lg-only-order-last { order: 9999; }
	.grid--lg-only-order-none { order: none; }
}

/* XL and larger */
@media (min-width: 1200px) {
	.grid--xl-1 { grid-template-columns: var(--grid-1) }
	.grid--xl-2 { grid-template-columns: var(--grid-2) }
	.grid--xl-3 { grid-template-columns: var(--grid-3) }
	.grid--xl-4 { grid-template-columns: var(--grid-4) }
	.grid--xl-5 { grid-template-columns: var(--grid-5) }
	.grid--xl-6 { grid-template-columns: var(--grid-6) }
	.grid--xl-7 { grid-template-columns: var(--grid-7) }
	.grid--xl-8 { grid-template-columns: var(--grid-8) }
	.grid--xl-9 { grid-template-columns: var(--grid-9) }
	.grid--xl-10 { grid-template-columns: var(--grid-10) }
	.grid--xl-11 { grid-template-columns: var(--grid-11) }
	.grid--xl-12 { grid-template-columns: var(--grid-12) }

	/* Container */
	.container--fixed {
		max-width: 102.4rem;
	}

	/* Row & Col */
	.grid.grid--row-xl {
		display: flex;
		flex-direction: row;
	}
	.grid.grid--col-xl {
		display: flex;
		flex-direction: column;
	}

	/* Cell size */
	.grid > .grid--xl-col-1 { grid-column: var(--grid-cell-1); }
	.grid > .grid--xl-col-2 { grid-column: var(--grid-cell-2); }
	.grid > .grid--xl-col-3 { grid-column: var(--grid-cell-3); }
	.grid > .grid--xl-col-4 { grid-column: var(--grid-cell-4); }
	.grid > .grid--xl-col-5 { grid-column: var(--grid-cell-5); }
	.grid > .grid--xl-col-6 { grid-column: var(--grid-cell-6); }
	.grid > .grid--xl-col-7 { grid-column: var(--grid-cell-7); }
	.grid > .grid--xl-col-8 { grid-column: var(--grid-cell-8); }
	.grid > .grid--xl-col-9 { grid-column: var(--grid-cell-9); }
	.grid > .grid--xl-col-10 { grid-column: var(--grid-cell-10); }
	.grid > .grid--xl-col-11 { grid-column: var(--grid-cell-11); }
	.grid > .grid--xl-col-12 { grid-column: var(--grid-cell-12); }

	/* Visibility */
	.hidden--xl { display: none; }
}

/* XL only */
@media (min-width: 1200px) and (max-width: 1399px) {
	.grid--xl-only-1 { grid-template-columns: var(--grid-1) }
	.grid--xl-only-2 { grid-template-columns: var(--grid-2) }
	.grid--xl-only-3 { grid-template-columns: var(--grid-3) }
	.grid--xl-only-4 { grid-template-columns: var(--grid-4) }
	.grid--xl-only-5 { grid-template-columns: var(--grid-5) }
	.grid--xl-only-6 { grid-template-columns: var(--grid-6) }
	.grid--xl-only-7 { grid-template-columns: var(--grid-7) }
	.grid--xl-only-8 { grid-template-columns: var(--grid-8) }
	.grid--xl-only-9 { grid-template-columns: var(--grid-9) }
	.grid--xl-only-10 { grid-template-columns: var(--grid-10) }
	.grid--xl-only-11 { grid-template-columns: var(--grid-11) }
	.grid--xl-only-12 { grid-template-columns: var(--grid-12) }

	/* Row & Col */
	.grid.grid--row-xl-only {
		display: flex;
		flex-direction: row;
	}
	.grid.grid--col-xl-only {
		display: flex;
		flex-direction: column;
	}

	/* Cell size */
	.grid > .grid--xl-only-col-1 { grid-column: var(--grid-cell-1); }
	.grid > .grid--xl-only-col-2 { grid-column: var(--grid-cell-2); }
	.grid > .grid--xl-only-col-3 { grid-column: var(--grid-cell-3); }
	.grid > .grid--xl-only-col-4 { grid-column: var(--grid-cell-4); }
	.grid > .grid--xl-only-col-5 { grid-column: var(--grid-cell-5); }
	.grid > .grid--xl-only-col-6 { grid-column: var(--grid-cell-6); }
	.grid > .grid--xl-only-col-7 { grid-column: var(--grid-cell-7); }
	.grid > .grid--xl-only-col-8 { grid-column: var(--grid-cell-8); }
	.grid > .grid--xl-only-col-9 { grid-column: var(--grid-cell-9); }
	.grid > .grid--xl-only-col-10 { grid-column: var(--grid-cell-10); }
	.grid > .grid--xl-only-col-11 { grid-column: var(--grid-cell-11); }
	.grid > .grid--xl-only-col-12 { grid-column: var(--grid-cell-12); }

	/* Visibility */
	.hidden--xl-only { display: none; }

	/* Positioning/Ordering */
	.grid--xl-only-order-1 { order: 1; }
	.grid--xl-only-order-2 { order: 2; }
	.grid--xl-only-order-3 { order: 3; }
	.grid--xl-only-order-4 { order: 4; }
	.grid--xl-only-order-5 { order: 5; }
	.grid--xl-only-order-6 { order: 6; }
	.grid--xl-only-order-7 { order: 7; }
	.grid--xl-only-order-8 { order: 8; }
	.grid--xl-only-order-9 { order: 9; }
	.grid--xl-only-order-10 { order: 10; }
	.grid--xl-only-order-11 { order: 11; }
	.grid--xl-only-order-12 { order: 12; }
	.grid--xl-only-order-first { order: -9999; }
	.grid--xl-only-order-last { order: 9999; }
	.grid--xl-only-order-none { order: none; }
}

/* XXL and larger */
@media (min-width: 1400px) {
	.grid--xxl-1 { grid-template-columns: var(--grid-1) }
	.grid--xxl-2 { grid-template-columns: var(--grid-2) }
	.grid--xxl-3 { grid-template-columns: var(--grid-3) }
	.grid--xxl-4 { grid-template-columns: var(--grid-4) }
	.grid--xxl-5 { grid-template-columns: var(--grid-5) }
	.grid--xxl-6 { grid-template-columns: var(--grid-6) }
	.grid--xxl-7 { grid-template-columns: var(--grid-7) }
	.grid--xxl-8 { grid-template-columns: var(--grid-8) }
	.grid--xxl-9 { grid-template-columns: var(--grid-9) }
	.grid--xxl-10 { grid-template-columns: var(--grid-10) }
	.grid--xxl-11 { grid-template-columns: var(--grid-11) }
	.grid--xxl-12 { grid-template-columns: var(--grid-12) }

	/* Container */
	.container--fixed {
		max-width: 128rem;
	}

	/* Row & Col */
	.grid.grid--row-xxl {
		display: flex;
		flex-direction: row;
	}
	.grid.grid--col-xxl {
		display: flex;
		flex-direction: column;
	}

	/* Cell size */
	.grid > .grid--xxl-col-1 { grid-column: var(--grid-cell-1); }
	.grid > .grid--xxl-col-2 { grid-column: var(--grid-cell-2); }
	.grid > .grid--xxl-col-3 { grid-column: var(--grid-cell-3); }
	.grid > .grid--xxl-col-4 { grid-column: var(--grid-cell-4); }
	.grid > .grid--xxl-col-5 { grid-column: var(--grid-cell-5); }
	.grid > .grid--xxl-col-6 { grid-column: var(--grid-cell-6); }
	.grid > .grid--xxl-col-7 { grid-column: var(--grid-cell-7); }
	.grid > .grid--xxl-col-8 { grid-column: var(--grid-cell-8); }
	.grid > .grid--xxl-col-9 { grid-column: var(--grid-cell-9); }
	.grid > .grid--xxl-col-10 { grid-column: var(--grid-cell-10); }
	.grid > .grid--xxl-col-11 { grid-column: var(--grid-cell-11); }
	.grid > .grid--xxl-col-12 { grid-column: var(--grid-cell-12); }

	/* Visibility */
	.hidden--xxl { display: none; }

	/* Positioning/Ordering */
	.grid--xxl-order-1 { order: 1; }
	.grid--xxl-order-2 { order: 2; }
	.grid--xxl-order-3 { order: 3; }
	.grid--xxl-order-4 { order: 4; }
	.grid--xxl-order-5 { order: 5; }
	.grid--xxl-order-6 { order: 6; }
	.grid--xxl-order-7 { order: 7; }
	.grid--xxl-order-8 { order: 8; }
	.grid--xxl-order-9 { order: 9; }
	.grid--xxl-order-10 { order: 10; }
	.grid--xxl-order-11 { order: 11; }
	.grid--xxl-order-12 { order: 12; }
	.grid--xxl-order-first { order: -9999; }
	.grid--xxl-order-last { order: 9999; }
	.grid--xxl-order-none { order: none; }
}