/* Course Categories Layout */
.course-categories {
  @include make-row();

  .course-grid-box {
    @include make-col-ready();
  }

  @include media-breakpoint-up(lg) {

    .course_cat_1 {
      @include make-col(6);

      .category-holder {
        padding-bottom: calc(76% + 6px) !important;
      }
    }

    .course_cat_2,
    .course_cat_3,
    .course_cat_4,
    .course_cat_5,
    .course_cat_default{
      @include make-col(3);
    }
  }


  /* Course Grid Style */
  .course-grid-box {
    padding: 15px;

    .category-holder {
      position: relative;
      padding-bottom: 76%;
      background-color: gray('700');
      overflow: hidden;
      border-radius: $border-radius;
      transition: all 0.3s ease;

      .category-holder-inner,
      .category_link {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 20;
      }

      .category-bg {
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        display: block;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        width: calc(100% + 40px);
        max-width: none;
        min-height: 100.6%;
        transition: opacity 0.3s ease, transform 0.3s ease;
        transform: translate3d(-30px, 0, 0);
      }

      .info-on-hover {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        color: #fff;
        text-align: center;
        padding-top: 15px;
        padding-bottom: 15px;
        background: linear-gradient(0deg,rgba(0, 0, 0, 0.8) 0%,rgba(0,0,0,0) 100%);
        border-bottom-left-radius: $border-radius;
        border-bottom-right-radius: $border-radius;


        a {
          color: #fff;
        }

        .category-title {
          transform: translateY(20px);
          transition: transform .3s ease;
          margin-bottom: 5px;
        }

        .category-count {
          display: block;
          position: relative;
          opacity: 0;
          transform: translateY(50px);
          transition: all .3s ease;
        }
      }

      &:hover {
        box-shadow: 0 24px 50px 3px rgba(0,0,0,.2);

        .category-bg {
          transform: translate3d(0, 0, 0);
          opacity: 0.7;

        }

        .info-on-hover {

          .category-title {
            transform: translateY(0);
          }

          .category-count {
            opacity: 1;
            transform: translateY(0);
          }
        }
      }
    }
  }
}