/****************************************************************************
 * Container
 ****************************************************************************/
.listing .listing_item{
    flex: 0 0 100%;
    width: 100%;
}
.listing .listing_inner{
    position: relative; width: 100%;
}

/****************************************************************************
 * Image
 ****************************************************************************/
.listing .listing_image{
    padding: 0 0 56.25%; margin: 0 0 .5rem;
}


/****************************************************************************
 * Title
 ****************************************************************************/
.listing .listing_titles{
    font-size: 1rem; margin: 0 0 .5rem;
}
.listing .listing_titles .listing_title{
    font-size: 1.25em;
}
.listing .listing_titles .listing_sub_title{
    font-size: 1.125em;
}

/****************************************************************************
 * With Filtering
 ****************************************************************************/
.filter + .listing .listing_item{
    -webkit-transition: opacity .5s ease .25s, visibility .5s ease .25s, width .25s ease, padding .25s ease, flex .25s ease;
    -moz-transition: opacity .5s ease .25s, visibility .5s ease .25s, width .25s ease, padding .25s ease, flex .25s ease;
    -ms-transition: opacity .5s ease .25s, visibility .5s ease .25s, width .25s ease, padding .25s ease, flex .25s ease;
    -o-transition: opacity .5s ease .25s, visibility .5s ease .25s, width .25s ease, padding .25s ease, flex .25s ease;
    transition: opacity .5s ease .25s, visibility .5s ease .25s, width .25s ease, padding .25s ease, flex .25s ease;
    overflow: hidden;
}

.filter + .listing .listing_item.listing_item_width0{
    -webkit-transition: opacity .5s ease, visibility .5s ease, width .25s ease .5s, padding .25s ease .5s, flex .25s ease .5s;
    -moz-transition: opacity .5s ease, visibility .5s ease, width .25s ease .5s, padding .25s ease .5s, flex .25s ease .5s;
    -ms-transition: opacity .5s ease, visibility .5s ease, width .25s ease .5s, padding .25s ease .5s, flex .25s ease .5s;
    -o-transition: opacity .5s ease, visibility .5s ease, width .25s ease .5s, padding .25s ease .5s, flex .25s ease .5s;
    transition: opacity .5s ease, visibility .5s ease, width .25s ease .5s, padding .25s ease .5s, flex .25s ease .5s;
    padding: 0; opacity: 0; visibility: hidden;
    width: 0; flex: 0 0 0;
}

@media screen and (min-width:25em){
    /****************************************************************************
     * Container
     ****************************************************************************/
    .listing .listing_item{
        flex: 0 0 50%;
        width: 50%;
    }
}


@media screen and (min-width:40em){
    /****************************************************************************
     * Container
     ****************************************************************************/
    .listing .listing_item{
        flex: 0 0 33.333%;
        width: 33.333%;
    }
}

@media screen and (min-width:64em){
    /****************************************************************************
     * Container
     ****************************************************************************/
    .listing .listing_item{
        flex: 0 0 25%;
        width: 25%;
    }
}