@charset "UTF-8";
.Property {
  --animation-timing: .3s;
  display: grid;
  gap: 0;
  border-radius: var(--border-radius);
  overflow: hidden;
  padding: var(--base-spacing);
  border: 2px solid var(--color-white);
  outline: 1px solid var(--color-gray-1);
  background-color: var(--color-white);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  position: relative;
  grid-template-areas: "image image" "id type" "year operation" "title title" "price actions" "excerpt excerpt" "params params" "date date" "link link";
  grid-template-rows: repeat(5, auto) 1fr repeat(3, auto);
  user-select: none;
  transition: box-shadow var(--animation-timing), opacity var(--animation-timing);
}
.Property .Property__id {
  grid-area: id;
}
.Property .Property__id:before {
  content: "ID: ";
}
.Property .Property__image {
  grid-area: image;
  margin: calc(var(--base-spacing) * -1) calc(var(--base-spacing) * -1) var(--base-spacing) calc(var(--base-spacing) * -1);
  border-radius: var(--border-radius);
  overflow: hidden;
  aspect-ratio: 16/9;
  display: block;
}
.Property .Property__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform var(--animation-timing) ease;
  will-change: transform;
  transform: scale(1);
}
.Property .Property__image img[src=""] {
  opacity: 0;
}
.Property .PropertyPrice {
  grid-area: price;
}
.Property .Property__actions {
  grid-area: actions;
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--base-spacing) * 0.25);
}
.Property .Property__actions > button {
  border: none;
  margin: 0;
  outline: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: calc(var(--border-radius) * 0.5);
}
.Property .Property__actions > button:before {
  content: "";
  display: block;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  transition: transform var(--animation-timing) ease;
  will-change: transform;
  transform: scale(1);
}
.Property .Property__actions > button[data-action=map] {
  display: none;
}
.Property .Property__actions > button[data-action=map]:before {
  background-image: url("../img/map-pointer.svg");
  width: 22px;
  height: 22px;
}
.Property .Property__actions > button[data-action=favorites]:before {
  background-image: url("../img/love.svg");
  width: 24px;
  height: 24px;
}
.Property .Property__actions > button:hover {
  filter: drop-shadow(0 0 0.5em rgba(0, 0, 0, 0.5));
}
.Property .Property__actions > button:hover:before {
  transform: scale(1.25);
}
.Property .Property__title {
  grid-area: title;
  font-size: 1.2em;
  font-weight: 700;
  margin: var(--base-spacing) 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: fit-content;
  text-decoration: none;
  color: var(--color-black);
}
.Property .Property__excerpt {
  grid-area: excerpt;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: fit-content;
  margin: var(--base-spacing) 0;
}
.Property .PropertyParams {
  grid-area: params;
  margin: 0 calc(var(--base-spacing) * -1) var(--base-spacing) calc(var(--base-spacing) * -1);
}
.Property .PropertyTags {
  position: absolute;
  top: var(--base-spacing);
  left: var(--base-spacing);
  right: var(--base-spacing);
  z-index: 1;
}
.Property .PropertyTags > div.__discount {
  margin: 0 0 0 calc(var(--base-spacing) * -1);
  border-radius: 0 calc(var(--border-radius) * 0.5) calc(var(--border-radius) * 0.5) 0;
}
.Property .Property__date {
  grid-area: date;
}
.Property .Property__date:before {
  content: "Розміщено: ";
}
.Property .Property__type {
  grid-area: type;
  text-align: right;
}
.Property .Property__operation {
  grid-area: operation;
  text-align: right;
}
.Property .Property__year {
  grid-area: year;
}
.Property .Property__year:before {
  content: "Рік: ";
}
.Property .Property__type, .Property .Property__operation,
.Property .Property__year, .Property .Property__id {
  padding: 0.2em 0;
}
.Property .PropertyPrice:empty, .Property .PropertyPrice[data-value=""], .Property .PropertyPrice[data-value="0"], .Property .PropertyPrice[data-value=false], .Property .PropertyPrice[data-value="[]"], .Property .PropertyPrice[data-value="{}"], .Property .Property__actions:empty, .Property .Property__actions[data-value=""], .Property .Property__actions[data-value="0"], .Property .Property__actions[data-value=false], .Property .Property__actions[data-value="[]"], .Property .Property__actions[data-value="{}"],
.Property .Property__excerpt:empty,
.Property .Property__excerpt[data-value=""],
.Property .Property__excerpt[data-value="0"],
.Property .Property__excerpt[data-value=false],
.Property .Property__excerpt[data-value="[]"],
.Property .Property__excerpt[data-value="{}"], .Property .PropertyParams:empty, .Property .PropertyParams[data-value=""], .Property .PropertyParams[data-value="0"], .Property .PropertyParams[data-value=false], .Property .PropertyParams[data-value="[]"], .Property .PropertyParams[data-value="{}"],
.Property .Property__date:empty,
.Property .Property__date[data-value=""],
.Property .Property__date[data-value="0"],
.Property .Property__date[data-value=false],
.Property .Property__date[data-value="[]"],
.Property .Property__date[data-value="{}"], .Property .Property__type:empty, .Property .Property__type[data-value=""], .Property .Property__type[data-value="0"], .Property .Property__type[data-value=false], .Property .Property__type[data-value="[]"], .Property .Property__type[data-value="{}"],
.Property .Property__operation:empty,
.Property .Property__operation[data-value=""],
.Property .Property__operation[data-value="0"],
.Property .Property__operation[data-value=false],
.Property .Property__operation[data-value="[]"],
.Property .Property__operation[data-value="{}"], .Property .Property__year:empty, .Property .Property__year[data-value=""], .Property .Property__year[data-value="0"], .Property .Property__year[data-value=false], .Property .Property__year[data-value="[]"], .Property .Property__year[data-value="{}"],
.Property .Property__id:empty,
.Property .Property__id[data-value=""],
.Property .Property__id[data-value="0"],
.Property .Property__id[data-value=false],
.Property .Property__id[data-value="[]"],
.Property .Property__id[data-value="{}"], .Property .PropertyTags:empty, .Property .PropertyTags[data-value=""], .Property .PropertyTags[data-value="0"], .Property .PropertyTags[data-value=false], .Property .PropertyTags[data-value="[]"], .Property .PropertyTags[data-value="{}"] {
  display: none;
}
.Property .Property__link {
  grid-area: link;
  margin: var(--base-spacing) 0 0 0;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.Property .Property__link:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("../img/arrow_up_right_in_circle.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.Property:hover {
  box-shadow: 0 0 var(--base-spacing) rgba(0, 0, 0, 0.3);
}
.Property:hover .Property__image img {
  transform: scale(1.05);
}
.Property:hover .PropertyTags > div.__discount {
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.2), -1.55em 0 0 2em rgba(255, 255, 255, 0.25);
  padding: 1em 0.5em;
  margin: -0.5em 0 -0.5em calc(var(--base-spacing) * -1);
}
@media (min-width: 1180px) {
  .Property .Property__actions > button[data-action=map] {
    display: flex;
  }
  .Property.__table_row {
    grid-template-areas: "image id tags tags actions" "image type operation nothing year" "image title title title price" "image excerpt excerpt excerpt excerpt" "image params params params params" "image date date date date" "image link link link link";
    grid-template-columns: 150px auto auto 1fr auto;
    grid-template-rows: repeat(6, auto);
    align-items: center;
  }
  .Property.__table_row .Property__image {
    aspect-ratio: unset;
    height: calc(var(--base-spacing) * 2 + 100%);
    margin: calc(var(--base-spacing) * -1) var(--base-spacing) calc(var(--base-spacing) * -1) calc(var(--base-spacing) * -1);
  }
  .Property.__table_row .PropertyTags {
    position: static;
    grid-area: tags;
  }
  .Property.__table_row .PropertyTags > div.__discount {
    position: absolute;
    top: var(--base-spacing);
    left: var(--base-spacing);
  }
  .Property.__table_row .Property__title {
    -webkit-line-clamp: 1;
  }
  .Property.__table_row .Property__excerpt {
    -webkit-line-clamp: 2;
  }
  .Property.__table_row .PropertyPrice {
    justify-content: flex-end;
  }
  .Property.__table_row .Property__actions {
    justify-content: flex-end;
  }
  .Property.__table_row .Property__year {
    text-align: right;
  }
  .Property.__table_row .Property__type, .Property.__table_row .Property__operation {
    margin-right: 0.5em;
  }
}

