:root {
  --container-width: 1200px;

  --space: 8px; /* base space unit */
  --space-0-5x: calc(var(--space) * 0.5);
  --space-1-5x: calc(var(--space) * 1.5);
  --space-2x: calc(var(--space) * 2);
  --space-2-5x: calc(var(--space) * 2.5);
  --space-3x: calc(var(--space) * 3);
  --space-3-5x: calc(var(--space) * 3.5);
  --space-4x: calc(var(--space) * 4);
  --space-5x: calc(var(--space) * 5);

  /* padding(common container paddings) */
  --padding-outer: calc(var(--space) * 2.5);
  --padding-inner: var(--space-2x);

  /* colors */
  --color-black: #121213;
  --color-body-text: #3c3c40;
  --color-light-gray: #dfdfe1;
  --color-lightest-gray: #f7f7f7;
  --color-gray: #acacad;
  --color-white: #fff;
  --color-violet: #6449e7;
  --color-orange: #fa6742;
  --color-green: #1e7e34;
  --color-red: #d41526;
  --color-grafit: #222222;

  /* typography */
  --font-roboto: "Roboto", sans-serif;
  --font-monserrat: "Montserrat", sans-serif;

  /* font sizes */
  --font-size-large: 40px;
  --font-size-h1: 36px;
  --font-size-h2: 28px;
  --font-size-h3: 20px;
  --font-size-h4: 16px;
  --font-size-p1-alt: 18px;
  --font-size-p1: 16px;
  --font-size-p2: 14px;
  --font-size-p3: 12px;

  /* font line heights */
  --font-line-height-normal: 1.2;
  --font-line-height-medium: 1.4;
  --font-line-height-large: 1.5;

  /* font weights */
  --font-weight-extra-bold: 800;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --font-weight-light: 300;
  --font-weight-extra-light: 200;
  --font-weight-thin: 100;

  /* font definitions(formula: font-weight font-size/line-height font-family) */
  --font-large: var(--font-weight-extra-bold) var(--font-size-large) /
    var(--font-line-height-normal) var(--font-roboto);
  --font-h1: var(--font-weight-extra-bold) var(--font-size-h1) /
    var(--font-line-height-normal) var(--font-monserrat);
  --font-h2: var(--font-weight-extra-bold) var(--font-size-h2) /
    var(--font-line-height-normal) var(--font-monserrat);
  --font-h3: var(--font-weight-extra-bold) var(--font-size-h3) /
    var(--font-line-height-normal) var(--font-monserrat);
  --font-h4: var(--font-weight-extra-bold) var(--font-size-h4) /
    var(--font-line-height-normal) var(--font-monserrat);

  --font-h3-subtitle: var(--font-weight-regular) var(--font-size-p3) /
    var(--font-line-height-normal) var(--font-roboto);

  --font-body1-bold: var(--font-weight-bold) var(--font-size-p1) /
    var(--font-line-height-normal) var(--font-roboto);
  --font-body1-semibold: var(--font-weight-semibold) var(--font-size-p1) /
    var(--font-line-height-normal) var(--font-roboto);
  --font-body1-medium: var(--font-weight-medium) var(--font-size-p1) /
    var(--font-line-height-normal) var(--font-roboto);
  --font-body1-regular: var(--font-weight-regular) var(--font-size-p1) /
    var(--font-line-height-normal) var(--font-roboto);
  --font-body2-regular: var(--font-weight-regular) var(--font-size-p2) /
    var(--font-line-height-normal) var(--font-roboto);
  --font-body2-semibold: var(--font-weight-semibold) var(--font-size-p2) /
    var(--font-line-height-normal) var(--font-roboto);
}

/* Start Base styles */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

button:focus {
  outline: none;
}

/* Util class */
.hidden-mob {
  @media screen and (max-width: 767px) {
    display: none !important;
  }
}

.hidden-desktop {
  @media screen and (min-width: 768px) {
    display: none !important;
  }
}

