@import "render_grid";

@grid-columns: 10;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 0px;
@grid-prefix: hp;
.view-list-home-page-category {
  @import "grid";
  .row .col-hp-md-2:nth-child(2n+1) {
    .wrapper-category-item .mark {
      background: #4c77d0;
    }
  }
  .wrapper-category-item {
    position: relative;
    cursor: pointer;
    margin-bottom: 24px;
    transition: all 0.3s ease;
    .category-image {
      height: 450px;
    }
    .mark {
      width: 100%;
      height: 100%;
      position: absolute;
      background: #d47d7d;
      opacity: 0.6;
      text-align: center;
      vertical-align: middle;
    }
    .category-title {
      top: 50%;
      width: 100%;
      text-align: center;
      position: absolute;
      a {
        color: #fff;
        text-transform: uppercase;
        font-weight: bold;
      }
    }
    .list-service {
      margin: 0;
      padding: 0;
      li {
        display: inline;
        padding: 0;
        margin-left: -14px;
        display: inline;
        .service-image {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          border: 3px solid #ffffff;
        }
      }
    }
  }
}