.mytable  {
    display:table;
}
.myrow  {
    display:table-row;
}
.mycell  {
    display:table-cell;
    box-sizing:border-box;
}
.n-item {
    color:#111;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius:12px;
    box-sizing:border-box;
    background-color:#ffffff;
}
.n-item:hover  {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

@media (max-width:767px) {
    .n-item a {
        display:block;
    }
    .n-thumb-container  {
        display:block;
    }
    .n-content  {
        display:block;
        padding:4px 12px 16px 8px;
    }
    .n-item  {
        margin: 8px 8px 2px 0;
    }
    .mycell  {
        width:100%;
    }
}
@media (min-width:768px) {
    .n-item a {
        display:flex;
        flex-wrap: wrap;
    }
    .n-thumb-container  {
        flex: 0 0 156px;
    }
    .n-content  {
        flex: 1;
        padding: 16px 14px 28px 12px;
    }
    .n-item  {
        margin: 8px 18px 2px 0;
    }
    .mycell  {
        width:60%;
        padding-right:12px;
    }
}


.n-item a {
    text-decoration: none;
    color: inherit;
}


.n-thumb-container {
    padding: 12px;
    margin:12px;
    width: 156px;
    height: 180px;
    background-size: 100% auto;
    background-position: center;
    background-repeat:no-repeat;
}

.n-thumb {
    max-width: 156px;
    border-radius: 8px;
    width: 100%;
    max-height:102px;
}

.n-content {

}

.n-source {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 8px;
}
.n-source-author {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 8px;
    color:#555;
}

.n-title {
    font-size: 19px;
    margin-bottom: 8px;
    line-height:1.5;

    /* color: #00385e; */
    color:#222;
}

.n-ago {
    color: #777;
    font-size: 13px;
}
.n-short-description {
    color: #333;
    font-size: 16px;
    line-height:1.5;
    margin-bottom:10px;
}
.n-item iframe  {
    border-radius:12px;
}