.flex-text-column {
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.title-h1 {
  font: var(--font-h1);

  @media screen and (max-width: 767px) {
    --font-size-h1: 24px;
  }
}

.text-large {
  font: var(--font-large);
}

.title-h2 {
  font: var(--font-h2);
}

.title-h3 {
  font: var(--font-h3);
}

.title-h4 {
  font: var(--font-h4);
}

.title-h3-subtitle {
  font: var(--font-h3-subtitle);
}

.text-body1-bold {
  font: var(--font-body1-bold);
}

.text-body1-medium {
  font: var(--font-body1-medium);
}

.text-body1-regular {
  font: var(--font-body1-regular);
}

.text-body2-regular {
  font: var(--font-body2-regular);
}

.divider {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-light-gray);
}

.divider--vertical {
  height: 16px;
  width: 1px;
}

.button {
  font: var(--font-body1-semibold);
  background-color: var(--color-orange);
  border: 0;
  color: var(--color-white);
  padding: 0 16px;
  width: 100%;
  height: 60px;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: uppercase;
  display: inline-flex;
  gap: var(--space);
  align-items: center;
  justify-content: center;

  &:hover:not(:disabled) {
    opacity: 0.8;
    color: var(--color-white);
  }

  &:disabled {
    background-color: var(--color-gray);
    cursor: not-allowed;
  }

  &:focus {
    outline: none;
  }

  @media screen and (max-width: 1024px) {
    padding: 0 24px;
  }

  @media screen and (max-width: 768px) {
    font-size: 16px;
  }
}

.button-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5x);
  font: var(--font-body1-medium);
  background-color: var(--color-white);
  color: var(--color-orange);
  border: 1px solid var(--color-orange);
  padding: 0 16px;
  height: 40px;
  line-height: 38px;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: capitalize;

  &:hover {
    background-color: #fff8f6;
    border-color: #fa4c26ff;
    color: #fa4c26ff;
  }
}

.button-outline--icn-mob {
  @media screen and (max-width: 767px) {
    span {
      display: none;
    }
  }
}

.button-map {
  cursor: pointer;
  transition: all 0.3s;
  border: 0;
  padding: 0;
  background: transparent;
  line-height: 1;
  height: 24px;

  &:hover {
    opacity: 0.6;
  }
}

.button-open {
  cursor: pointer;
  transition: all 0.3s;
  border: 0;
  padding: 0;
  background: transparent;
  line-height: 1;
  height: 24px;
  font: var(--font-body1-semibold);
  color: var(--color-orange);
  display: inline-flex;
  gap: var(--space-0-5x);
  align-items: center;

  &:hover {
    opacity: 0.6;
  }
}

[class^="icon-"] {
  width: 24px;
  height: 24px;
  display: inline-flex;
}

[class*="icon-sm"] {
  width: 20px;
  height: 20px;
  display: inline-flex;
}

.icon-heart {
  background: url("../images/pdp/icon-heart.svg") no-repeat center center;
}

.icon-heart-filled {
  background: url("../images/pdp/icon-heart-filled.svg") no-repeat center center;
}

.icon-cube {
  background: url("../images/pdp/icon-cube.svg") no-repeat center center;
}

.icon-share {
  background: url("../images/pdp/icon-share.svg") no-repeat center center;
}

.icon-price-up {
  background: url("../images/pdp/icon-price-up.svg") no-repeat center center;
}

.icon-price-down {
  background: url("../images/pdp/icon-price-down.svg") no-repeat center center;
}

.icon-person {
  background: url("../images/pdp/icon-person.svg") no-repeat center center;
}

.icon-car {
  background: url("../images/pdp/icon-car.svg") no-repeat center center;
}

.icon-distance {
  background: url("../images/pdp/icon-distance.svg") no-repeat center center;
}

.icon-map {
  background: url("../images/pdp/icon-map.svg") no-repeat center center;
}

.icon-open {
  background: url("../images/pdp/icon-open.svg") no-repeat center center;
}

.icon-baths {
  background: url("../images/pdp/icon-baths.svg") no-repeat center center;
}

.icon-beds {
  background: url("../images/pdp/icon-beds.svg") no-repeat center center;
}

.icon-sqft {
  background: url("../images/pdp/icon-sqft.svg") no-repeat center center;
}

.icon-garage {
  background: url("../images/pdp/icon-garage.svg") no-repeat center center;
}

.form-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-3x);
}

.form-input .nice-select {
  height: 44px;
  line-height: 32px;
}

.form-input .nice-select:after {
  top: 4px !important;
  right: 16px !important;
}

.form-input__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-2x);

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
  }
}

