/*----------------------------------------*/
/*  00 - ZMIENNE
/*----------------------------------------*/

:root {
	--color-primary: #6366f1;
	--color-primary-lighter: #818cf8;
	--color-primary-darker: #4f46e5;
	--color-secondary: #a855f7;

	--color-black: #000;
	--color-white: #fff;
	--color-text: #263140;
	--bg-lighter: #fff;
	--bg-darker: #F6F6F6;

	--font-primary: Inter, 'open sans', 'HelveticaNeue', 'Helvetica Neue', 'Helvetica-Neue', Helvetica, Arial, sans-serif;
	--font-secondary: 'open sans', 'HelveticaNeue', 'Helvetica Neue', 'Helvetica-Neue', Helvetica, Arial, sans-serif;

	--spacing-xs: 8px;
	--spacing-sm: 16px;
	--spacing-md: 24px;
	--spacing-lg: 32px;
	--spacing-xl: 48px;

	--border-radius: 16px;
}

/* LAYOUT */

section {
	position: relative;
	padding: 60px 0;
}

section:nth-of-type(odd) {
	background-color: var(--bg-lighter);
}

section:nth-of-type(even) {
	background-color: var(--bg-darker);
}

.layout-1, .layout-2, .layout-3, .layout-4 { }
.layout-33-66, .layout-66-33, .layout-25-50-25 { }

.flex { 
	display: flex;
	flex-direction: row;
}

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

.flex.reverse { 
	flex-direction: row-reverse;
}

.flex-col.reverse {
	flex-direction: column-reverse;
}

.flex-1 { flex: 1;}
.flex-2 { flex: 2;}
.flex-3 { flex: 3;}
.flex-4 { flex: 4;}

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

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

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

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

.jc-center { 
	justify-content: flex-start;
} 

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

.jc-around { 
	justify-content: space-around;
}

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

.jc-evenly { 
	justify-content: space-evenly;
}

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

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

.grid { display: grid; }

.grid-1 {
	grid-template-columns: repeat(1, 1fr);
}

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

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

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

@media all and (max-width: 768px) {
	.flex, .flex-col {
		flex-direction: column;
	}

	.flex.mobile-reverse, .flex-col.mobile-reverse { 
		flex-direction: column-reverse;
	}
}

/* Brand Tokens: */
.btn {

}

.button-primary, .button-secondary, .button-tetriary
.font-primary, .font-secondary
.color-primary, .color-secondary
.bg-lighter, .bg-darker, 

.bg-accent {

}


/* Typografia: */
.section-subtitle {

}

.section-title {

}

.section-intro {

}

.section-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.text-left {
	text-align: left;
} 

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.semi-bold {
	font-weight: 600;
} 

.bold {
	font-weight: 700;	
}

/* Media: */
.img-square {
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
}

.img-3x2 {
	width: 100%;
	height: auto;
	aspect-ratio: 3/2;
}

.img-2x3 {
	width: 100%;
	height: auto;
	aspect-ratio: 2/3;
}

.img-1x2 {
	width: 100%;
	height: auto;
	aspect-ratio: 1/2;
}

.img-2x1 {
	width: 100%;
	height: auto;
	aspect-ratio: 2/1;
}

.img-1x3 {
	width: 100%;
	height: auto;
	aspect-ratio: 1/3;
}

.img-3x1 {
	width: 100%;
	height: auto;
	aspect-ratio: 3/1;
}

.img-1x4 {
	width: 100%;
	height: auto;
	aspect-ratio: 1/4;
}

.img-4x1 {
	width: 100%;
	height: auto;
	aspect-ratio: 4/1;
}

.img-16x9 {
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
}

.img-9x16 {
	width: 100%;
	height: auto;
	aspect-ratio: 9/16;
}

.video-container {
	flex: 1;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
}

.video-container iframe {
	width: 100%;
	height: 100%;
}



/* Pozostałe: */
.mx-1 {

} 

.mx-2, .mx-3, .mx-4
.my-1, .my-2, .my-3, .my-4
.mt-1, .mt-2, .mt-3, .mt-4
.mb-1, .mb-2, .mb-3, .mb-4
.ml-1, .ml-2, .ml-3, .ml-4
.mr-1, .ml-2, .ml-3, 

.ml-4 {

}


/* Components: */
.faq-container {

} 

.faq-item {

} 

.faq-question {

} 

.faq-answer {

}