/*******************************************************
 *
 * General
 *
 *******************************************************/

.comm-list {
    display: flex;
    flex-wrap: wrap;
    font-size: 0;
}
    
    .comm-list > article {
        display: inline-block;
        width: 33.33%;
        margin: 0 !important;
        padding: 0 !important;
    }

        .comm-list > article > .entry {
            position: relative;
        }

            .comm-list > article > .entry a {
                display: block;
                position: relative;
            }

                .comm-list > article > .entry a:before {
                    position: absolute;
                    content: '';
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0,0,0,.5);
                    opacity: 0;
                    z-index: 1;
                    transition: all .3s ease-in-out;
                    -webkit-transition: all .3s ease-in-out;
                    -moz-transition: all .3s ease-in-out;
                    -webkit-backface-visibility: hidden;
                }

                    .comm-list > article > .entry a:hover:before {
                        opacity: 1;
                    }

        .comm-list .archive-thumbnail {
            width: 100% !important;
        }

            .comm-list .archive-thumbnail canvas {
                display: block;
                width: 100%;
                height: auto;
                background-size: cover;
                background-position: center;
            }

        .comm-list .archive-content  {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 100%;
            text-align: center;
            color: #fff;
            z-index: 9;
        }

.category-4 #content .archive-subtitle,
.category-5 #content .archive-subtitle,
.category-6 #content .archive-subtitle {
    text-transform: uppercase;
}

/*******************************************************
 *
 * Mobile styles and other media queries
 *
 *******************************************************/


@media only screen and (max-width: 991px) {

    .comm-list > article {
        width: 50%;
    }
    
} 

@media only screen and (max-width: 600px) {
    .comm-list > article {
        width: 100%;
    }
}