/* ==========================================================================
    Slider core styles
===========================================================================*/
*,
*:before,
*:after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.slider-container {
   position: relative;
   overflow: hidden;
   width: 100%;
   margin: 0 auto;
   padding-bottom: 30px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.slider {
   position: relative;
}

.slider:before,
.slider:after {
   display: table;
   content: ' ';
}

.slider:after {
   clear: both;
}

.slider__item {
   position: relative;
   float: left;
   margin: 0;
   padding: 0;
   aspect-ratio: 16 / 9;
}

.slider__item img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.slider__switch span {
   color: #fff;
   display: block;
   width: 32px;
   height: 32px;
}

/* Arrows */
.slider__switch {
   position: absolute;
   top: 50%;
   margin-top: -50px;
   padding: 10px 5px;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -o-user-select: none;
   user-select: none;
   border-radius: 1px;
   background-color: rgba(0, 0, 0, .6);
   opacity: 0;
   border-radius: 8px;
   transition: opacity .15s ease;
   fill: #fff;
}

.slider-container:hover .slider__switch {
   opacity: .3;
}

.slider__switch--prev {
   left: 10px;
}

.slider__switch--next {
   right: 10px;
}

.slider-container:hover .slider__switch:hover {
   opacity: 1;
}

.slider__switch[disabled] {
   visibility: hidden;
   opacity: 0;
}

.slider__caption {
   position: absolute;
   bottom: 30px;
   left: 30px;
   display: block;
   max-width: 500px;
   padding: 10px;
   color: #fff;
   border-radius: 8px;
   background: rgba(0, 0, 0, 0.4);
   box-shadow: 0 0 10px 10px rgba(0, 0, 0, .1);
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#99000000', endColorstr='#99000000');
   /* ie8 */
}

.slider__caption[disabled] {
   opacity: 0;
   visibility: hidden;
}

.slider-nav {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   height: 30px;
   z-index: 999;
}

.slider-nav__control {
   display: inline-block;
   width: 12px;
   height: 12px;
   margin: 0 3px;
   -webkit-transition: background .5s ease;
   -moz-transition: background .5s ease;
   -o-transition: background .5s ease;
   transition: background .5s ease;
   border-radius: 50%;
   background: #EAEFFE;
}

.slider-nav__control.is-active {
   width: 12px;
   height: 12px;
   background: #ffd55d;
}

.slider.has-touch {
   cursor: move;
   cursor: -webkit-grabbing;
   cursor: -moz-grabbing;
}

@media (max-width: 568px) {

.slider {
   width: 9999px;
   height: calc((100vw - 32px) * 9 / 16);
}

   .slider__switch {
      display: none;
   }

   .slider__caption {
      left: 10px;
      right: 10px;
      bottom: 10px;
   }
}
