<div class="Recommended__Item">
  <div class="Mock">
    <img src="{{ property.Thumbnail}}" alt="">
    <div class="Mock__Overlay">
      <span>
        <a>
          <img src="{{ 'assets/images/heart-o-w.svg'|theme }}" alt="">
        </a>
      </span>
    </div>
  </div>
  <div class="Recommended__Item-Description">
    <h6>{{ property.Type }}</h6>
    <p> {{ property.Description | length > 55 ? property.Description|slice(0,55) ~ '...' : property.Description }}</p>
    <!-- <p>Modern country state 6 beds 6 bath 15mt. pool in porreres.</p> -->
    <h6>
      {% for tag in property.Tags%}
      {% if loop.index < 3 %} {{ tag.Name}} , {% elseif loop.index==4%} {{ tag.Name}} {% endif %} {% endfor %} </h6>
        <!-- <h6>terraza, jardín, parking, trastero</h6> -->
  </div>
  <div class="Recommended__Item-Caracteristics">
    <div class="First-Columm">
      <div class="First-Columm__Row">
        <div>
          <span>
            <img class="Item-Caracteristics__Img-Columm-1" src="{{ 'assets/images/Eur.svg'|theme }}" alt="Euro">
          </span>
        </div>
        <div>
          <span class="Item-Caracteristics__Price">
            {{ property.PropertyBusiness.0.Prices.0.PriceValue }} &euro;
          </span>
        </div>
      </div>
      <div class="First-Columm__Row">
        <div>
          <span>
            <img class="Item-Caracteristics__Img-Columm-1" src="{{ 'assets/images/Pointer.svg'|theme }}" alt="Location">
          </span>
        </div>
        <div>
          <span class="Item-Caracteristics__Place">
            {{ property.Municipality | upper }}
          </span>
        </div>
      </div>
      <div class="First-Columm__Row">
        <div>
          <span>
            <img class="Item-Caracteristics__Img-Columm-1" src="{{ 'assets/images/rooms.svg'|theme }}" alt="Rooms">
          </span>
        </div>
        <div>
          <span>
            {{ property.Rooms}}
          </span>
        </div>
      </div>
    </div>
    <div class="Second-Columm">
      <div class="Second-Columm__Row">
        <div>
          <span>
            <img class="Item-Caracteristics__Img-Columm-2" src="{{ 'assets/images/bathrooms.svg'|theme }}" alt="Bathrooms">
          </span>
        </div>
        <div>
          <span>
            6
          </span>
        </div>
      </div>
      <div class="Second-Columm__Row">
        <div>
          <span>
            <img class="Item-Caracteristics__Img-Columm-2" src="{{ 'assets/images/area-i.svg'|theme }}" alt="Area-Inside">
          </span>
        </div>
        <div>
          <span>
            {{ property.NetArea }} M2
          </span>
        </div>
      </div>
      <div class="Second-Columm__Row">
        <div>
          <span>
            <img class="Item-Caracteristics__Img-Columm-2" src="{{ 'assets/images/area-o.svg'|theme }}" alt="Area-Outside">
          </span>
        </div>
        <div>
          <span>
            {{ property.GrossArea }} M2
          </span>
        </div>
      </div>
    </div>
  </div>
</div>