.form-input-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5x);
}

.form-input label {
  margin: 0;
}

.form-input-field {
  height: 44px;
  padding: 0 var(--space-2x);
  font: var(--font-body2-semibold);
  color: var(--color-black);
  border: 1px solid var(--color-light-gray);
}

.flex-row-vcenter {
  display: flex;
  gap: 4px;
  align-items: center;
}

.read-more {
  cursor: pointer;
  color: var(--color-orange);
  text-transform: uppercase;
  background: transparent;
  border: 0;
  padding: 0;
  height: 20px;
  transition: all 0.3s;

  &:hover {
    text-decoration: underline;
    color: #fa4c26ff;
  }
  &:focus {
    outline: none;
  }
}

/* override nice select */
.nice-select:after {
  top: 0 !important;
}

#message:empty {
  display: none;
}

.tabs-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
}

.tabs-header {
  display: flex;
  gap: var(--space-3-5x);
  position: relative;
}

.tabs-header:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-light-gray);
}

.tabs-header__link {
  color: var(--color-black);
  transition: color 0.3s;
  position: relative;
  padding-bottom: var(--space-2x);
  cursor: pointer;
}

.tabs-header__link.show {
  color: var(--color-black);
}

.tabs-header__link.hide {
  color: var(--color-gray);
}

.tabs-header__link.show::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  z-index: 1;
  background: currentColor;
  opacity: 1;
}

.tabs-header__link.hide::after {
  opacity: 0;
}

.tabs-content.show {
  display: block;
}

.tabs-content.hide {
  display: none;
}

.tabs-header__link:not([class*="title-"]) {
  font: var(--font-h4);
}

select.minimal {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position: calc(100% - 20px) calc(1em + 4px),
    calc(100% - 15px) calc(1em + 4px), calc(100% - 2.5em) 0.7em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
}

select.minimal:focus {
  background-image: linear-gradient(45deg, gray 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, gray 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position: calc(100% - 15px) calc(1em + 4px),
    calc(100% - 20px) calc(1em + 4px), calc(100% - 2.5em) 0.7em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
  outline: 0;
}
/* End Base styles */

/* Start misc styles */
.manoj-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
}

.manoj-address {
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: flex-end;
}

.manoj-address__text {
  font-size: var(--font-size-p1-alt);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-large);
}

.manoj-box {
  .form-control-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-2x);
  }

  .button {
    .spinner {
      margin: 0;
      position: static;
    }
  }

  [type="checkbox"],
  label {
    margin: 0;
  }

  .form-group {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space);
  }

  .agree-terms {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space);

    .agree-terms__label {
      order: 2;
      flex: 1;
    }

    .agree-terms__checkbox {
      order: 1;
      flex: 0;
    }

    #optIn-error {
      order: 3;
      flex: 1 0 100%;
    }
  }

  .custom-checkbox {
    margin: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #000;
    background-color: #fff;
    cursor: pointer;
    display: inline-block;
    position: relative;
  }

  .custom-checkbox::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background-color: #000;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s ease;
  }

  .agree-terms__checkbox:checked + .custom-checkbox::after {
    transform: translate(-50%, -50%) scale(1);
  }
}
/* End misc styles */

/* Start accordion */
.accordion-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
}

.ac {
  border: 0;
  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
}

.ac .ac-trigger {
  padding: 0;
  height: auto;
  font: var(--font-h3);
}

.ac .ac-trigger:focus {
  outline: none;
  color: currentColor;
}
/* END accordion */

.out {
  font: var(--font-body2-regular);
  color: var(--color-body-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: var(--space-5x);
}

.inner {
  max-width: calc(var(--container-width) + var(--padding-outer) * 2);
  margin: 0 auto;
  padding: 0 var(--padding-inner);
}

.page-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-3-5x);

  @media screen and (max-width: 767px) {
    gap: var(--space-2-5x);
  }
}

.box {
  padding: var(--padding-outer);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
}

.box-solid {
  padding: var(--padding-inner);
  border: 1px solid var(--color-light-gray);
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
  overflow: hidden; /* fix table horizontal scroll */
}

.box-solid-top {
  display: grid;
  grid-template-columns: 1fr 200px;
  align-items: center;
  gap: var(--space-2x);

  @media screen and (max-width: 600px) {
    grid-template-columns: 1fr;
  }
}

