@charset "utf-8";
/* CSS Document */
/* ==========================================================================
   GRID & LAYOUT
   ========================================================================== */

/*
|--------------------------------------------------------------------------
| Containers
|--------------------------------------------------------------------------
*/

.tc-container {
	width: min(100% - 2rem, var(--tc-container));
	margin-inline: auto;
}

.tc-container--sm {
	width: min(100% - 2rem, var(--tc-container-small));
	margin-inline: auto;
}

.tc-container--fluid {
	width: 100%;
	padding-inline: 1rem;
}

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

.tc-section {
	padding-block: var(--tc-space-9);
}

.tc-section--sm {
	padding-block: var(--tc-space-7);
}

.tc-section--lg {
	padding-block: calc(var(--tc-space-9) + 2rem);
}

.tc-section--none {
	padding-block: 0;
}

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

.tc-grid {
	display: grid;
	gap: var(--tc-space-6);
}

.tc-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tc-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tc-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tc-grid--5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tc-grid--6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

/*
|--------------------------------------------------------------------------
| Auto Grid
|--------------------------------------------------------------------------
*/

.tc-grid--auto-250 {
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.tc-grid--auto-300 {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.tc-grid--auto-350 {
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

/*
|--------------------------------------------------------------------------
| Flex
|--------------------------------------------------------------------------
*/

.tc-flex {
	display: flex;
}

.tc-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tc-flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

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

.tc-flex-wrap {
	flex-wrap: wrap;
}

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

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

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

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

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

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

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

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

/*
|--------------------------------------------------------------------------
| Width
|--------------------------------------------------------------------------
*/

.tc-w-100 {
	width: 100%;
}

.tc-h-100 {
	height: 100%;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 991px) {

	.tc-grid--4,
	.tc-grid--5,
	.tc-grid--6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 767px) {

	.tc-grid--2,
	.tc-grid--3,
	.tc-grid--4,
	.tc-grid--5,
	.tc-grid--6 {
		grid-template-columns: 1fr;
	}

	.tc-section {
		padding-block: var(--tc-space-8);
	}

	.tc-section--lg {
		padding-block: var(--tc-space-9);
	}

}

/*
|--------------------------------------------------------------------------
| Grid Spans
|--------------------------------------------------------------------------
*/

.tc-col-span-2 {
	grid-column: span 2;
}

.tc-col-span-3 {
	grid-column: span 3;
}

@media (max-width: 767px) {
	.tc-col-span-2,
	.tc-col-span-3 {
		grid-column: auto;
	}
}
