@import url('https://fonts.googleapis.com/css?family=Open+Sans:600,700&subset=cyrillic');
* {
	margin: 0;
	padding: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    background-color: #e2e7ec;	
}

.container {
	max-width: 1120px;
	min-width: 320px;
	margin: 90px auto;
}

.posts {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    
}

.posts__element {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: #fff;
    -ms-flex-preferred-size: 32%;
        flex-basis: 32%;/*В px это 360px взято с макета ширина всех элементов кроме первого. И еще это св-во задается f-э, а контейнир у них
                    posts, в котором направление гл. оси слево-направо. Поэтому это св-во относится к ширине элемента в контейнере!!! */
    margin-bottom: 22px;
    position: relative;/*Это нам нужно, чтобы внутри нашего элемента позиционировать др элементы, н-р текст в первом элементе*/
}

.posts__element > img {
    display: block;/*То есть мы картинки сделали блоками обычными, а не f-э-ми в контейнере - posts__element*/
    width: 100%;/*После добавления этого правила первая картинка по размерам стала как остальные. Чтобы изображение растягивалось это добавлено.*/
}

.posts__info {
    padding: 15px 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;/*Это нужно, чтобы наш флекс-контейнер(который в тоже время является f-э во f-к posts__element) растягивался на всю высоту и
                 текст в первом элементе встал вниз элемента*/
}

.posts__info h2 {
    margin-bottom: auto;/*Заголовок явл. f-э и за счет этого св-ва он поттягивается вверх, т.к. перестает работать св-во
                         justify-content: space-between; для контейнера. А это то что нам надо, т.к. наш заголовок располагается сразу за датой.*/
    margin-top: 3px;
    font-size: 22px;
    line-height: 30px;   
}

.posts__info h2 a {
    font-size: 22px;
    font-weight: 700;/*700 - это жирное начертание*/
    line-height: 30px;
    color: #1d1d1d;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.55px;/*Межсимвольный интервал(VA) - по фотошопу задан 25. Для перевода в пикселы 25*22px(размер шрифта)/1000*/
}

.posts__info h2 a:hover {
    text-decoration: underline;
}

.posts__date {
    font-size: 13px;
    font-weight: 600;/*600 - это полужирное начертание*/
    line-height: 30px;
    color: #818181;
    letter-spacing: 0.325px;
    text-transform: uppercase;
    margin: 3px 0;
}

.posts__author {
    margin-top: 55px;
}

.posts__element--big {
    -ms-flex-preferred-size: 66%;
        flex-basis: 66%;    
}

.posts__element--big img {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;/*Чтобы изображение по высоте растягивалось. У меня до этого работало - height: 100%;*/
    /*position: relative;
    z-index: 1;*/
}

.posts__element--big .posts__info {
    position: absolute;
    left: 6%;/*Добавлено 50px*/
    bottom: 6%;/*Добавлено 35px*/
    width: 65%;/*Добавлено padding-right: 25px, чтобы справо текст не упирался в край*/
    z-index: 5;/*Это нужно, чтобы posts__info был над другими изображениями и был виден белый цвет заголовка*/
}

.posts__element--big .posts__info h2 a {
    font-size: 30px;
    line-height: 36px;
    color: #fff;
    letter-spacing: 0.75px;
    /*font-weight: 700;
    text-decoration: none;
    text-transform: uppercase; Эти св-ва наследуются от общей ссылки для блока - posts__info*/    
}

.posts__element--big::after {/*Здесь у нас на большую картинку наложен градиент при помощи добавления псевдоэлемента*/
    content: "";
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.8)), to(rgba(0,0,0,0)));
    background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.8), rgba(0,0,0,0));
    background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.8), rgba(0,0,0,0));
    background-image: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));/*Когда градиент был ниже position: absolute; то не работал
                                                                              z-index: 5; для .posts__element--big .posts__info */
    position: absolute;
    left: 0;
    top: 0;
}

.returnBut {
    position: fixed;
    width: 25px;
    height: 200px;
    left: 0;
    top: 90px;
    z-index: 10;
}



@media screen and (max-width: 980px) {
    
    .posts__date {
        font-size: 12px;        
    }
    
    .posts__info h2 {
        font-size: 16px;
        line-height: 24px;
    }
    
    .posts__info h2 a {
        font-size: 16px;
        line-height: 24px;
    }
    
    .posts__info {
        padding: 10px 15px 15px 15px;
    }
    
    .posts__element--big .posts__info h2 a {
        font-size: 20px;
        line-height: 26px;
    }
        
}


@media screen and (max-width: 768px) {
    
    .posts__element {
        -ms-flex-preferred-size: 49%;
            flex-basis: 49%;
    }
    
    .posts__element--big img {
        -webkit-box-flex: 0;
            -ms-flex-positive: 0;
                flex-grow: 0;    
    }
    
    .posts__element--big .posts__info {
        position: static;
        left: auto;
        bottom: auto;
        padding: 10px 15px 15px 15px;
    }
    
    .posts__element--big::after {
        display: none;
    }
    
    .posts__element--big .posts__info h2 a {
        font-size: 16px;
        line-height: 24px;
        color: #1d1d1d;    
    }
    
}

@media screen and (max-width: 480px) {
    .posts__element {
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    }    
}