.box-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
}

.box-layout--space {
  gap: var(--space-3-5x);
}

.badge-list {
  display: flex;
  gap: var(--space);
}

.badge {
  padding: var(--space-0-5x) var(--space);
  font-weight: var(--font-weight-bold);
  font-size: 10px;
  color: var(--color-white);
  border-radius: 0;
  text-transform: uppercase;
}

.badge-sale {
  background: var(--color-orange);
}

.badge-new {
  background: var(--color-green);
}

.badge-rent {
  background: var(--color-violet);
}

.badge-sold {
  background: var(--color-black);
}

.badge-terminated,
.badge-expired,
.badge-suspended {
  background: var(--color-grafit);
}

.address-bar {
  margin: var(--space-1-5x) 0 0;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2-5x);

  .property-price {
    .old-price {
      color: var(--color-gray);
      font-size: calc(var(--font-size-h1) * 0.8);
    }
  }

  @media screen and (max-width: 767px) {
    flex-direction: column;
  }
}

.property-address {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5x);
}

.pa-layout {
  display: grid;
  grid-template-columns: 1fr max-content;
  width: 100%;
  justify-content: space-between;
  gap: var(--space-3x);

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
  }
}

.pa-layout__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-3-5x);
}

.pa-layout__right {
  display: flex;
  align-items: flex-start;
  gap: var(--space);

  @media screen and (max-width: 767px) {
    display: none;
  }
}

.pa-details {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, 262px);
  gap: var(--space-3x);

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2x);
  }
}

.pa-details--bottom {
  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
    gap: var(--space);
  }
}

.pa-details__item {
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.buttons-bar {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space);

  @media screen and (max-width: 767px) {
    display: none;
  }

  .button-outline {
    box-shadow: none;
  }
}

.buttons-bar--mobile {
  display: none;

  @media screen and (max-width: 767px) {
    display: flex;
  }
}

.buttons-bar--mobile .buttons-bar__item:first-of-type {
  @media screen and (max-width: 767px) {
    margin-right: auto;
  }
}
/* End property header */

/* Start main layout */
.main-layout {
  display: grid;
  align-items: flex-start;
  grid-template-columns: 8fr 4fr;
  gap: var(--space-3-5x);

  @media screen and (max-width: 1024px) {
    grid-template-columns: 1fr;
  }

  @media screen and (max-width: 767px) {
    gap: var(--space-2-5x);
  }
}

.main-layout__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-3-5x);
  overflow: hidden; /* fix table horizontal scroll */

  @media screen and (max-width: 767px) {
    gap: var(--space-2-5x);
  }
}

.main-layout__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-3-5x);

  @media screen and (max-width: 1024px) {
    display: none;
  }
}
/* End main layout */

/* Start property overview */
.ov-details {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
  column-gap: calc(var(--space) * 9);
  row-gap: var(--space-4x);
  position: relative;
  overflow: hidden;

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
    row-gap: var(--space-4x);
    padding-top: var(--space-2x);
  }
}

.ov-details:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid var(--color-white);
}

.ov-details__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5x);
  position: relative;
}

.ov-details__item:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--space-2x) * -1);
  border-top: 1px solid var(--color-light-gray);
}

/* End property overview */

/* Start open house */
.open-house {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2x);

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
  }

  .form-tour {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-2x);
  }

  .form-tour-layout {
    justify-content: start;
  }

  .open-house__picture {
    min-height: 240px;
    position: relative;
    overflow: hidden;

    img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.form-tour-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
}

.datetime-picker {
  display: block;
  cursor: pointer;
  margin: 0;

  .datetime-picker__container {
    display: flex;
    align-items: center;
    height: 44px;
    justify-content: space-between;
    padding: var(--space-0-5x) var(--space-2x);
    font: var(--font-body2-regular);
    border: 1px solid var(--color-light-gray);
    box-sizing: border-box;
    transition: all 0.3s;
  }

  .datetime-picker:hover .datetime-picker__container {
    border-color: var(--color-gray);
    background: var(--color-lightest-gray);
  }

  .datetime-picker__input:checked ~ .datetime-picker__container {
    border-color: var(--color-black);
  }

  .datetime-picker__text {
    display: flex;
    gap: var(--space);
  }

  .datetime-picker__date {
    font: var(--font-body2-semibold);
  }

  .datetime-picker__input {
    position: absolute;
    opacity: 0;
  }

  .datetime-picker__radio {
    position: relative;
    display: block;
    height: 24px;
    width: 24px;
    background-color: #fff;
    border-radius: 50%;
    border: 2px solid var(--color-black);
  }

  .datetime-picker__radio::after {
    content: "";
    position: absolute;
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #000;
  }

  .datetime-picker__input:checked
    ~ .datetime-picker__container
    .datetime-picker__radio::after {
    display: block;
  }
}
/* End open house */

