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

:root{

}



.all-topics-container{
    height: auto;
    width: 100%;
    padding: 23px 20px;
}

#topics{
    box-shadow: var(--default-shadow);
    border-radius: var(--default-border-radius);
    border: 1px solid var(--default-border-color);
    height: 100%;
}

#topics #topics-grid{
    /*padding: 15px;*/
    display: grid;
    grid-template-columns: repeat(auto-fit, 25%);
    justify-content: start;
    align-items: start;
    padding: 12px ;

}

#topics #topics-grid .topic{
    box-shadow: var(--default-shadow);
    border-radius: var(--default-border-radius);
    border: 1px solid var(--default-border-color);
    height: 100%;
    width: 100%;
    z-index: 0;
}

#topics #topics-grid .topic .topic-image{
    width: 100%;
    height: 100%;
    transition: var(--default-ms) height,var(--default-ms) width;
    z-index: 1;
}

#topics #topics-grid div .topic .topic-title{
    top: 50%;
    left: 50%;
    width: 85%;
    height: auto;
    z-index: 4;
    font-size: 30px;
    color: var(--site-tertiary);
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

#topics #topics-grid div .topic:hover .topic-image {
    width: 108%;
    height: 108%;
}


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

    #topics #topics-grid{
        grid-template-columns: repeat(auto-fit,33.3%);
    }

}
@media screen and (min-width: 500px) and (max-width: 700px) {

    #topics #topics-grid{
        grid-template-columns: repeat(auto-fit, 50%);
    }

}

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

    #topics #topics-grid{
        grid-template-columns: repeat(auto-fit, 100%);
    }

}