{% set a_img_width  = '100%' %}
{% set a_img_height =  80    %} 
{% set b_img_width  = '100%' %}
{% set b_img_height =  80    %}

<a href="{{item.url}}" class="card_versus p-4 bg-white flex items-center relative max-w-screen lg:rounded-[12px] lg:shadow-md lg:m-2">


    <div class="w-1/2 flex items-center justify-between">
        <div class="pr-2 w-2/3">
            <div class="font-semibold text-sm text-right">{{item.sideleft.title}}</div>
        </div>
        <div class="w-16 text-center h-20 max-h-20 flex items-center flex-shrink-0">
            <img class="block mx-auto object-contain max-h-20" width="{{a_img_width}}" height="{{a_img_height}}" src="{{item.sideleft.image_url}}" alt="{{item.sideleft.title}}">
        </div>
    </div>

    <div class="text-gray-300 absolute right-2/4 -mr-2">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
            <path fill-rule="evenodd" d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z" clip-rule="evenodd" />
        </svg>
          
    </div>

    <div class="w-1/2 flex items-center justify-between ">
        <div class="w-16 text-center h-20 max-h-20 flex items-center">
            <img class="block mx-auto object-contain max-h-20" width="{{b_img_width}}" height="{{b_img_height}}" src="{{item.sideright.image_url}}" alt="{{item.sideright.title}}">
        </div>
        <div class="pl-2 w-2/3">
            <div class="font-semibold text-sm">{{item.sideright.title}}</div>
        </div>
    
    </div>


</a>