Cacher is the code snippet organizer for pro developers

//maintain image ratio
//add this mixin to an image wrapper
//eg <div class="image-wrapper"><img src=""></div>
@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;
    object-fit: cover;
    height: 100%;
    width: 100%;
  }
}
//Background image version
@mixin responsive-bg-image($image-width, $image-height) {
  background-size: 100%;
  height: 0;
  padding-bottom: percentage($image-height / $image-width);
  display: block;
}


//used for an h2 with a span/tagline inside
// <h2><span>tagline</span>Main title</h2>
@mixin h2wtag{
  text-align: center;
  color: $navy;
  margin-bottom: 45px;
  line-height: 38px;
  @media(max-width: $mobile){
    font-size: 18px;
    line-height: 28px;
  }
  span{
    display: block;
    font-size: 12px;
    font-weight: $bold;
    text-transform: uppercase;
    @media(max-width: $mobile){
      font-size: 10px;
    }
  }
}
//Rotate + to X
.dropdown-container .dropdown-button span::after {
    transition: transform .5s;
}
 
.dropdown-container.active .dropdown-button span::after {
    transform: rotate(45deg);
}

  .slick-list {
          border-radius: 50%;
          font-size: 0;
          .featOperator__slide{
            position: relative;
            //this will force the parent image to be a perfect square
            padding-bottom: 100%;
            img{
              position: absolute;
              height: 100%;
              width: 100%;
              top:0;
              bottom: 0;
              right: 0;
              left:0;
              //you will need to add the polyfill for this
              object-fit: cover;
            }
          }
        }