*{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
body{
    padding-top: 30px;
    margin: 0;
    background-color: #2f404f;
    font-family: 'Open Sans', sans-serif;
}
img{
    max-width: 100%;
}
figure{
    margin: 0;
}
a{
    text-decoration: none;
}
.container {
    margin: 0 auto;
    padding-right: 15px;
    padding-left: 15px;
}
@media (min-width: 576px){
   .container {
        width: 540px;
        max-width: 100%;
    } 
}
@media (min-width: 768px){
   .container {
        width: 720px;
        max-width: 100%;
    } 
}
@media (min-width: 992px){
   .container {
        width: 960px;
        max-width: 100%;
    } 
}
@media (min-width: 1200px){
   .container {
        width: 1140px;
        max-width: 100%;
    } 
}
.article{
    margin-bottom: 30px;
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
}
.article-infos{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    font-size: 14px;
}
.article-figure{
    font-size: 0;
}
.article-figure a{
    display: block;
}
.article-figure img{
    width: 100%;
}
.article-content{
    padding: 15px;
    color: #6c748b;
}
.article-title{
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
}
.article-title a{
    color: #6c748b;
    text-transform: uppercase;
}
.article-text{
    font-size: 14px;
}
.article-btn{
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #2f404f;
    color: #fff;
    font-size: 14px;
}
@media screen and (min-width: 768px) {
    .article{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .article-figure{
        -ms-flex-preferred-size: 40%;
            flex-basis: 40%;
    }
    .article-content{
        -ms-flex-preferred-size: 60%;
            flex-basis: 60%;
    }
}