/*  



	Author : Amedea

	Author URI : https://amedeapro.com

	Author : Moskva Yigit

	Author URI : http://moskvayigit.com

	Version : 0.0.3.9



	Table of Contents

	- Media Slider

	 

*/

 

/*----------------------------

	.-- Media Slider

-----------------------------*/



.ms--container{

	width:100%;

	max-width:100vw;

	height:100vh;

	overflow:hidden;

}



.ms--navigation {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100vh;

	display: grid;

	grid-template-columns: auto 1fr;

	grid-template-rows: auto auto auto auto 1fr;

	grid-template-areas: '... ...' '... ...' '... ...' '... ...' 'nav nav';

	justify-content: start;

	align-content: start;

	align-items: start;

	z-index: 100;

	pointer-events: none;

	grid-gap: 1rem;

	overflow: hidden;

}



.ms--navigation a,

.ms--navigation button {

	pointer-events: auto;

}



.ms--slides {

	width: 100%;

	height: 100vh;

	overflow: hidden;

	display: grid;

	grid-template-rows: 100%;

	grid-template-columns: 100%;

	place-items: center;

}



.ms--slide {

	width: 100%;

	height: 100%;

	grid-area: 1 / 1 / -1 / -1;

	pointer-events: none;

	opacity: 0;

	overflow: hidden;

	position: relative;

	display: grid;

	place-items: center;

	will-change: transform, opacity;

}



.ms--slide--current {

	pointer-events: auto;

	opacity: 1;

}



.ms--slider__video {

    height: 100%;

    object-fit: cover;

}



.ms--deco {

	width: 100%;

	height: 100%;

	grid-area: 1 / 1 / -1 / -1;

	pointer-events: none;

	position: relative;

	opacity: 0;

	will-change: transform, opacity;

}



.ms--slide__img {

	width: 100%;

	height: 100%;

	background-size: cover;

	background-position: 50% 50%;

	background-repeat: no-repeat;

	will-change: transform, opacity, filter;

}



.ms--slides-nav {

	grid-area: nav;

	display: flex;

	gap: 0.5rem;

	align-self: end;

	align-items: center;

	padding: 2rem;

}



.ms--slides-nav::before {

	margin-right: 2rem;

}



.ms--slides-nav__item {

	border: 0;

	width: 60px;

	aspect-ratio: 1;

	display: grid;

	place-items: center;

	border-radius: 50%;

	cursor: pointer;

	transition: background-color 0.3s;

}



.dark .ms--slides-nav__item {

    background: #000;

    color: #fff;

}



.light .ms--slides-nav__item {

	background: #fff;

	color: #000;

}



.dark .ms--slides-nav::before{

	color: #000;

}



.light .ms--slides-nav::before{

	color: #fff;

}



.light .ms--slides-nav__item:hover,

.dark .ms--slides-nav__item:hover {

	background-color: #ccc;

}





@media screen and (min-width: 53em) {

	.ms--navigation { 

		height: 100vh; 

		grid-gap: 2rem;

		align-content: space-between;

		grid-template-columns: auto auto auto 1fr;

		grid-template-rows: auto auto;

		grid-template-areas: '... ... ... ...' '... ... ... nav ';

	}



	.ms--slides-nav {

		justify-self: end;

	}

	

}