﻿.katRsm {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 5px;
    color: #ffffff;
    text-align: center;
}

    .katRsm * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 0.45s ease;
        transition: all 0.45s ease;
    }

    .katRsm img {
        vertical-align: top;
        max-width: 100%;
        backface-visibility: hidden;
        width: 100%;
        height: 325px;
    }

    .katRsm figcaption {
        z-index: 1;
        align-items: center;
        position: relative;
        width: 100%;
        top: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        position: relative;
        height: 100px;
        flex-direction: column;
        justify-content: center;
        background-color: #32327f;
        background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
        padding: 20px 0;
    }

        .katRsm figcaption:before {
            content: '';
            width: 20px;
            height: 20px;
            background-color: #fff;
            top: -20px;
            left: 50%;
            -webkit-transform: translate(-50%, 50%) rotate( 45deg );
            transform: translate(-50%, 50%) rotate( 45deg );
            position: absolute;
        }

    .katRsm h3,
    .katRsm h5 {
        margin: 0;
        letter-spacing: 1px;
    }

    .katRsm h3 {
        font-weight: 500;
        font-size: medium;
        margin-bottom: 10px;
        border-bottom: 1px solid #fff;
        padding-bottom: 5px;
    }

    .katRsm h5 {
        font-weight: bold;
    }

    .katRsm a {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }

    .katRsm:hover > img,
    .katRsm.hover > img {
        opacity: 1;
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
    }

