$component: 'categories';
$template: 'template-16';
$item: 'widget-item';

@mixin transition ($property, $time) {
  -webkit-transition-property: $property;
  -moz-transition-property: $property;
  -ms-transition-property: $property;
  -o-transition-property: $property;
  transition-property: $property;
  -webkit-transition-duration: $time;
  -moz-transition-duration: $time;
  -ms-transition-duration: $time;
  -o-transition-duration: $time;
  transition-duration: $time;
}

.widget.c-#{$component}.c-#{$component}-#{$template} {
  .widget-items {
    position:relative;
  }
  .#{$item}-wrapper {
    height: 100%;
    position: relative;
    display: block;
    text-decoration: none;
    @include transition(box-shadow, 0.4s);
    overflow: hidden;
    z-index: 1;
    &:hover {
      .linear-bg-hover {
        opacity: 1;
        @include transition(all, 0.3s);
      }
      .#{$item}-preview {
        height: 36px;
        opacity: 1;
        @include transition(all, 0.3s);
      }
    }
  }
  .#{$item}-picture {
    height: 100%;
    position: relative;
    padding-top: 130%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
  }
  .#{$item}-content {
    position: absolute;
    bottom: 0;
    font-size: 0;
    margin: 30px;
    z-index: 2;
  }
  .#{$item}-name {
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    color: #FFFFFF;
    margin-top: 8px;
  }
  .#{$item}-sticker {
    font-weight: 500;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FFFFFF;
  }
  .#{$item}-preview {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 18px;
    color: #FFFFFF;
    margin-top: 8px;
    height: 0;
    overflow: hidden;
    opacity: 0;
    @include transition(all, 0.4s);
  }
  .#{$item} {
    .linear-bg, .linear-bg-hover {
      height: 100%;
      position: absolute;
      top:0;bottom: 0;left: 0;right: 0;
      background: linear-gradient(180deg, rgba(27, 30, 37, 0) 0%, rgba(27, 30, 37, 0.56) 100%);
      z-index: 2;
      @include transition(all, 0.3s)
    }
    .linear-bg-hover {
      background: linear-gradient(180deg, rgba(27, 30, 37, 0.56) 0%, rgba(27, 30, 37, 0.56) 100%);
      opacity:0;
    }
  }
  .#{$item}.intec-grid-item-2 .#{$item}-picture {
    padding-top: 61.4%;
  }
  @media screen and (max-width:1024px){
    .#{$item}.intec-grid-item-2 .#{$item}-picture {
      padding-top: 130%;
    }
  }
}