whata/assets/sass/common/_isotope.scss

/*--------------------------------------------------------------
8. Isotope
----------------------------------------------------------------*/
.cs_isotope_filter.cs_style_1 {
  ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 25px;
    border: 1px solid $border;
    border-right-width: 0;
    border-left-width: 0;
    margin-bottom: 50px;
    padding: 12px 0;
    @media (max-width: 991px) {
      margin-bottom: 35px;
    }
    @media (max-width: 767px) {
      justify-content: center;
      gap: 5px 30px;
    }
  }

  li {
    &:hover,
    &.active {
      a {
        color: $primary;
      }
    }
  }
  &.cs_type_1 {
    ul {
      padding: 12px;
      border-left-width: 1px;
      border-right-width: 1px;
      border-radius: 1.6em;
    }
  }
}

/*--------------------------------------------------------------
8. Isotopee
----------------------------------------------------------------*/
.cs_isotope {
  transition: all 0.4s ease;
}

.cs_isotope.cs_has_gutter_24 {
  margin-left: -12px;
  margin-right: -12px;
  margin-bottom: -50px;
  .cs_isotope_item {
    padding: 0 12px;
    margin-bottom: 50px;
  }
  @media (max-width: 991px) {
    margin-bottom: -30px;
    .cs_isotope_item {
      margin-bottom: 30px;
    }
  }
}

.cs_isotope.cs_has_gutter_80 {
  margin-left: -40px;
  margin-right: -40px;
  margin-bottom: -80px;

  .cs_isotope_item {
    padding: 0 40px;
    margin-bottom: 80px;
  }
}

.cs_isotope.cs_has_gutter_40 {
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: -30px;

  .cs_isotope_item {
    padding: 0 20px;
    margin-bottom: 30px;
  }
}

.cs_isotope.cs_has_gutter_100 {
  margin-left: -50px;
  margin-right: -50px;
  margin-bottom: -40px;

  .cs_isotope_item {
    padding: 0 50px;
    margin-bottom: 40px;
  }
}

.cs_isotope_col_6 .cs_grid_sizer,
.cs_isotope_col_6 .cs_isotope_item {
  width: 16.666667%;
}

.cs_isotope_col_5 .cs_grid_sizer,
.cs_isotope_col_5 .cs_isotope_item {
  width: 20%;
}

.cs_isotope_col_4 .cs_grid_sizer,
.cs_isotope_col_4 .cs_isotope_item {
  width: 25%;
}

.cs_isotope_col_3 .cs_grid_sizer,
.cs_isotope_col_3 .cs_isotope_item {
  width: 33.333333%;
}

.cs_isotope_col_2 .cs_grid_sizer,
.cs_isotope_col_2 .cs_isotope_item {
  width: 50%;
}

.cs_isotope_col_1 .cs_grid_sizer,
.cs_isotope_col_1 .cs_isotope_item {
  width: 100%;
}

.cs_grid_sizer {
  width: 33.333333%;
}

.cs_isotope_col_5 .cs-w20,
.cs_isotope_col_4 .cs-w20,
.cs_isotope_col_3 .cs-w20,
.cs_isotope_col_2 .cs-w20,
.cs_isotope_col_1 .cs-w20 {
  width: 20%;
}

.cs_isotope_col_5 .cs-w25,
.cs_isotope_col_4 .cs-w25,
.cs_isotope_col_3 .cs-w25,
.cs_isotope_col_2 .cs-w25,
.cs_isotope_col_1 .cs-w25 {
  width: 25%;
}

.cs_isotope_col_5 .cs-w33,
.cs_isotope_col_4 .cs-w33,
.cs_isotope_col_3 .cs-w33,
.cs_isotope_col_2 .cs-w33,
.cs_isotope_col_1 .cs-w33 {
  width: 33.333333%;
}

.cs_isotope_col_5 .cs-w50,
.cs_isotope_col_4 .cs-w50,
.cs_isotope_col_3 .cs-w50,
.cs_isotope_col_2 .cs-w50,
.cs_isotope_col_1 .cs-w50 {
  width: 50%;
}

.cs_isotope_col_5 .cs-w66,
.cs_isotope_col_4 .cs-w66,
.cs_isotope_col_3 .cs-w66,
.cs_isotope_col_2 .cs-w66,
.cs_isotope_col_1 .cs-w66 {
  width: 66.666666%;
}

.cs_isotope_col_5 .cs-w100,
.cs_isotope_col_4 .cs-w100,
.cs_isotope_col_3 .cs-w100,
.cs_isotope_col_2 .cs-w100,
.cs_isotope_col_1 .cs-w100 {
  width: 100%;
}
@media screen and (max-width: 1199px) {
  .cs_isotope.cs_has_gutter_100 .cs_isotope_item {
    padding: 0 15px;
    margin-bottom: 30px;
  }

  .cs_isotope.cs_has_gutter_100 {
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: -30px;
  }

  .cs_isotope.cs_has_gutter_80 {
    margin-left: -12px;
    margin-right: -12px;
    margin-bottom: -25px;

    .cs_isotope_item {
      padding: 0 12px;
      margin-bottom: 25px;
    }
  }

  .cs_isotope_col_4 .cs_grid_sizer,
  .cs_isotope_col_4 .cs_isotope_item {
    width: 33.333333%;
  }
}

@media screen and (max-width: 991px) {
  .cs_isotope_col_4 .cs_grid_sizer,
  .cs_isotope_col_4 .cs_isotope_item {
    width: 50%;
  }

  .cs_isotope_col_4 .cs-w50 {
    width: 100%;
  }

  .cs_isotope_col_3 .cs_grid_sizer,
  .cs_isotope_col_3 .cs_isotope_item {
    width: 50%;
  }

  .cs_isotope_col_2 .cs_grid_sizer,
  .cs_isotope_col_2 .cs_isotope_item {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .cs_isotope_col_5 .cs-w50,
  .cs_isotope_col_4 .cs-w50,
  .cs_isotope_col_3 .cs-w50,
  .cs_isotope_col_2 .cs-w50,
  .cs_isotope_col_1 .cs-w50,
  .cs_isotope_col_5 .cs-w66,
  .cs_isotope_col_4 .cs-w66,
  .cs_isotope_col_3 .cs-w66,
  .cs_isotope_col_2 .cs-w66,
  .cs_isotope_col_1 .cs-w66 {
    width: 100%;
  }

  .cs_isotope_col_5 .cs_grid_sizer,
  .cs_isotope_col_5 .cs_isotope_item {
    width: 100%;
  }

  .cs_isotope_col_4 .cs_grid_sizer,
  .cs_isotope_col_4 .cs_isotope_item {
    width: 100%;
  }

  .cs_isotope_col_3 .cs_grid_sizer,
  .cs_isotope_col_3 .cs_isotope_item {
    width: 100%;
  }

  .cs_isotope_col_2 .cs_grid_sizer,
  .cs_isotope_col_2 .cs_isotope_item {
    width: 100%;
  }
}