.splide__slide .Property {
  margin: 1em 0.5em;
  height: calc(100% - 2em);
}
.splide__slide [data-pcd] {
  height: 100%;
}

.PropertyMapPopup {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  gap: 0.5em;
  max-width: 200px;
}
.PropertyMapPopup > b {
  color: var(--color-black);
}
.PropertyMapPopup:after {
  content: "Детальніше";
  color: var(--color-primary);
  text-decoration: underline;
}

.PropertyPrice {
  display: flex;
  align-items: center;
  gap: 0.35em;
}
.PropertyPrice > span {
  font-size: 1.4em;
  color: var(--color-primary);
}
.PropertyPrice > del {
  color: var(--color-gray-3);
  font-size: 1em;
}

.PropertyParams {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  column-gap: 0.75em;
  row-gap: 0.25em;
  padding: calc(var(--base-spacing) * 0.5) var(--base-spacing);
  background: linear-gradient(90deg, transparent, var(--color-gray-0), var(--color-gray-1), var(--color-gray-0), transparent);
  border-top: 1px solid var(--color-gray-1);
  border-bottom: 1px solid var(--color-gray-1);
  justify-content: space-between;
}
.PropertyParams > span {
  display: flex;
  align-items: center;
  gap: 0.15em;
}
.PropertyParams > span:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  order: -1;
}
.PropertyParams > span:after {
  content: attr(title) ":";
  font-size: 0.7em;
  order: -2;
  display: none;
}
.PropertyParams > span.__square:before, .PropertyParams > span.__hundredths:before {
  background-image: url("../img/square.svg");
}
.PropertyParams > span.__square:after {
  content: "м²";
  margin-left: -0.15em;
  order: 1;
  font-size: 1em;
  display: inline;
}
.PropertyParams > span.__length:before {
  background-image: url("../img/height.svg");
}
.PropertyParams > span.__width:before {
  background-image: url("../img/width.svg");
}
.PropertyParams > span.__stage {
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  border: 1px solid black;
}
.PropertyParams > span.__stage:before, .PropertyParams > span.__stage:after {
  display: none !important;
}
.PropertyParams > span.__stages:before {
  background-image: url("../img/stages.svg");
  background-size: 0.8em;
}
.PropertyParams > span.__levels:before {
  background-image: url("../img/levels.svg");
}
.PropertyParams > span.__rooms:before {
  background-image: url("../img/rooms.svg");
}

