/**
 * section_slides
 * @version	2.0
 * @release	17-01-2022
 * @author	msolowski Marcin Sołowski
 * @website	http://msolowski.pl
 */

.section_slides
{
	overflow-x: clip;
	overflow-y: visible;
}

.section_slides.layout_column
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	--min_column_gap: 20;
	--max_column_gap: 60;
	column-gap:
		clamp(calc(var(--min_column_gap) * 1px),
		calc((((-1 * var(--global_scm_var)) * ((var(--max_column_gap) - var(--min_column_gap)) / (var(--global_sc_var) - var(--global_scm_var))) + var(--min_column_gap)) * 1px)
		+ ((var(--max_column_gap) - var(--min_column_gap)) / (var(--global_sc_var) - var(--global_scm_var)) * 100vw)),
		calc(var(--max_column_gap) * 1px));
	--min_row_gap: 40;
	--max_row_gap: 60;
	row-gap:
		clamp(calc(var(--min_row_gap) * 1px),
		calc((((-1 * var(--global_scm_var)) * ((var(--max_row_gap) - var(--min_row_gap)) / (var(--global_sc_var) - var(--global_scm_var))) + var(--min_row_gap)) * 1px)
		+ ((var(--max_row_gap) - var(--min_row_gap)) / (var(--global_sc_var) - var(--global_scm_var)) * 100vw)),
		calc(var(--max_row_gap) * 1px));
	--section_contener_max_width: var(--global_size_section);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: calc(100vw - (100vw - var(--section_contener_max_width)) + (var(--global_padding) * 2));
}

.section_slides.layout_column.background_grey
{
	box-shadow: 0 0 0 100vmax var(--root_color_light_grey);
	clip-path: inset(0 -100vmax);
}

.section_slides.layout_column .global_contener
{
	--max_column_gap: 30;
	--max_row_gap: 30;
	margin-top: 0;
	grid-template-columns: 100%;
	height: 100%;
}

.section_slides.layout_column .gs_slides 
{
	margin-top: 0;
}

.section_slides.layout_column .global_swiper
{
	overflow-x: clip;
	overflow-y: visible;
}

/**********************************************************************************/

.section_slides.background_grey .gs_arrow
{
	--global_swiper_background_color:	var(--root_color_white);
}

.section_slides .global_swiper
{
/*	overflow: hidden; */
}

.section_slides .slide
{
	background-color: var(--root_color_light_grey);
	height: auto;
	transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.section_slides.background_grey .slide
{
	background-color: var(--root_color_white);
}

.section_slides .slide .contener
{
	padding-top: var(--global_size_30);
	padding-right: var(--global_size_30);
	padding-bottom: var(--global_size_30);
	padding-left: var(--global_size_30);
}

.section_slides .slide .number
{
	--min_width: 78;
	--max_width: 78;
	--width:
		clamp(calc(var(--min_width) * 1px),
		calc((((-1 * var(--global_scm_var)) * ((var(--max_width) - var(--min_width)) / (var(--global_sc_var) - var(--global_scm_var))) + var(--min_width)) * 1px)
		+ ((var(--max_width) - var(--min_width)) / (var(--global_sc_var) - var(--global_scm_var)) * 100vw)),
		calc(var(--max_width) * 1px));
	transition: var(--global_transition);
	width: var(--width);
	height: var(--width);
	background-color: var(--root_color_lead);
	color: var(--root_color_white);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: calc(var(--global_size_25) * -1);
	margin-top: 0;
	position: relative;
}

.section_slides .slide .number::before
{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-width: 0 calc(var(--width) * 0.5) var(--global_size_20) calc(var(--width) * 0.5);
	border-color: transparent transparent var(--root_color_lead) transparent;
	border-style: solid;
	transform: translateY(-100%);
}

.section_slides .slide.swiper-slide
{
	opacity: 0.4;
/*	opacity: 0;
	opacity: 1; */
}

.section_slides .slide.swiper-slide-visible
{
	opacity: 1;
}

.section_slides .is_column
{
	grid-column-start: 2;
	grid-column: 2 / span 1;
}

/**********************************************************************************/

@media screen and (max-width: 1680px)
{
}

@media screen and (max-width: 1600px)
{
}

@media screen and (max-width: 1440px)
{
}

@media screen and (max-width: 1366px)
{
}

@media screen and (max-width: 1300px)
{
}

@media screen and (max-width: 1200px)
{
}

@media screen and (max-width: 1024px)
{
	.section_slides.layout_column
	{
		grid-template-columns: 100%;
	}

	.section_slides .is_column
	{
		grid-column-start: auto;
	}
}

@media screen and (max-width: 800px)
{
}

@media screen and (max-width: 640px)
{
}

@media screen and (max-width: 480px)
{
}

@media screen and (max-width: 360px)
{
}