Cacher is the code snippet organizer for pro developers

.isotope {
  &.no-fillter {
    .card-item {
      float: left;
    }
  }
  &.gutter-sm {
    .card-item {
      padding: 10px;
    }
  }
  &.gutter {
    .card-item {
      padding: 15px;
    }
  }
  &.gutter-lg {
    .card-item {
      padding: 20px;
    }
  }
  &.col-1 {
    .card-item {
      width: 100%;
    }
  }
  &.col-2 {
    .card-item {
      width: 49.99%;
    }
  }
  &.col-3 {
    .card-item {
      width: 33.3333333%;
    }
  }
  &.col-4 {
    .card-item {
      width: 24.98%;
    }
  }
  &.col-5 {
    .card-item {
      width: 19.99%;
    }
  }
  &.col-1 {
    .card-item {
      float: left;
    }
  }
  &.col-2 {
    .card-item {
      float: left;
    }
  }
  &.col-3 {
    .card-item {
      float: left;
    }
  }
  &.col-4 {
    .card-item {
      float: left;
    }
  }
  &.col-5 {
    .card-item {
      float: left;
    }
  }
}

@media only screen and (max-width: $screen-md) {
  .isotope.gutter-sm {
    .card-item {
      padding: 10px;
    }
  }
}

@media only screen and (max-width: $screen-md) {
  .isotope.gutter {
    .card-item {
      padding: 15px 10px;
    }
  }
}

@media only screen and (max-width: $screen-md) {
  .isotope.gutter-lg {
    .card-item {
      padding: 20px 10px;
    }
  }
}

@media only screen and (max-width: $screen-md) {
  .isotope.col-2 {
    .card-item {
      width: 50%;
    }
  }
}

@media only screen and (max-width: $screen-sm) {
  .isotope.col-2 {
    .card-item {
      width: 100%;
    }
  }
}

@media only screen and (max-width: $screen-md) {
  .isotope.col-3 {
    .card-item {
      width: 50%;
    }
  }
}

@media only screen and (max-width: $screen-sm) {
  .isotope.col-3 {
    .card-item {
      width: 100%;
    }
  }
}

@media only screen and (max-width: $screen-md) {
  .isotope.col-4 {
    .card-item {
      width: 50%;
    }
  }
}

@media only screen and (max-width: $screen-sm) {
  .isotope.col-4 {
    .card-item {
      width: 100%;
    }
  }
}

@media only screen and (max-width: $screen-md) {
  .isotope.col-5 {
    .card-item {
      width: 50%;
    }
  }
}

@media only screen and (max-width: $screen-sm) {
  .isotope.col-5 {
    .card-item {
      width: 100%;
    }
  }
}

.isotope-filter.filter-1 .filter-item {
  position: relative;
  font-size: 16px;
  font-weight: bold;
  padding: 5px 25px;
  line-height: 3;
  color: #999;
  transition: all 0.3s ease-in-out;
  &:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    transform: rotate(30deg);

    background-color: #e6e6e6;
    height: 100%;
    width: 1px;
  }
  &:last-child:after {
    width: 0px;
  }
  &.active, &:hover, &:focus {
    color: #333743;
  }
}