/*******************************************************************
 * Сетка мозаики
 *******************************************************************/

.mosaic-00 {
    display: grid;
    gap: 16px;
    margin-bottom: 32px;
    justify-items: stretch;
    /* mobile or 1 item */
    grid-template-columns: 1fr;
}

.mosaic-00__count-0 {
    display: none !important;
}

@media (min-width: 768px) {
    /* 2 items  */

    .mosaic-00__count-2 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    /* 3 items  */

    .mosaic-00__count-3 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .mosaic-00__count-3 .mosaic-00__item:first-child {
        grid-area: 1 / 1 / 2 / 3;
    }

    /* 4 items  */

    .mosaic-00__count-4 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    /* 5 items  */

    .mosaic-00__count-5 {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .mosaic-00__count-5 .mosaic-00__item:first-child {
        grid-area: 1 / 1 / 2 / 3;
    }
}

.mosaic-00__item {
    position: relative;
    background: #999999;
    color: #FFFFFF;
    height: 250px;
}

@media (min-width: 576px) {
    .mosaic-00__item {
        height: 300px;
    }
}

@media (min-width: 768px) {
    .mosaic-00__item {
        height: 400px;
    }
}

@media (min-width: 1200px) {
    .mosaic-00__item {
        height: 500px;
    }
}

/*******************************************************************
 * Стили постов мозаики
 *******************************************************************/

.mosaic-00-post {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.mosaic-00-post-head {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    margin: 18px;
    display: grid;
    gap: 14px;
}

.mosaic-00-post-header__date {
    font-size: 13px;
}

.mosaic-00-post-header__header {
    font-size: 17px;
}

.mosaic-00-post-header__icons,
.mosaic-00-post-header__icons > a,
.mosaic-00-post-header__icons > span {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 15px;
    color: #FFFFFF;
    text-decoration: none;
}

.mosaic-00-post-header__icons > a,
.mosaic-00-post-header__icons > span {
    margin-right: 32px;
    width: 60px;
}
.mosaic-00-post-header__icons img {
    margin-right: 16px;
    max-height: 19px;
}