.blog-container {
    background: url('/assets/front/images/blog-header-bg.jpeg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 50vh;
    width: 100%;
    overflow: hidden !important;
}

.blog-container .row {
    padding-top: 15vh;
}

.blog-container img.blog-header-logo {
    width: 20%;
}

.blog-box-shadow {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

div.square {
    width: 100%;
}

div.square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.blog-article-category {
    margin-top: 70%;
    padding-top: 5%;
    padding-bottom: 5%;
    width: 70%;
    position: absolute;
    background-color: #2a7c84;
    color: white;
}

.blog-article-category p {
    font-size: 1em;
    font-weight: bold;
    padding-left: 1em;
}

.col-md-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.blog-article-infos h2 {
    font-size: 1.2em;
}

.blog-article-infos a {
    color: #2a7c84;
    text-decoration: underline;
}

.blog-header-detail {
    background: url('/assets/front/images/blog-header-detail.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    left: 70%;
    width: 20%;
    height: 30%;
    top:0;
    position: absolute;
}
.blog-header-mic {
    background: url('/assets/front/images/blog-header-mic.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 40vh;
    height: 20vh;
    position: absolute;
    top: 0%;
}
.blog-header-people {
    background: url('/assets/front/images/blog-header-people.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 30vh;
    height: 30vh;
    position: absolute;
    top: 20%;
}

.blog-container .hero-title {
    color: #030E3F;
    font-weight: 800;
    font-size: 7em;
}

@media (max-width: 980px) {
    .blog-container {
        margin-left: 0%;
        width: 100%;
        height: 30vh;
    }

    .blog-container .row {
        padding-top: 10vh;
    }

    .blog-header-detail {
        left: 75%;
        width: 20%;
        height: 10%;
        top:0;
    }
    .blog-header-mic {
        width: 20vh;
        height: 10vh;
        top: 0%;
    }
    .blog-header-people {
        width: 10vh;
        height: 10vh;
    }

    .blog-container .hero-title {
        font-weight: 500;
        font-size: 3em;
    }

    .articles .col-md-4 {
        height: auto !important;
    }
}