@import url(../../variables/colorVariables.css);
@import url(../../variables/variables.css);




/************************** OTHER-TOPICS-CONTAINER START ****************************/
/***********************************************************************************/

#other-topics-container {
    padding: 23px 10px 0 20px ;
    height: auto;
    width: 38%;
}

#topics-container{
    height: 100%;
    width: 100%;
    border-radius: var(--default-border-radius);
    box-shadow: var(--default-shadow);
}


.other-topic-container{
    padding: 23px 15px;
}

.topic-article{
    border-radius: var(--small-articles-radius);
    box-shadow: var(--default-shadow);
    height: 130px;
    width: 100%;
}

.topic-article:not(:first-child){
    margin-top: 15px;
}

.topic-article .article-image{
    width: 38%;
    height: 100%;
    border-radius: var(--default-border-radius);
    padding: 8px;
}

.topic-article .article-image *{
    border-radius: var(--default-border-radius);
}

.topic-article .topic-title-container{
    width: 62%;
    height: 100%;
    padding: 5px;
}

.topic-article .topic-title-container .topic-title{
    width: 62%;
    height: 80%;
}

.topic-article .topic-title-container .topic-title a {
    text-decoration: none;
    cursor: pointer;
    color: black;
    padding: 0 5px;
    font-size: 30px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    user-select: none;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.topic-article .topic-title-container .topic-title a:hover {
    text-decoration: none;
    color: var(--site-primary);
}

.topic-history {
    height: 20%;
    width: 100%;
}

.topic-history .small-article-history {
    padding: 0 5px;
    color: var(--default-history-color);
    font-size: 20px;
}
.topic-history .small-article-history .article-icon{
    font-size: 18px;
}

.topic-history .small-article-history .article-history {
    padding: 0 5px;
    line-height: 1.25;
}


@media screen and (min-width: 650px) and (max-width: 1100px) {

    #other-topics-container {
        padding: 23px;
        height: auto;
        width: 100%;
    }

    #all-other-topics-container{
        height: auto;
        display: grid;
        grid-template-columns: 50% 50%;

    }

    .topic-article{
        /*width: unset;*/
    }
    .site-separator{
        display: none;
    }

}


@media screen and (min-width: 0px) and (max-width: 650px) {

    #other-topics-container {
        padding: 23px 10px;
        height: auto;
        width: 100%;
    }

    #all-other-topics-container{
        height: auto;
        display: grid;
        grid-template-columns: 100%;

    }

    .other-topic-container{
        padding: 23px 10px;
    }


    .topic-article .article-image{
        width: 40%;
    }

    .topic-article .topic-title-container{
        width: 60%;
        height: 100%;
        padding: 5px;
    }


    .topic-article .topic-title-container .topic-title a{
        font-size: 24px !important;
        -webkit-line-clamp: 3;
    }

    .topic-article{
        flex-direction: column ;
    }

    .topic-article{
        /*width: unset;*/
    }

    .site-separator{
        display: none;
    }
    .topic-history .small-article-history .article-history {
        font-size: 15px !important;
    }

}




/************************** OTHER-TOPICS-CONTAINER END ****************************/
/***********************************************************************************/