<link href="{$template_shop_path}/visual/modules/common/service-info/css/style.css" rel="stylesheet">
<div class="col-md-12">
    <div class="service-info service-info-$_id">
        {loop archive($_catid,$_typeid,$_spid,$_area,$_length,$_ordertype,$_limit,$_image,$_attr1,$_son,$_wheretype,$_tpl,$_intro_len,$_istop) $archive}
        <div class="service-info-item">
            <img alt="{$archive['stitle']}" cmseasy-id="{$archive['aid']}" cmseasy-table="archive" cmseasy-field="thumb" class="cmseasyeditimg lazy" src="{$archive['thumb']}" />
            <h5 cmseasy-id="{$archive['aid']}" cmseasy-table="archive" cmseasy-field="title" class="cmseasyedit ">
                {$archive['title']}
            </h5>
        </div>
        {/loop}
    </div>
</div>

<style type="text/css">
    .service-info-$_id {
        background:$_background-color;
        border-color:$_background-border-color;
    }
    .service-info-$_id:hover {
        background:$_background-hover-color;
        border-color:$_background-border-hover-color;
    }
    .service-info-$_id .service-info-item h5 {
        font-size:$_link-font-size;
        color:$_link-color;
        border-color:$_link-border-color;
        border-radius: $_link-border-radius;
        background:$_link-background-color;
    }

    .service-info-$_id .service-info-item h5:hover {
        color:$_link-hover-color;
        border-color:$_link-border-hover-color;
        border-radius: $_link-border-hover-radius;
        background:$_link-background-hover-color;
    }

    .service-info-$_id .service-info-item:nth-child(n+2){
        border-color:$_background-border-color;
    }

</style>
