/* ===========================
   ========= Carousel======== 
   =========================== */

.carousel 
{display: block;
position: relative;

> input {
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
        clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;

          &:nth-of-type(13):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -1200%; }
        &:nth-of-type(12):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -1100%; }
        &:nth-of-type(11):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -1000%; }
       &:nth-of-type(10):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -900%; }
        &:nth-of-type(9):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -800%; }
        &:nth-of-type(8):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -700%; }
        &:nth-of-type(7):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -600%; }
        &:nth-of-type(6):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -500%; }
     &:nth-of-type(5):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -400%; }
        &:nth-of-type(4):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -300%; }
        &:nth-of-type(3):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -200%; }
        &:nth-of-type(2):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -100%; }
        &:nth-of-type(1):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: 0%; }

	&:nth-of-type(1):checked ~ .carousel__thumbnails li:nth-of-type(1)
        &:nth-of-type(2):checked ~ .carousel__thumbnails li:nth-of-type(2)
        &:nth-of-type(3):checked ~ .carousel__thumbnails li:nth-of-type(3)
        &:nth-of-type(4):checked ~ .carousel__thumbnails li:nth-of-type(4)
        &:nth-of-type(5):checked ~ .carousel__thumbnails li:nth-of-type(5)
        &:nth-of-type(6):checked ~ .carousel__thumbnails li:nth-of-type(6)
	&:nth-of-type(7):checked ~ .carousel__thumbnails li:nth-of-type(7)
        &:nth-of-type(8):checked ~ .carousel__thumbnails li:nth-of-type(8)
        &:nth-of-type(9):checked ~ .carousel__thumbnails li:nth-of-type(9)
        &:nth-of-type(10):checked ~ .carousel__thumbnails li:nth-of-type(10)
        &:nth-of-type(11):checked ~ .carousel__thumbnails li:nth-of-type(11)
        &:nth-of-type(12):checked ~ .carousel__thumbnails li:nth-of-type(12)
	&:nth-of-type(13):checked ~ .carousel__thumbnails li:nth-of-type(13)
      }
}

.carousel__slides 
{position: relative;
z-index: 1;
padding: 0;
margin: 0;
overflow: hidden;
white-space: nowrap;
-webkit-box-sizing: border-box;
        box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;}

.carousel__slide 
{position: relative;
display: block;
-webkit-box-flex: 1;
    -ms-flex: 1 0 100%;
        flex: 1 0 100%;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
-webkit-box-sizing: border-box;
        box-sizing: border-box;
white-space: normal;

figure 
{display: -webkit-box;display: -ms-flexbox;display: flex;
        margin: 0;}
 
div 
{@include aspect-ratio(3, 2);
width: 100%;}
    
    img 
{width: 100%;
height: auto;
display: block;
-webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
-o-object-fit: cover;
   object-fit: cover;}

figcaption 
{font-size: 0.8rem;
-ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
margin: 0 5px 0 20px;
-webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
width: auto;}
 }

.carousel__thumbnails 
{list-style: none;
padding: 0;;
display: -webkit-box;;
display: -ms-flexbox;;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
-ms-flex-line-pack: justify;
    align-content: space-between;

.carousel__slides + & 
{margin-top: 20px;}

li 
{-webkit-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}

label 
{display: block;
@include aspect-ratio(1,1);

&:hover,
&:focus {
cursor: pointer;

img 
{-webkit-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;
  opacity: 1;}
}}

img 
{margin: 5px;
display: block;
width: 90px;
opacity: 0.6;}
}