.projectCard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 287px;
}

.projectCard__image {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.projectCard__image img {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.projectCard__type {
  background: var(--color-secondary);
  color: var(--white);
  width: fit-content;
  padding-inline: 16px;
  padding-block: 6px;
  font-size: var(--fs-16);
  font-weight: 700;
  font-family: var(--opensans);
  margin-block-start: 32px;
}

.projectCard__details {
  background: var(--color-primary-alpha-800);
  color: var(--white);
  font-family: var(--opensans);

  display: grid;
  grid-template-areas: "name uf" "comuna uf";
  justify-content: space-between;
  align-items: center;

  padding-block: 8px;
  padding-inline: 16px;
}

.projectCard__details p {
  margin: 0;
}
.projectCard__details p img {
  display: none;
}
.projectCard__details p strong.no-icon {
  display: block;
}

.projectCard__name {
  grid-area: name;
  font-weight: 700;
  font-size: var(--fs-18);
  text-align: left;
}

.projectCard__comuna {
  grid-area: comuna;
  font-size: var(--fs-18);
  font-weight: 400;
  text-align: left;
}

.projectCard__from {
  grid-area: from;
  display: none;
}

.projectCard__uf {
  grid-area: uf;
  font-weight: 700;
  font-size: var(--fs-25);
  text-align: right;
}

.projectCard__fecha {
  grid-area: fecha !important;
  font-size: 0.9rem;
  text-align: justify;
  margin-top: 8px !important;
}

/* variation */

.projectCard.projectCard--small .projectCard__details {
  grid-template-areas: "name uf" "comuna uf";
}

.projectCard.projectCard--small .projectCard__from {
  grid-area: from;
  display: none;
}

@media (min-width: 992px) {
  .projectCard {
    height: 424px;
  }

  .projectCard__type {
    font-size: var(--fs-18);
  }

  .projectCard__name {
    font-size: var(--fs-25);
  }

  .projectCard__comuna {
    font-size: var(--fs-20);
  }

  .projectCard__uf {
    font-size: var(--fs-36);
  }

  .projectCard__details {
    /*grid-template-areas: "name from" "comuna uf" "list list";*/
    grid-template-areas: "name      uf       " "comuna    uf       " "plusvalia plusvalia" "fecha fecha" !important;
  }

  .projectCard__icon{
    margin: 0 10px !important;
  }

  .projectCard__icon img{
    width: 30px;
    filter: invert(100%) sepia(5%) saturate(7500%) hue-rotate(129deg) brightness(119%) contrast(109%);
  }

  .page-id-9 .projectCard__icon img {
    width: 17px;
  }

  .projectCard__from {
    display: block;
    font-size: var(--fs-20);
    text-align: left;
  }

  .projectCard.projectCard--small .projectCard__name,
  .projectCard.projectCard--small .projectCard__comuna {
    font-size: var(--fs-18);
  }

  .projectCard.projectCard--small .projectCard__uf {
    font-size: var(--fs-25);
  }

  .projectCard.projectCard--small {
    height: 287px;
  }
}



.projectCard__details {
  /*grid-template-areas: "name from" "comuna uf" "list list list";*/
  grid-template-areas: "name      uf       " "comuna    uf       " "plusvalia plusvalia" "fecha fecha" !important;
  padding-inline: 0;
  padding: 10px;
}

.projectCard__icon:not(:first-child) {
  margin: 0 10px !important;
}

.projectCard__icon{
  margin: 0 10px !important;
}

.projectCard__icon img{
  width: 25px;
  filter: invert(100%) sepia(5%) saturate(7500%) hue-rotate(129deg) brightness(119%) contrast(109%);
}

.page-id-9 .projectCard__icon img {
  width: 17px;
}


@media screen and (max-width: 768px) {
  .projectCard__details p img {
    display: block;
  }
  .projectCard__details p strong.no-icon {
    display: none;
  }
}