$component: 'brands';
$template: 'template-4';
$item: 'widget-item';

.widget.c-#{$component}.c-#{$component}-#{$template} {
  .widget-header {
    position: relative;

    & + .widget-content {
      margin: 0;
    }
  }

  * + .widget-button-wrap {
    margin-top: 24px;
  }

  .widget-button-wrap {
    &.align-left {
      text-align: left;
    }
    &.align-center {
      text-align: center;
    }
    &.align-right {
      text-align: right;
    }
  }

  .widget-button {
    padding: 12px 18px;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.1em;
    font-weight: 500;
    text-transform: uppercase;
    border-width: 1px;

    &.widget-button-rectangular {
      border-radius: 2px;
    }

    &.widget-button-rounded {
      border-radius: 18px;
    }

    &:hover,
    &:focus,
    &:active {
      color: #fff !important;
    }
  }

  &[data-border="true"] {
    .#{$item} {
      margin-left: -1px;
      margin-top: -1px;
      border: 1px solid #F2F2F2;

      -webkit-transition: border-color 350ms;
      -moz-transition: border-color 350ms;
      -ms-transition: border-color 350ms;
      -o-transition: border-color 350ms;
      transition: border-color 350ms;
    }
  }

  .#{$item}, .#{$item}-wrapper {
    display: block;
  }

  .#{$item}-wrapper {
    -webkit-transition: box-shadow 350ms;
    -moz-transition: box-shadow 350ms;
    -ms-transition: box-shadow 350ms;
    -o-transition: box-shadow 350ms;
    transition: box-shadow 350ms;
  }

  &[data-columns="4"] .#{$item}-wrapper {
    padding: 20px 30px;

    @media all and (max-width: 1200px) {
      padding: 28px 40px;
    }
    @media all and (max-width: 500px) {
      padding: 28px 16px;
    }
  }

  &[data-columns="3"] .#{$item}-wrapper {
    padding: 30px 70px;

    @media all and (max-width: 768px) {
      padding: 28px 40px;
    }
    @media all and (max-width: 500px) {
      padding: 28px 16px;
    }
  }

  &[data-columns="5"] .#{$item}-wrapper {
    padding: 20px;

    @media all and (max-width: 1024px) {
      padding: 28px 40px;
    }
    @media all and (max-width: 500px) {
      padding: 28px 16px;
    }
  }

  .#{$item}-picture {
    display: block;
    padding-top: 30%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-transition-property: filter, opacity, transform;
    -moz-transition-property: filter, opacity, transform;
    -ms-transition-property: filter, opacity, transform;
    -o-transition-property: filter, opacity, transform;
    transition-property: filter, opacity, transform;
    
    -webkit-transition-duration: 350ms;
    -moz-transition-duration: 350ms;
    -ms-transition-duration: 350ms;
    -o-transition-duration: 350ms;
    transition-duration: 350ms;
  }

  .#{$item}-wrapper:hover {
    .#{$item}-picture {
      opacity: 1 !important;
    }
  }

  &[data-effect-1="grayscale"], &[data-effect-2="grayscale"] {
    .#{$item}-picture {
      -webkit-filter: grayscale(1);
      filter: grayscale(1);
    }
  }

  &[data-effect-1="zoom"], &[data-effect-2="zoom"] {
    .#{$item}-wrapper:hover {
      .#{$item}-picture {
        -webkit-transform: scale(1.25);
        -moz-transform: scale(1.25);
        -ms-transform: scale(1.25);
        -o-transform: scale(1.25);
        transform: scale(1.25);
      }
    }
  }

  &[data-effect-1="shadow"], &[data-effect-2="shadow"] {
    .#{$item}:hover {
      border-color: transparent;
    }

    .#{$item}-wrapper:hover {
      -webkit-box-shadow: 0 8px 32px rgba(23, 30, 37, 0.08);
      -moz-box-shadow: 0 8px 32px rgba(23, 30, 37, 0.08);
      box-shadow: 0 8px 32px rgba(23, 30, 37, 0.08);
    }
  }

  .#{$item}-wrapper:hover {
    .#{$item}-picture {
      -webkit-filter: none;
      filter: none;
    }
  }
  .widget-all-container {
    display: none;
  }

  .widget-all-button {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #808080;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;

    i {
      display: none;
      font-size: 18px;
    }
  }

  @media all and (max-width: 550px) {
    .widget-all-container {
      display: block;
    }
    .widget-title.align-center.widget-title-margin {
      margin-left: 20px;
    }
    .widget-all-container.mobile {
      text-align: right;
      width: 20px;
      max-height: 36px;
    }
    .widget-all-container i {
      display: inline-block;
    }
    .widget-button-wrap.mobile {
      display: none;
    }
    .widget-all-container {
      width: 20px;
    }
  }
}