.PropertyTags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--base-spacing) * 0.25);
  align-items: center;
}
.PropertyTags > div {
  padding: 0.3em;
  border-radius: calc(var(--border-radius) * 0.5);
  color: var(--color-white);
  font-size: 0.6em;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 0.9;
}
.PropertyTags > div.__urgent {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.PropertyTags > div.__urgent:before {
  content: "Терміново";
}
.PropertyTags > div.__sold {
  background-color: var(--color-a);
  color: var(--color-white);
}
.PropertyTags > div.__sold:before {
  content: "Продано";
}
.PropertyTags > div.__discount {
  background-color: var(--color-white);
  color: var(--color-primary);
  border-radius: calc(var(--border-radius) * 0.5);
  order: -1;
  padding: 0.5em;
  letter-spacing: 0;
  transition: all var(--animation-timing) ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0.25);
}
.PropertyTags > div.__discount:before {
  font-size: 1.6em;
  content: "-" attr(data-value) "%";
}
.PropertyTags > div.__exclusive {
  background-color: var(--color-e);
  color: var(--color-white);
}
.PropertyTags > div.__exclusive:before {
  content: "Ексклюзив";
}
.PropertyTags > div.__eoselya {
  background-color: var(--color-b);
  color: var(--color-white);
}
.PropertyTags > div.__eoselya:before {
  content: "єОселя";
}
.PropertyTags > div.__renovation {
  background-color: var(--color-d);
  color: var(--color-white);
}
.PropertyTags > div.__renovation:before {
  content: attr(title);
}
.PropertyTags > div.__cross_border {
  background-color: var(--color-c);
  color: var(--color-white);
}
.PropertyTags > div.__cross_border:before {
  content: attr(title);
}