@mixin aspect-ratio($width, $height) {
    position: relative;
      
    &:before {
      display: block;
      content: "";
      width: 100%;
      padding-top: ($height / $width) * 100%;
    }
      
    > img {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          height: 100%;
    }
  }
  
  /* Styling */
  
  .carosuel-section {
      background: #F4F4F4;
      padding: 50px 0;
  }
  
  .carousel-container {
      max-width: 1044px;
      margin: 0 auto;
      padding: 0 20px;
  }
  
  .carousel {
      display: block;
      text-align: left;
      position: relative;
      margin-bottom: 22px;
      
      > input {
          clip: rect(1px, 1px, 1px, 1px);
          clip-path: inset(50%);
          height: 1px;
          width: 1px;
          margin: -1px;
          overflow: hidden;
          padding: 0;
          position: absolute;
          
          &: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) { box-shadow: 0px 0px 0px 5px #002960; }
          &:nth-of-type(2):checked ~ .carousel__thumbnails li:nth-of-type(2) { box-shadow: 0px 0px 0px 5px #002960; }
          &:nth-of-type(3):checked ~ .carousel__thumbnails li:nth-of-type(3) { box-shadow: 0px 0px 0px 5px #002960; }
          &:nth-of-type(4):checked ~ .carousel__thumbnails li:nth-of-type(4) { box-shadow: 0px 0px 0px 5px #002960; }
          &:nth-of-type(5):checked ~ .carousel__thumbnails li:nth-of-type(5) { box-shadow: 0px 0px 0px 5px #002960; }
          &:nth-of-type(6):checked ~ .carousel__thumbnails li:nth-of-type(6) { box-shadow: 0px 0px 0px 5px #002960; }
      }
  }
  
  .carousel__slides {
      position: relative;
      z-index: 1;
      padding: 0;
      margin: 0;
      overflow: hidden;
      white-space: nowrap;
      box-sizing: border-box;
      display: flex;
  }
  
  .carousel__slide {
      position: relative;
      display: block;
      flex: 1 0 100%;
      width: 100%;
      height: 100%;
      overflow: hidden;
      transition: all 300ms ease-out;
      vertical-align: top;
      box-sizing: border-box;
      white-space: normal;
      
      figure {
          display: flex;
          /* flex-direction: row-reverse; */
          margin: 0;
      }

      
      div {
          @include aspect-ratio(3, 2);
          width: 40%;
      }
      
      img {
          display: block;
          flex: 1 1 auto;
          width: 100%;
          object-fit: cover;
      }
      
      figcaption {
          align-self: flex-end;
          padding: 20px 20px 0 20px;
          flex: 0 0 auto;
          width: 60%;
          min-width: 150px;
      }
      
      .credit {
          margin-top: 1rem;
          color: rgba(0, 0, 0, 0.5);
          display: block;        
      }
      
      &.scrollable {
          overflow-y: scroll;
      }

  }
  
  @media (min-width: 320px) and (max-width: 699px) {
    figure{
        flex-direction: column;
        /* margin: 0; */
        align-items: center;
        
    }

    img{
        width: 100%;
       
    }
    .carousel__slide {
        figcaption{
            width: 100%;
            align-self: flex-start;
        }
        div{
            width: 100%;
        }
    }
  }
  @media (min-width: 700px) and (max-width: 1200px) {
    figure{
        align-items: center;
    }


    img{
        width: 100%;
    }
    .carousel__slide {
        figcaption{
            /* width: 50%; */
            /* align-self: flex-end; */
        }
        div{
            width: 30%;
        }
    }
  }
  .carousel__thumbnails {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      
      margin: 0 -10px;
      
      .carousel__slides + & {
          margin-top: 20px;
      }
      
      li {        
          flex: 1 1 auto;
          max-width: calc((100% / 6) - 20px);  
          margin: 0 10px;
          transition: all 300ms ease-in-out;
      }
      
      label {
          display: block;
          @include aspect-ratio(1,1);
          
                    
          &:hover,
          &:focus {
              cursor: pointer;
              
              img {
                  box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25);
                  transition: all 300ms ease-in-out;
              }
          }
      }
      
      img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
      }
  }





 
  .Review_Heading img{
    width: 20%;
  }
  .Review_Heading h2{
    text-align: center;
  }