/* ==========================================================================
   Utility Classes
   ========================================================================== */


/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */

.container {

	width: min(
		100% - (var(--container-padding) * 2),
		var(--container-width)
	);

	margin-inline: auto;

}


/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {

	position: relative;

	padding-block: var(--space-10);

	overflow: hidden;

}


.section-sm {

	padding-block: var(--space-7);

}


.section-lg {

	padding-block: 12rem;

}


/* --------------------------------------------------------------------------
   Display
   -------------------------------------------------------------------------- */

.d-none {

	display: none !important;

}


.d-block {

	display: block;

}


.d-flex {

	display: flex;

}


.d-grid {

	display: grid;

}


/* --------------------------------------------------------------------------
   Flex Utilities
   -------------------------------------------------------------------------- */

.flex-center {

	display: flex;

	align-items: center;

	justify-content: center;

}


.flex-between {

	display: flex;

	align-items: center;

	justify-content: space-between;

}


.flex-column {

	flex-direction: column;

}


/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */

.grid-2 {

	display: grid;

	grid-template-columns: repeat(2,1fr);

	gap: var(--space-6);

}


.grid-3 {

	display: grid;

	grid-template-columns: repeat(3,1fr);

	gap: var(--space-5);

}


/* --------------------------------------------------------------------------
   Alignment
   -------------------------------------------------------------------------- */

.text-center {

	text-align: center;

}


.text-left {

	text-align: left;

}


.text-right {

	text-align: right;

}


/* --------------------------------------------------------------------------
   Margin Utilities
   -------------------------------------------------------------------------- */

.mt-1 {

	margin-top: var(--space-1);

}


.mt-2 {

	margin-top: var(--space-2);

}


.mt-3 {

	margin-top: var(--space-3);

}


.mt-4 {

	margin-top: var(--space-4);

}


.mt-5 {

	margin-top: var(--space-5);

}


/* --------------------------------------------------------------------------
   Padding Utilities
   -------------------------------------------------------------------------- */

.pt-5 {

	padding-top: var(--space-5);

}


.pb-5 {

	padding-bottom: var(--space-5);

}


/* --------------------------------------------------------------------------
   Width Utilities
   -------------------------------------------------------------------------- */

.w-full {

	width:100%;

}


.max-width-sm {

	max-width:500px;

}


.max-width-md {

	max-width:700px;

}


.max-width-lg {

	max-width:1000px;

}


/* --------------------------------------------------------------------------
   Position
   -------------------------------------------------------------------------- */

.relative {

	position:relative;

}


.absolute {

	position:absolute;

}


/* --------------------------------------------------------------------------
   Overflow
   -------------------------------------------------------------------------- */

.overflow-hidden {

	overflow:hidden;

}


.overflow-visible {

	overflow:visible;

}


/* --------------------------------------------------------------------------
   Visibility
   -------------------------------------------------------------------------- */

.hide-mobile {

	display:block;

}


.hide-desktop {

	display:none;

}


/* --------------------------------------------------------------------------
   Background Utilities
   -------------------------------------------------------------------------- */

.bg-primary {

	background:var(--color-primary);

}


.bg-white {

	background:var(--color-white);

}


/* --------------------------------------------------------------------------
   Border Utilities
   -------------------------------------------------------------------------- */

.border {

	border:1px solid var(--color-border);

}


.rounded {

	border-radius:var(--radius-md);

}


.rounded-full {

	border-radius:var(--radius-full);

}