/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

.posts-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 40px;
}

.posts-list .post {
    background: white;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-radius: 4px 4px 0px 0px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);
    position: relative;
    cursor: pointer;
    --size: calc(100%/3 - 40px*2/3);
    min-width: var(--size);
    max-width: var(--size);
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    border-radius: 8px;
    overflow: hidden;
}

.posts-list .post.active {
    background: white;
    min-width: 100%;
    margin-bottom: 40px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);

}

@media (max-width: 480px) {
    .posts-list {
        width: 100%;
    }

    .posts-list .post {
        --size: calc(100vw - 140px);
        height: 65vw;
    }




}

.posts-list img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    height: calc(100% * 0.625)
}

.posts-list .post-text {
    padding: 15px 15px;
    background: white;
    border-radius: 0px 0px 4px 4px;
}

.posts-list h3 {
    color: black;
    font-size: 18px;
}

@media (min-width:481px) and (max-width:1024px) {

    .posts-list .post {
        --size: calc(100vw/2 - 190px)
    }
}