.property-wrapper {
  position: relative;
  padding: 15px;
  background: var(--white);
  border-radius: var(--border-radius-m);
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  transition: all 0.2s linear;
}

.add_to_fav {
  position: absolute;
  top: 10px;
  z-index: 1;
  right: 10px;
  border-radius: 10px;
  width: 50px;
  height: 50px;
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.property-wrapper .property-header .add_to_fav {
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-s);
}

@keyframes heart-pop {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.add_to_fav svg {
  width: 100%;
  height: 100%;
}
.add_to_fav svg path {
  stroke: var(--black);
}
.add_to_fav.is_fav svg {
  animation: heart-pop 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.add_to_fav.is_fav svg path {
  stroke: var(--primary-color);
  fill: var(--primary-color);
}
/* Header */
.property-wrapper .property-header {
  position: relative;
  user-select: none;
}
.property-wrapper .property-header .property-image {
  position: relative;
  padding-top: 70%;
}
.property-wrapper .property-header .property-image img {
  width: 100%;
  border-radius: calc(var(--border-radius-m) * 0.6);
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}
@media(min-width: 991px) {
  .property-wrapper {
    padding: 20px;
    border-radius: var(--border-radius-l);
  }
  .slider_properties_view_post_content .property-wrapper {
    padding: 0;
  }
  .property-wrapper .property-header .property-image img {
    border-radius: calc(var(--border-radius-l) * 0.6);
  }
}
.property-wrapper .property-header .label.label-price {
  position: absolute;
  left: 10px;
  padding: 0.5em 1em;
  border-radius: var(--border-radius-m);
  top: 10px;
  height: fit-content;
  background: var(--white-70);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: fit-content;
}

.property-wrapper .property-header .label.label-price .property-price > * {
  font-weight: 500;
  color: var(--black);
  font-size: min(max(16px, calc(1rem + ((1vw - 2.8px) * 0.122))), 18px);
}
.property-wrapper .property-header .label.label-price .property-price > p {
  font-size: 16px;
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 3px;
}

span.vat_price {
  font-size: 12px;
  color: var(--primary-color);
  font-weight: 400;
}

/* Body */
.property-wrapper .property-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  justify-content: space-between;
}
.slider_properties_view_post_content .property-wrapper .property-body {
  gap: 0;
}
.property-wrapper .property-body .property-top-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
 .property-top-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

/* Labels */
.label.label-sm {
  padding: 0.5em 0.6em;
  border-radius: var(--border-radius-s);
}

.label.label-status {
  background: var(--body-bg);
}
.view_labels .label.label-status {
  background: #fff;
}

.label.label-status.red {
  background: var(--red-50);
}

.label.label-status.yellow {
  background: var(--yellow-50);
}

.label.label-promoted {
  background: var(--green-50);
}
.label.label-sm > * {
  color: var(--black);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}
/* Labels */

.property-wrapper .property-body .property-top-body .property-top-title {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.property-title {
  font-family: "Roboto";
  font-weight: 500;
  color: var(--h-color-dark);
  font-size: min(max(18px, calc(1.125rem + ((1vw - 2.8px) * 1.2195))), 38px);
}
.property-wrapper .property-body .property-top-body .property-title * {
  font-family: "Manrope";
  font-weight: 600;
  font-size: min(max(12px, calc(1rem + ((1vw - 2.8px) * 0.122))), 18px);
  color: var(--secondary-color);
}

/* Bottom body */
.property-wrapper .property-body .property-bottom-body {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
.property-wrapper .property-body .property-bottom-body .property-amenities {
  display: flex;
  gap: 0.5em;
  align-items: center;
}
.property-wrapper .property-body .property-bottom-body .property-amenities .amenities-icon {
  background: var(--white-secondary);
  width: 45px;
  height: 45px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
span.amenities-icon svg {
  width: 24px;
  height: 24px;
}
.property-wrapper .property-body .property-bottom-body .property-amenities .amenities-wrapper .amenities-value {
  margin-bottom: 0;
  font-size: min(max(12px, calc(0.875rem + ((1vw - 2.8px) * 0.122))), 14px);
  color: var(--black);
  font-weight: 400;
}
.property-wrapper .property-body .property-bottom-body .property-amenities .amenities-wrapper .amenities-name {
  font-size: min(max(10px, calc(0.625rem + ((1vw - 2.8px) * 0.122))), 12px);
}

/* List view */



/* Responsive cards on view with map */
@media(max-width: 1650px) {
  .properties_wrapper.list_properties_view .property-wrapper .property-body .label.label-sm > * {
    font-size: 12px;
}

.properties_wrapper.list_properties_view .property-wrapper .property-header .label.label-price .property-price > * {
    font-size: 14px;
}

.properties_wrapper.list_properties_view .property-wrapper .property-header .label.label-price {
    padding: 4px 8px;
    border-radius: 7.5px;
}

.properties_wrapper.list_properties_view .property-wrapper .property-header {
    position: relative;
    width: 40%;
    flex-shrink: 0;
    height: 200px;
}

.properties_wrapper.list_properties_view .property-wrapper .property-body .property-top-body .property-title * {
    font-size: 16px;
    margin: 0;
}

.properties_wrapper.list_properties_view .property-wrapper .property-body .property-bottom-body .property-amenities .amenities-wrapper .amenities-value {
    font-size: 14px;
}

.properties_wrapper.list_properties_view .property-wrapper .property-body .property-bottom-body .property-amenities .amenities-icon svg {
    width: 100%;
    height: 100%;
}

.properties_wrapper.list_properties_view .property-wrapper .property-body .property-bottom-body .property-amenities .amenities-icon {
    width: 40px;
    height: 40px;
    padding: 10px;
}
.properties_wrapper.list_properties_view .property-wrapper .property-header,
.properties_wrapper.list_properties_view .card_loader.is-loading .image  {
  height: 200px;
}

}
@media(max-width: 1200px) {
  .properties_wrapper.list_properties_view .property-wrapper .property-header, .properties_wrapper.list_properties_view .card_loader.is-loading .image {
    height: 250px;
}
}
@media(max-width: 850px) {
  .properties_wrapper.list_properties_view, .properties_wrapper.list_properties_view .loader_container {
    grid-template: auto / 1fr 1fr !important;
}
  .properties_wrapper.list_properties_view .property-wrapper, .properties_wrapper.list_properties_view .card_loader {
    flex-direction: column;
}

.properties_wrapper.list_properties_view .property-wrapper .property-header {
    width: 100%;
}
.properties_wrapper.list_properties_view .card_loader.is-loading .image {
  width: calc(100% - 20px) !important;
  margin: auto !important;
  margin-top: 10px !important;
}
}
@media(max-width: 650px) {
  .properties_wrapper.list_properties_view .property-wrapper .property-header, .properties_wrapper.list_properties_view .card_loader.is-loading .image {
    height: 180px;
}
}
@media(max-width: 550px) {
  .properties_wrapper.list_properties_view, .properties_wrapper.list_properties_view .loader_container {
    grid-template: auto / 100% !important;
     
}
.properties_wrapper.list_properties_view .property-wrapper .property-header, .properties_wrapper.list_properties_view .card_loader.is-loading .image {
  height: 250px;
}
.label.label-sm {
  padding: 0.5em 0.35em;
  flex: 1;
  text-align: center;
}
.label.label-sm > * {
  font-size: 11px;
}
}

@media(max-width: 335px) {
  .label.label-sm > * {
    font-size: 9px;
  }
}