:root {
  --grid_gap: 20px;
  @media(min-width: 991px) {
    --grid_gap: 30px;
  }
}

/* Default grid (applies to all screen sizes) */
.properties_wrapper,
.properties_wrapper .loader_container {
  display: grid;
  grid-template: auto / 100%;
  row-gap: var(--grid_gap);
}
@media(max-width: 576px) {
  .properties_wrapper {
  padding-inline: 15px;
}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .properties_wrapper.grid-sm-2,
  .properties_wrapper.grid-sm-2 .loader_container {
    display: grid;
    grid-template: auto / repeat(2, calc((100% - var(--grid_gap)) / 2));
    gap: var(--grid_gap);
  }
  .properties_wrapper.grid-sm-3,
  .properties_wrapper.grid-sm-3 .loader_container {
    display: grid;
    grid-template: auto / repeat(3, calc((100% - 2 * var(--grid_gap)) / 3));
    gap: var(--grid_gap);
  }
  .properties_wrapper.grid-sm-4,
  .properties_wrapper.grid-sm-4 .loader_container {
    display: grid;
    grid-template: auto / repeat(4, calc((100% - 3 * var(--grid_gap)) / 4));
    gap: var(--grid_gap);
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .properties_wrapper.grid-md-2,
  .properties_wrapper.grid-md-2 .loader_container {
    display: grid;
    grid-template: auto / repeat(2, calc((100% - var(--grid_gap)) / 2));
    gap: var(--grid_gap);
  }
  .properties_wrapper.grid-md-3,
  .properties_wrapper.grid-md-3 .loader_container {
    display: grid;
    grid-template: auto / repeat(3, calc((100% - 2 * var(--grid_gap)) / 3));
    gap: var(--grid_gap);
  }
  .properties_wrapper.grid-md-4,
  .properties_wrapper.grid-md-4 .loader_container {
    display: grid;
    grid-template: auto / repeat(4, calc((100% - 3 * var(--grid_gap)) / 4));
    gap: var(--grid_gap);
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .properties_wrapper.grid-lg-2,
  .properties_wrapper.grid-lg-2 .loader_container {
    display: grid;
    grid-template: auto / repeat(2, calc((100% - var(--grid_gap)) / 2));
    gap: var(--grid_gap);
  }
  .properties_wrapper.grid-lg-3,
  .properties_wrapper.grid-lg-3 .loader_container {
    display: grid;
    grid-template: auto / repeat(3, calc((100% - 2 * var(--grid_gap)) / 3));
    gap: var(--grid_gap);
  }
  .properties_wrapper.grid-lg-4,
  .properties_wrapper.grid-lg-4 .loader_container {
    display: grid;
    grid-template: auto / repeat(4, calc((100% - 3 * var(--grid_gap)) / 4));
    gap: var(--grid_gap);
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .properties_wrapper.grid-xl-2,
  .properties_wrapper.grid-xl-2 .loader_container {
    display: grid;
    grid-template: auto / repeat(2, calc((100% - var(--grid_gap)) / 2));
    gap: var(--grid_gap);
  }
  .properties_wrapper.grid-xl-3,
  .properties_wrapper.grid-xl-3 .loader_container {
    display: grid;
    grid-template: auto / repeat(3, calc((100% - 2 * var(--grid_gap)) / 3));
    gap: var(--grid_gap);
  }
  .properties_wrapper.grid-xl-4,
  .properties_wrapper.grid-xl-4 .loader_container {
    display: grid;
    grid-template: auto / repeat(4, calc((100% - 3 * var(--grid_gap)) / 4));
    gap: var(--grid_gap);
  }
}

/* Extra extra large devices (large desktops, 1600px and up) */
@media (min-width: 1600px) {
  .properties_wrapper.grid-xxl-2,
  .properties_wrapper.grid-xxl-2 .loader_container {
    display: grid;
    grid-template: auto / repeat(2, calc((100% - var(--grid_gap)) / 2));
    gap: var(--grid_gap);
  }
  .properties_wrapper.grid-xxl-3,
  .properties_wrapper.grid-xxl-3 .loader_container {
    display: grid;
    grid-template: auto / repeat(3, calc((100% - 2 * var(--grid_gap)) / 3));
    gap: var(--grid_gap);
  }
  .properties_wrapper.grid-xxl-4,
  .properties_wrapper.grid-xxl-4 .loader_container {
    display: grid;
    grid-template: auto / repeat(4, calc((100% - 3 * var(--grid_gap)) / 4));
    gap: var(--grid_gap);
  }
}

/* LIST */
.properties_wrapper.list_properties_view {
  display: grid;
  grid-template: auto / 1fr;
  gap: 15px;
  padding: 15px;
}
.properties_wrapper.list_properties_view .property-wrapper {
  display: flex;
  flex-direction: row;
  border-radius: 10px;
  padding: 10px;
}
.properties_wrapper.list_properties_view .property-wrapper .property-header {
  position: relative;
  width: 40%;
  flex-shrink: 0;
  height: 250px;
}
.properties_wrapper.list_properties_view .property-wrapper .property-header .property-image {
  position: relative;
  padding: unset;
  height: 100%;
}
.properties_wrapper.list_properties_view .property-wrapper .property-header .property-image img {
  position: unset;
  inset: unset;
  object-fit: cover;
  border-radius: 7.5px;
}