/* Start property description */
.property-description {
  align-items: flex-start;
}

.property-description__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
  align-items: flex-start;
}
/* End property description */

/* Start property history */
.h-details {
  width: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);

  .h-details__row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 24px;
    align-items: center;
    gap: var(--space-2x);
    min-width: 750px;
  }
}
/* End property history */

/* Start property details */
.section-details .divider {
  margin-top: calc(
    var(--space-2x) * -1
  ); /* negative margin fix tabs header border */
}
/* Start property details */

/* Start estimated price */
.estimated-price {
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
}

.e-price {
  width: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);

  .e-price__row {
    display: grid;
    grid-template-columns: repeat(3, 160px);
    grid-auto-flow: column;
    align-items: center;
    gap: var(--space-2x);
  }
}
/* End estimated price */

/* Start school */
.schools {
  display: flex;
  flex-direction: column;
  gap: var(--space-3-5x);
}

.s-details-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
}

.distance-bar {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  gap: var(--space);
}

.distance-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-0-5x);
}

.s-row {
  padding-top: var(--space-2x);
  display: grid;
  grid-template-columns: 1fr minmax(286px, max-content);
  align-items: center;
  gap: var(--space-2-5x);

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
}

.s-row + .s-row {
  border-top: 1px solid var(--color-light-gray);
}

.s-row__right {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2-5x);
}

.s-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5x);
  list-style: none;
}

.s-list__item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
  align-items: center;
  line-height: 1;
}

.s-list__item .divider {
  margin: 0;
}

.grade-lvl {
  display: flex;
  flex-direction: row;
  gap: var(--space-0-5x);
  align-items: center;
}
/* End school */

/* Start neighbourhood */
.neighbourhood {
  display: flex;
  flex-direction: column;
  gap: var(--space-3-5x);
}

.n-details-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--space-2x);
}

.n-row {
  padding-top: var(--space-2x);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* grid-template-columns: 1fr minmax(286px, max-content); */
  align-items: center;
  gap: var(--space-2-5x);

  @media screen and (max-width: 767px) {
    flex-direction: columns;
    /* grid-template-columns: 1fr; */
    align-items: flex-start;
  }
}

.n-row + .n-row {
  border-top: 1px solid var(--color-light-gray);
}

.n-row__right {
  display: flex;
  justify-content: end;
  gap: var(--space-2-5x);
}

.n-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5x);
  list-style: none;
}

.n-list__item {
  display: flex;
  gap: var(--space-0-5x);
  flex-wrap: wrap;
  align-items: center;
  line-height: 1;
}

.n-list__item .divider {
  margin: 0 var(--space-1-5x);
}
/* End neighbourhood */

/* Start price trends */
.trends-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
}

.trends-top {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2x);

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
  }
}

.pt-details-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
  overflow: auto;
}

.pt-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2x);
  min-width: 500px;
}

.pt-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5x);
}
/* End price trends */

/* Start calculator */
.calc-layout {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr;
  gap: var(--space-2x);

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
  }
}

.screen-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.screen-list__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space);
  flex: 0 1 50%;
  border: 1px solid var(--color-light-gray);
  padding: var(--space-2x);
  min-height: 76px;
}

.screen-list__item--full-width {
  flex: 1 0 100%;
}

.calc-table {
  width: 100%;
  border-collapse: collapse;
}

.calc-table td {
  border: 1px solid var(--color-light-gray);
  padding: var(--space-2x);
}
/* End calculator */

/* Start taxes */
.taxes {
  max-width: 792px;
  .text-body2-regular {
    line-height: var(--font-line-height-large);
  }
}
/* End taxes */

