.wrapper-properties {
  padding: 100px 15%;
}

.properties-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;

  margin-top: 50px;
}

.property-card:hover {
  text-decoration: none;
  box-shadow: 0 6px 15px rgba(1, 1, 1, 0.2);
  transform: scale(1.02);
  transition-duration: 0.3s;
}

.card-content {
  /* position: relative; */
  z-index: 2;
  text-transform: uppercase;
  color: white;
}

.card-content h3,
.card-content h4,
.card-content p {
  color: white;
}

.card-content hr {
  border-top-color: white;
}

.card-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 15px;
}

.card-icons-container {
  display: grid;
  grid-template-columns: 24px auto;
  gap: 12px;
}

.card-bottom .price {
  align-self: flex-end;
}
.empty-properties-container{
  display: grid;
  justify-items: center;
  text-align: center;
}

@media (max-width: 1400px) {
  .wrapper-properties {
    padding: 100px 10%;
  }
}

@media (max-width: 1200px) {
  .wrapper-properties {
    padding: 100px 15%;
  }
  .properties-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .wrapper-properties {
    padding: 100px 10%;
  }
  .properties h2 {
    font-size: 45px;
    line-height: 50px;
  }
}

@media (max-width: 800px) {
  .wrapper-properties {
    padding: 100px 15%;
  }
  .properties-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 500px) {
  .wrapper-properties {
    padding: 100px 10%;
  }

  .properties h2 {
    font-size: 40px;
    line-height: 45px;
  }
}

@media (max-width: 400px) {
  .wrapper-properties {
    padding: 100px 30px;
  }
}

@media (max-width: 300px) {
  .wrapper-properties {
    padding: 100px 15px;
  }
}