// Hard Single Item
.hard-single-item {
    .thumb {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        min-height: 360px;
        border-radius: 5px;
        canvas {
            position: initial;
        }
    }
    .content {
        margin-top: 20px;
        .title {
            font-size: 24px;
            line-height: 34px;
            color: #16215c;
            font-weight: 500;
            margin-bottom: 10px;
        }
        .catagory {
            font-size: 14px;
            line-height: 24px;
        }
    }
}

.hard-single-item-02 {
    &:hover {
        .thumb {
            &::after {
                opacity: 1;
                visibility: visible;
            }
            .content {
                opacity: 1;
                visibility: visible;
            }
        }
    }
    .thumb {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        min-height: 460px;
        border-radius: 5px;
        position: relative;
        z-index: 0;
        transition: all 500ms ease-out;
        canvas {
            position: initial;
        }
        &:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            visibility: hidden;
            opacity: 0;
            transition: all 500ms ease-out;
            background: linear-gradient(to top, rgba(21, 21, 41, 0.7) 30%, rgba(255, 0, 0, 0) 60%);
        }
        .content {
            position: absolute;
            bottom: 0;
            padding-left: 40px;
            padding-bottom: 50px;
            margin-top: 20px;
            opacity: 0;
            visibility: hidden;
            transition: all 500ms ease-out;
            .title {
                font-size: 30px;
                line-height: 40px;
                color: #fff;
                font-weight: 700;
                margin-bottom: 0;
            }
            .catagory {
                color: $white;
                font-size: 16px;
                line-height: 24px;
            }
        }
    }
}