// THUMB
// for js tilt (add parallax effect)
@include desktop{

    .thumb{
        transform-style: preserve-3d;
    }
    .thumb__content{
        transform: translateZ(1.5rem);
    }
}
.thumb{
    // overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(45deg, adjust-hue($main, -20%), adjust-hue($main, 20%));
}

.thumb__image{
    overflow: hidden;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    img{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    // top and bottom vignettes
    &:before{
        content: '';
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4.5rem;
        background: linear-gradient(rgba($grey--dark, 0.33), rgba($grey--dark, 0));
    }
    &:after{
        content: '';
        z-index: 1;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(rgba($grey--dark, 0), rgba($grey--dark, 0.33));
    }

    @include desktop{

        img{
            @include transition(opacity);
        }
    }
}
@include desktop{

    .thumb:hover .thumb__image img{
        opacity: 0.25;
    }
}

.thumb__category{
    z-index: 2;
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    display: inline-block;
    padding-right: 3rem;

    span{
        display: block;
        line-height: $font-leading;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: white;
    }

    @include desktop{

        // left & right borders
        &:before,
        &:after{
            content: '';
            position: absolute;
            top: 50%;
            margin-top: -1px;
            height: 2px;
            width: 2.5rem;
            background: white;
            @include transition(transform);
        }
        &:before{
            left: 0;
            transform: scaleX(0);
            transform-origin: left;
        }
        &:after{
            right: 0;
            transform-origin: right;
        }

        span{
            @include transition(transform);
        }
    }
}
@include desktop{

    .thumb:hover .thumb__category{

        &:before{
            transform: scaleX(1);
        }
        &:after{
            transform: scaleX(0);
        }
        span{
            transform: translate3d(3rem, 0, 0);
        }
    }
}

.thumb__content{
    z-index: 2;
    position: relative;
    padding: 1.5rem;
    padding-top: 15rem;
    // background: linear-gradient(rgba($grey--dark, 0), rgba($grey--dark, 0.33));
}
.thumb__date{
    display: block;
    line-height: $font-leading;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: white;

    @include desktop{
        @include transition;
    }
}
@include desktop{

    .thumb:hover .thumb__date{
        transform: translate3d(0, -1.5rem, 0);
    }
}
.thumb__title{
    margin-top: 0;
    color: white;

    @include desktop{
        @include transition(transform);
    }
}
@include desktop{

    .thumb:hover .thumb__title{
        transform: translate3d(0, -1.5rem, 0);
    }
}
.thumb__view{

    @include mobile{
        display: none;
    }
    @include desktop{
        position: absolute;
        bottom: 1.5rem;
        display: block;
        line-height: $font-leading;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: lighten($main, 35%);
        // hide
        opacity: 0;
        @include transition(opacity);
    }
}
@include desktop{

    .thumb:hover .thumb__view{
        opacity: 1;
    }
}