/*********** Table of Contents ***********
    1.0: Sub-articles
*****************************************/
.sub-article {
    overflow: hidden;
    width: 100%;
}
    .sub-article .image-size-width {
        width: 135px;
    }
    .sub-article .image-size-height {
        height: 135px;
        width: 100%;
    }
    .sub-article .article-title {
        font-size: var(--font-size-body);
        color: var(--header-color);
        -webkit-line-clamp: 2;
        font-weight: 600;
    }
a.sub-article:hover {
    text-decoration: none;
}
a.sub-article ul:hover {
    text-decoration: none;
    background: #dedede;
    transition: 0.1s ease;
    padding-left: 5px !important;
    padding-right: 5px !important;
}
.sub-article img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: top;
}
.sub-article .article-title, .sub-article p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3;
}
.sub-article .more-button {
    padding: 0 !important;
    font-size: var(--font-size-body);
}
/*.sub-article .effect {
    width: 75px;
}

    .sub-article .effect.effect-1:before {
        font-size: var(--font-size-body);
    }

.sub-article .effect.effect-1 .material-icons {
    font-size: 15px;
}
.sub-article .effect.effect-1:hover {
    text-indent: -15%;
}
.sub-article .effect.effect-1:hover .material-icons {
    font-size: 15px;
    text-indent: 15%;
}*/

.darkMode a.sub-article ul:hover {
    background: #dedede17 !important;
}