#makelaar_wonen .cards {
  display               : grid;
  grid-template-columns : repeat(1, minmax(0, 1fr));
  grid-column-gap       : 30px;
  grid-row-gap          : 35px;
  margin                : 2rem 0;
}

#makelaar_wonen .card {
  width              : 100%;
  background-color   : white;
  border-radius      : 3px;
  -webkit-box-shadow : 0 0 10px 0 rgba(0, 0, 0, 0.15);
  box-shadow         : 0 0 10px 0 rgba(0, 0, 0, 0.15);
  transition         : all 0.2s ease-in-out;
}

#makelaar_wonen .card:hover .card__photo::after {
  opacity : 0.5;
}

#makelaar_wonen .card:hover {
  -webkit-box-shadow : 0 0 30px 0 rgba(0, 0, 0, 0.15);
  box-shadow         : 0 0 30px 0 rgba(0, 0, 0, 0.15);
}

#makelaar_wonen .card__inner {
  display          : flex;
  flex-direction   : column;
  position         : relative;
  margin           : 0;
  border-radius    : 3px;
  background-color : #bb2082;
  height           : 100%;
}

#makelaar_wonen .card__link {
  position : absolute;
  top      : 0;
  right    : 0;
  bottom   : 0;
  left     : 0;
  z-index  : 10;
}

#makelaar_wonen .card__photo {
  position        : relative;
  flex            : 1;
  display         : flex;
  justify-content : center;
  margin          : 0;
  padding         : 0;
}

#makelaar_wonen .card__photo::after {
  content            : "";
  position           : absolute;
  background-image   : linear-gradient(0deg, rgba(0, 0, 0, 0.35), transparent 75%);
  background-repeat  : no-repeat;
  height             : 100%;
  width              : 100%;
  bottom             : 0;
  opacity            : 1;
  -webkit-transition : all 0.3s ease-out;
  transition         : all 0.3s ease-out;
}

#makelaar_wonen .card__photo .card__statuslabel {
  position         : absolute;
  right            : 10px;
  top              : 10px;
  padding          : 8px 15px;
  background-color : #052264;
  border-radius    : 4px;
  color            : white;
}

#makelaar_wonen .card__image {
  width        : 100%;
  max-width    : none;
  height       : auto;
  margin       : 0;
  padding      : 0;
  object-fit   : cover;
  transition   : all 0.3s;
  aspect-ratio : 16/9;
}

#makelaar_wonen .card__detail,
#makelaar_wonen .card__footer {
  display  : flex;
  position : relative;
  color    : white;
  padding  : 0 30px;
}

#makelaar_wonen .card__detail {
  align-items : center;
  flex-wrap   : wrap;
  margin-top  : 20px;
}

#makelaar_wonen .card__footer {
  flex           : 1;
  flex-direction : column;
  gap            : 0.5em;
  margin-bottom  : 20px;
}

#makelaar_wonen .card__address {
  flex-grow : 1;
}

#makelaar_wonen .card__title {
  font-size   : 1.2rem;
  font-weight : 300;
  margin      : 0;
}

#makelaar_wonen .card__price {
  display        : flex;
  flex-direction : column;
  align-items    : flex-end;
  font-size      : 1.2rem;
  font-weight    : 300;
}

#makelaar_wonen .card__excerpt {
  flex        : 1;
  margin-top  : 25px;
  line-height : 1.5em;
  font-size   : 14px;
  font-weight : 300;
}

#makelaar_wonen .card__more {
  font-size      : 12px;
  font-weight    : 500;
  text-transform : uppercase;
}

@media (min-width: 640px) {
  #makelaar_wonen .cards {
    grid-template-columns : repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  #makelaar_wonen .cards {
    grid-template-columns : repeat(3, minmax(0, 1fr));
  }
}

#makelaar_wonen .details {
  display   : flex;
  flex-wrap : wrap;
  gap       : 1.5rem;
  width     : calc(100% - 50px);
  float     : left;
}

#makelaar_wonen .details__item {
  display     : flex;
  align-items : center;
  gap         : 0.5em;
}