.posts_block {
    position: relative;
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));*/
    grid-template-columns: repeat(auto-fit, 400px);
    grid-gap: 1rem;
    justify-content: center;
    margin-top: 2.5rem;
}

.blog_posts_no_data {
    width: 100%;
    min-height: 20rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    text-align: center;
    font-size: 1.5rem;
    color: var(--gray_color);
}

    .posts_block .post_item {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-items: flex-start;
        border: 1px solid var(--form_gray_color);
        border-radius: var(--default_border_radius);
        padding-top: 0.5rem;
    }
    .posts_block .post_item[data-is-disabled="true"] {
        border-color: var(--red_light_color);
    }
        .post_item .title_box {
            padding: 0 1rem;
            font-size: 1.2rem;
            font-family: RobotoMedium;
        }
        .post_item .post_title_link,
        .post_item .post_title_link:active,
        .post_item .post_title_link:visited {
            color: var(--dark_color);
        }
        .post_item .post_title_link:hover,
        .post_item .post_title_link:focus {
            color: var(--black_color);
            text-decoration: underline;
        }
        .post_item .description_box {
            flex-grow: 1;
            padding: 0 1rem;
            margin-top: 0.2rem;

            /*max-height: 4.8rem;*/
            /*font-size: 1rem;*/
            /*line-height: 1.2rem;*/
            /*display: -webkit-box;*/
            /*word-break: break-word;*/
            /*-webkit-box-orient: vertical;*/
            /*overflow: hidden!important;*/
            /*text-overflow: ellipsis;*/
            /*-webkit-line-clamp: 4;*/
        }
        .post_item .img_box {
            position: relative;
            width: 100%;
            padding: 0 1rem 0 1rem;
            margin-top: 0.5rem;
        }
            /* Превью поста теперь всегда квадратное (см. blog_edit_post.twig/
               ImageCropLightbox - обрезка только квадратная), поэтому сам блок - квадрат
               по aspect-ratio, а не фиксированная высота под прямоугольник. */
            .post_item .img_box_frame {
                position: relative;
                width: 100%;
                aspect-ratio: 1 / 1;
                overflow: hidden;
                border-radius: var(--default_border_radius);
            }
            .post_item .img_box img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center center;
            }
            .post_item .img_box_frame.has_image_crop img {
                position: absolute;
                max-width: none;
                max-height: none;
            }

        .post_item .post_nav_action_panel {
            width: 100%;
            height: 2.8rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0 0.2rem;
            font-size: 1rem;
            background-color: #f7f7f7;
            border-radius: 0 0 var(--default_border_radius) var(--default_border_radius);
            padding: 0 1rem;
        }
            .post_item .post_nav_action_panel .created_at {
                color: var(--gray_gold_color);
            }
            .post_item[data-is-disabled="true"] .post_nav_action_panel .created_at {
                color: var(--red_light_color);
            }
            .post_item .post_nav_action_panel .action_btn_box {
                display: flex;
                flex-wrap: nowrap;
                justify-content: center;
                align-items: center;
            }
                .post_nav_action_panel .action_btn_box .action_btn {
                    width: 2rem;
                    height: 2rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 50%;
                    cursor: pointer;
                    color: var(--dark_color);
                }
                .post_nav_action_panel .action_btn_box .action_btn:hover {
                    background-color: var(--hover_transparent_color);
                }


@media (max-width: 1280px) {
    .cart {
        /* НЕ шорткод padding - он бы затронул и padding-top, который page_link_nav_panel.css
           намеренно обнуляет (.cart { padding-top: 0; }), чтобы навигационная панель
           Blog/Image gallery была прижата к верху карточки. Тот файл подключается раньше
           этого в <head>, поэтому шорткод здесь (заново выставляющий padding-top: 2rem)
           побеждал бы на любом экране ≤1280px - панель визуально "съезжала" вниз. */
        padding-right: 1rem;
        padding-bottom: 2rem;
        padding-left: 1rem;
    }

    .posts_block {
        /*grid-template-columns: repeat(2, minmax(400px, 1fr));*/
        /*grid-template-columns: repeat(auto-fit, 300px);*/
        /*grid-template-columns: 1fr 1fr;*/
    }
        .post_item .img_box {
            /*height: 200px;*/
        }
}

@media (max-width: 480px) {
    .posts_block {
        grid-template-columns: 1fr;
    }
}