@foreach (Site::mainCategories() as $key => $item)
@if ( $item->image != null && $item->content->content != null )
    <div class="bg-light">
        <div class="row pt-sm-0 pt-3" style="margin-bottom: 100px">
            <div class="col-md-7 col-sm-7 col-12 @if($key %2 != 0) order-sm-last @endif">
                @if ( $item->image != null )
                <div class="bg-white">
                    <a href="{{ Common::category_url($item) }}" class="td-none d-block"  @if($key %2 != 0) style="border-radius: 10px 0px 0px 10px" @else style="border-radius: 0px 10px 10px 0px" @endif>
                        <img src="{{ Common::get_category_original_image($item->id, $item->image) }}" @if($key %2 != 0) class="homecategoryimage-left" @else class="homecategoryimage-right" @endif alt="{{ $item->content->name ?? translate('category') }}" style="max-width: 100%;">
                    </a>
                </div>
                @else

                @endif
            </div>
            <div class="col-md-5 col-sm-5 col-12 pt-sm-0 pt-3">
                <div class="display-table">
                    <div class="display-table-cell p-5">
                        <h3 class="fs-45px">{{ $item->content->name ?? translate('category') }}</h3>
                        <div class="site-heading-line mt-3 mb-3"></div>
                        
                        <div style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 6;line-clamp: 6;-webkit-box-orient: vertical;">
                            <p>
                                {!! $item->content->content !!}
                            </p>
                        </div>

                        <hr>
                        <a href="{{ Common::category_url($item) }}" class="btn td-none fs-3 p-0">
                            <div class="d-flex align-items-center justify-content-center">
                                <span class="rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 46px; height: 46px; border: 1px solid #aaa">
                                    <i class="fa fa-angle-right"></i>
                                </span>
                                {{ translate('show_product') }}
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div><!-- row -->
    </div>
@endif
@endforeach