{% block styles %}
    {{ asset_style("visiosoft.theme.base::css/post.scss") }}
    <style>
        .container{
            max-width: 100% !important;
        }
        .news-img-height{
            height: 300px ;
            object-fit: contain;
        }

        .news-cover-img-wrapper {
            padding: 20px;
            color: black;
        }
    </style>
{% endblock %}
<div class="row mt-2 mb-4 px-0 flex-column">
    <div class="d-flex justify-content-between align-items-center mb-2 py-2 px-4">
        <h5 class="text-left mr-2">{{ trans('visiosoft.theme.base::field.news_title', {name: setting_value('streams::name')}) }}</h5>
        <a href="{{ url('posts') }}" class="btn btn-outline-primary all-post-btn d-none d-md-block">
            {{ trans('visiosoft.theme.base::field.all_news') }}
        </a>
    </div>
    <div class="row">
        {% if entries('posts','types').findBySlug('default') %}
            {% set posts = entries('posts').type('default').live().limit(4).get() %}
            {% for post in posts %}
            <div class="col-4 mt-2">
                <div class="px-2">
                    <div
                        class="fs-14 product rounded position-relative bg-white link-dark text-decoration-none border">
                        <div class="product-img d-flex justify-content-center">
                            <a href="{{ post.route('view') }}" class="news-cover-img-wrapper">
                                {{ img( post.cover_image.make.url ?? 'visiosoft.theme.base::images/no-image.png').class("w-100 news-img-height")|raw }}
                            </a>
                        </div>
                        <div class="text-center product-text-area p-3">
                            <div class="fw-500 text-dark single-line">
                                <a href="{{ post.route('view') }}" class="text-dark">
                                    {{ post.title }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        {% endif %}
    </div>
    <a href="{{ url('posts') }}" class="btn btn-outline-yellow mx-2 all-post-btn d-block d-md-none fs-16 font-weight-bold py-2">
        {{ trans('visiosoft.theme.base::field.all_news') }}
    </a>
</div>