.text-article{
    text-align: center;
    font-size: 1.5em;
    margin: 1%;
}

.article-container {
    display: flex;
    flex-flow: row wrap;
    width: 65%;
    margin: 0 auto;
}


.article {
    flex: 0 0 23%;
    height: 16em;
    background: #FFFF;
    box-shadow: 1px 1px 15px -6px rgb(133 130 130);
    margin-left: 1.5%;
    margin-bottom: 3%;
    border-radius: 3px;

}

.article img {
    width: 100%;
    border-radius: 3px;
    height: 60%;
    margin-bottom: 10px;
}

.article .card-body {
    padding: 1rem;
}

.article .card-body .title {
    height: 50px;
    max-height: 12.5em;
    line-height: 1.4;
    font-size: 1.2em;
    font-weight: bold;
    color: #2b4f95;
    margin-bottom: 15px;
}


.article .card-body .title:hover {
    text-decoration: underline;
}


@media (min-width: 1400px) and (max-width: 1440px) {

    .article-container {
        width: 76%;
    }

    .article {
        flex: 0 0 25%;
        height: 20em;
        margin-left: 2.5%;
    }

    .article img {
        height: 50%;
    }

    .article .card-body .title {
        font-size: 1.3em;
    }

    .article .card-body .introduction {
        width: 100%;
        font-size: 0.93em;
    }

    

  
}

/* 1366 * 768 */

@media (min-width: 1366px) and (max-width: 1399px) {

    .article-container {
        width: 76%;
    }

    .article {
        flex: 0 0 29%;
        height: 26em;
        margin-left: 2.5%;
    }

    .article img {
        height: 50%;
    }

    .article .card-body .title {
        font-size: 1em;
    }

    .article .card-body .introduction {
        width: 100%;
        font-size: 16px;
    }


}

/* 1280px * 800 */

@media (min-width: 1280px) and (max-width: 1365px) {
    
    .article-container {
        width: 70%;
    }

    .article {
        flex: 0 0 30%;
        margin-left: 2.5%;
    }
}

/* 1024px * 600 */

@media (min-width: 1024px) and (max-width: 1279px) {

    .article {
        flex: 0 0 30%;
    }

    .article-container {
        width: 82%;
    }
}