body {
    padding : 0;
    margin : 0;
    font-family : "Roboto Condensed", sans-serif;
}
a {
    text-decoration : none;
}
img {
    max-width : 100%;
}
.grid-block-1 {
    display : grid;
    grid-template-columns :  1fr 1fr;
}
@media(max-width : 767px) {
    .grid-block-1 {
        grid-template-columns: 1fr;
    }
}
.grid-block-1 .content {
    padding : 30px;
    display : flex;
}
.grid-block-1 .content .holder {
    margin : auto 20px;
}
@media(max-width : 767px) {
    .grid-block-1 .content {
        padding : 20px;
        display : block;
    }
    .grid-block-1 .content .holder {
        margin : 0;
    }
}
.grid-block-1 .content h2 {
    font-weight : bold;
    font-size : 28px;
    margin : 0 0 30px;
    position : relative;
}
.grid-block-1 .content h2::before {
    content : '';
    position : absolute;
    left : 0;
    bottom : -10px;
    width : 40px;
    height : 2px;
    background-color : #31577e;
}
.grid-block-1 .content p {
    font-size : 16px;
    line-height : 22px;
}
.grid-block-1 .content.dark {
    background-color : #222;
}
.grid-block-1 .content.dark h2,
.grid-block-1 .content.dark p {
    color : #fff;
}
.grid-block-1 .content .btn-1 {
    border : 2px solid #222;
    color : #222;
    padding : 6px 16px;
    text-transform: uppercase;
    font-weight : bold;
    display : inline-block;
    margin-top : 10px;
}
.grid-block-1 .content.dark .btn-1 {
    border-color : #fff;
    color : #fff;
}
.grid-block-1 .imgs img {
    width : 100%;
    height : 100%;
    object-fit : cover;
}
.grid-block-1 .imgs-xs {
    display : none;
}
@media(max-width : 767px) {
    .grid-block-1 .imgs.xs-hidden {
        display : none;
    }
    .grid-block-1 .imgs-xs {
        display : block;
    }
}