﻿#reportage-videos {
    margin-bottom: 15px;
}

    #reportage-videos .row {
        margin-left: -5px;
        margin-right: -5px;
    }

        #reportage-videos .row > div {
            padding-left: 5px;
            padding-right: 5px;
        }

    #reportage-videos .card {
        background-color: white;
        position: relative;
        margin-bottom: 10px;
    }

    #reportage-videos .card-content {
        padding: 5px;
    }

    #reportage-videos h3 {
        font-size: 0.6em;
        margin: 0;
        font-weight: 600;
        line-height: 1.2;
    }

    #reportage-videos .play-btn {
        position: absolute;
        z-index: 1;
        width: 60px;
        height: 60px;
        top: 22%;
        left: 50%;
        margin-left: -30px;
    }

    #reportage-videos p {
        margin: 0 0 3px;
        font-size: 0.6em;
    }

    #reportage-videos span {
        font-size: 0.62em;
    }

    #reportage-videos .truncate {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #reportage-videos .img-responsive {
        -o-object-fit: cover;
        object-fit: cover;
        height: 160px;
        width: 100%;
        font-family: 'object-fit: cover;';
    }

@media screen and (max-width: 1650px) {
    #reportage-videos .play {
        top: 20px;
    }
}

@media screen and (max-width: 1200px) {
    #reportage-videos .play {
        width: 46px;
        height: 46px;
        margin-left: -30px;
        top: 42px;
    }
}

@media screen and (max-width: 991px) {
    #reportage-videos .play {
        top: 42px;
        width: 60px;
        height: 60px;
        margin-left: -23px;
    }
}

@media screen and (max-width: 767px) {
    #reportage-videos {
        display: none;
    }
}
