@media only screen and (min-width: 0) {
    div.imgList_odd {
        width: 100%;
        float: left;
        margin-bottom: 1em;
    }

    div.imgListTitle_odd {
        width: 100%;
        border-bottom: 1px solid #CCC;
        position: relative;
    }

    div.imgListTitle_odd img {
        display: none;
    }

    div.imgListTitle_odd h2 {
        border-bottom: 3px solid rgb(42, 71, 191);
        z-index: 1;
        position: relative;
        bottom: -2px;
        padding-right: .5em;
    }

    div.imgListTitle_odd span {
        display: none;
    }

    div.imgListBlock_odd {
        width: 100%;
        float: left;
        margin-top: .5em;
    }

    div.imgListContent_odd {
        width: calc(100% - 2px);
        float: left;
        margin-bottom: .5em;
        border: 1px solid rgb(24, 56, 71, .2);
        background-color: rgba(240,240,240, .15);
    }

    div.imgListContent_odd div.img {
        width: 100%;
        position: relative;
    }

    div.imgListContent_odd div.img::before {
        content: "";
        display: block;
        margin-top: 56.25%;
    }

    div.imgListContent_odd div.img img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: contain;
        object-position: center;
        background-color: black;
    }

    div.imgListContent_odd div.text {
    }

    div.imgListContent_odd div.text a {
        width: calc(100% - 3em);
        height: calc(1em * 1.5 * 2);
        margin: 1em 1.5em;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    div.imgListContent_odd div.text span {
        display: none;
    }
}

@media only screen and (min-width: 1000px){
    div.imgListContent_odd {
        width: calc(33% - 2px - 1em);
        margin-left: .5em;
        margin-right: .5em;
    }
}

@media only screen and (min-width: 1281px){
    div.imgListContent_odd {
        width: calc(25% - 2px - 1em);
    }
}