@import branding
@import animations.sass

.darkswarm
  products
    product
      .product-thumb
        @include csstrans
        position: absolute
        top: 3px
        left: 0px
        width: 7rem
        height: 7rem
        outline: 1px solid $disabled-bright
        float: left
        display: block
        z-index: 999999
        background-color: white
        overflow: hidden
        i
          @include csstrans
          transition-delay: 150ms
          position: absolute
          left: 45%
          top: 45%
          z-index: 99999
          color: white
          font-size: 1rem
          opacity: 0
        img
          @include csstrans
          opacity: 1
          @include transform-scale(scale(1))
        
        &:hover, &:focus, &:active
          background-color: $clr-brick
          i
            left: 32%
            top: 30%
            font-size: 3rem
            opacity: 1
          img
            opacity: 0.5
            @include transform-scale(scale(1.1))

        @media all and (max-width: 768px)
          top: 2px
          width: 4rem
          height: 4rem
          &:hover, &:focus, &:active
            i
              left: 30%
              top: 30%
              font-size: 2rem
        @media all and (max-width: 640px)
          display: none
          width: 0rem
          height: 0rem

          
@import branding
@import animations.sass

.darkswarm
  products
    product
      .product-thumb
        @include csstrans
        position: absolute
        top: 2px
        left: 0px
        width: 7rem
        height: 7rem
        float: left
        display: block
        z-index: 999999
        background-color: white
        overflow: hidden
        i
          @include csstrans
          transition-delay: 150ms
          position: absolute
          left: 45%
          top: 45%
          z-index: 99999
          color: white
          font-size: 1rem
          opacity: 0
        img
          @include csstrans
          opacity: 1
          @include transform-scale(scale(1))
        
        &:hover, &:focus, &:active
          background-color: $clr-brick
          i
            left: 32%
            top: 30%
            font-size: 3rem
            opacity: 1
          img
            opacity: 0.5
            @include transform-scale(scale(1.1))

        @media all and (max-width: 768px)
          top: 2px
          width: 4rem
          height: 4rem
          &:hover, &:focus, &:active
            i
              left: 30%
              top: 30%
              font-size: 2rem
        @media all and (max-width: 640px)
          display: none
          width: 0rem
          height: 0rem

          
Remove border on product thumbnail to clean up UI
Remove border on product thumbnail to clean up UI
