fisenkodv/itinerary

<h1 class="title m-0 px-3 py-4 font-weight-light">
  {{place.name}}
</h1>
<div class="details d-flex flex-fill flex-column flex-sm-column flex-md-row pb-3 px-3">
  <div class="details__info d-flex flex-grow-1 flex-md-column flex-md-grow-1 flex-row flex-sm-grow-1 flex-sm-row p-0">
    <div class="col-12 col-md col-sm-12 d-flex flex-column-reverse flex-row flex-sm-row p-0 pr-md-3">
      <div class="image-wrapper img-thumbnail col-6 flex-grow-1 flex-sm-grow-0">
        <div class="image-wrapper__image" [style.background-image]="'url('+ place.imageUrl + ')'">
        </div>
      </div>
      <div class="col-md-6 p-1 px-sm-3">
        <div>
          <b>{{'places.details.reviews' | translate }}: </b>{{place.reviews}}+
        </div>
        <div>
          <b>{{'places.details.categories' | translate }}: </b>{{place.categories | join:", "}}
        </div>
        <div class="d-flex align-items-center">
          <b>{{'places.details.rating' | translate }}: </b><app-place-rating [rating]="place.rating"></app-place-rating>
        </div>
      </div>
    </div>
    <!-- <div class="d-none d-md-flex spacer"></div> -->
  </div>
  <div class="details__map col-12 col-sm flex-grow-1 p-0 mt-3 mt-md-0">
    <agm-map [latitude]="place.location.latitude" [longitude]="place.location.longitude" [zoom]="14">
      <agm-marker [latitude]="place.location.latitude" [longitude]="place.location.longitude" [title]="place.name"></agm-marker>
    </agm-map>
  </div>
</div>