/* Start page-bottom */
.page-bottom {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) * 7.5);

  @media screen and (max-width: 767px) {
    gap: var(--space-5x);
  }
}
/* End page-bottom */

/* Start recently sold */
.recently-sold {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5x);
}

.recently-sold-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3x);
  line-height: 1;

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
    gap: var(--space-2-5x);
  }
}

.recently-sold-link {
  font: var(--font-body1-semibold);
  text-decoration: underline;
  transition: all 0.2s;
  color: var(--color-body-text);
}
/* End recently sold */

/* Start cities */
.cities {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5x);
}

.cities-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: var(--space);
  column-gap: var(--space-2x);
  line-height: 1;

  @media screen and (max-width: 767px) {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space);
  }
}

.cities-link {
  font-size: var(--font-size-p1-alt);
  line-height: var(--font-line-height-medium);
  transition: all 0.2s;
  color: var(--color-body-text);
}
/* End cities */

/* Start property carousel */
.property-carousel {
  position: relative;

  .slider-btn {
    z-index: 10;

    @media screen and (max-width: 767px) {
      display: none !important;
    }
  }

  .slider-btn[aria-disabled="true"] {
    background-color: var(--color-light-gray);
    color: var(--color-gray);
    cursor: not-allowed;
  }

  .swiper-slide {
    /* for balancing layout calculation, prevent fit slide width on init swiper */
    --container-width: 100%;
    --columns: 3;
    --gap: 30px;

    width: calc(
      (var(--container-width) / var(--columns)) - var(--gap) +
        (var(--gap) / var(--columns))
    );
    margin-right: calc(var(--gap));

    @media screen and (max-width: 1100px) {
      --columns: 2;
      --gap: 30px;
    }

    @media screen and (max-width: 768px) {
      --columns: 1.8;
      --gap: 16px;
    }

    @media screen and (max-width: 550px) {
      --columns: 1.2;
    }

    @media screen and (max-width: 450px) {
      --columns: 1.1;
    }
  }

  .property-carouse__title {
    margin-bottom: var(--space-2-5x);
  }

  .single-property-box {
    margin: 0 !important;
  }

  .property-img img {
    aspect-ratio: auto;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .similar-prev {
    margin: 0;
    left: 20px;
    right: auto;
  }

  .similar-next {
    margin: 0;
    right: 20px;
    left: auto;
  }
}

.mls-property {
  .property-favourite {
    box-shadow: none;
    position: static;
    width: 24px;
    height: 24px;
    background: url(../images/pdp/icon-favorite.svg) no-repeat center;
  }

  .property-favourite.favorited {
    background: url(../images/pdp/icon-favorite-hover.svg) no-repeat center;
  }
}

.mls-media {
  position: relative;
  height: 232px;
  overflow: hidden;
  display: block;
}

.mls-media img {
  position: absolute;
  inset: 0;
  object-fit: cover;
  z-index: 1;
  max-width: none;
  height: 100%;
  width: 100%;
}

.mls-featured {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: var(--space-0-5x);
  z-index: 9;
}

.featured-badge {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  padding: 2px var(--space-0-5x);
  text-transform: capitalize;
}

.featured-badge-sale {
  background: var(--color-orange);
}

.featured-badge-rent {
  background: var(--color-violet);
}

.featured-badge-new {
  background: var(--color-green);
}

.featured-badge-sold {
  background: var(--color-black);
}

.mls-content {
  padding: var(--space-2-5x);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
}

.mls-content-top {
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.mls-content-top .title-h3 {
  @media screen and (max-width: 460px) {
    font-size: var(--font-size-h4);
  }
}

.mls-content-top .text-body2-regular {
  @media screen and (max-width: 460px) {
    font-size: var(--font-size-p3);
  }
}

.mls-content-bottom {
  display: flex;
  align-items: center;
  min-height: 30px;
  justify-content: space-between;
}

.mls-props-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-5x);
  row-gap: var(--space-2x);

  @media screen and (max-width: 767px) {
    gap: var(--space-2x);
  }

  @media screen and (max-width: 460px) {
    gap: var(--space-0-5x);
  }
}

.mls-props-item {
  display: flex;
  gap: var(--space);
  align-items: center;
  line-height: 1;

  @media screen and (max-width: 460px) {
    font-size: var(--font-size-p3);
  }
}
/* End property carousel */