<div class="property-item">
  <a href="{{ url(item.uri) }}" alt=" item.title}}" class="img">

    {% if transform %}
      {% set imgPath = item.pictures.one().getUrl('resizeTo400Webp') %}
    {% else %}
      {% set imgPath = item.pictures.one().getUrl() %}
    {% endif %}
    
    <img src="{{ imgPath }}" style='object-fit: fill;width:100%;height:350px' alt="Image">
  </a>

  <div class="property-content">
    <div class="price mb-2"><span>${{ item.price | number_format(0,',')}},000</span></div>
    <div>
      <span class="d-block mb-2 text-black-50"
        >{{item.title}}</span
      >
     
      <span class="city d-block mb-3">{{item.suburb}}, {{item.state}}</span>

      <div class="specs d-flex mb-4">
        <span class="d-block d-flex align-items-center me-3">
          <span class="icon-bed me-2"></span>
          <span class="caption">2 beds</span>
        </span>
        <span class="d-block d-flex align-items-center">
          <span class="icon-bath me-2"></span>
          <span class="caption">2 baths</span>
        </span>
      </div>

      {% set categories = craft.categories()
                         .relatedTo(item)
                        .all() %}

    
    {% for category in categories %}
        <span class="badge bg-light text-dark">
          {{ category.title }}
        </span>
    {% endfor %}
      <div class="mt-4">
        <a
        href="{{ url(item.uri) }}"
        class="btn btn-primary py-2 px-3"
        >See details</a>
      </div>
      
    </div>
  </div>
</div>