.mirades, .rutes {
  grid-row: span 2;
  padding-top: 0% !important;
  height: 100% !important;
}

@media (min-width: 1024px) {
  .mirades, .rutes {
    grid-column: span 2;
    grid-row: span 1;
  }
}
.card {
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 2vw;
  padding-top: 1.9vw;
  padding-bottom: 1.9vw;
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-rows: 5.1fr 0.7fr auto 1.1fr;
  gap: 2vw;
  flex-direction: column;
  justify-content: inherit;
  align-items: end;
  transition: all 0.4s;
  background-color: #222;
  border: solid #444 1px;
  color: #fff;
}

@media (min-width: 1024px) {
  .card {
    padding: 1rem;
    gap: var(--gap);
    grid-auto-columns: calc(50% - var(--gap) / 2) calc(50% - var(--gap) / 2);
    grid-template-rows: 0.8fr 2.5fr 1.2fr;
  }
}
.route_options {
  position: absolute;
  z-index: 1;
  top: 2vw;
  right: 3vw;
}
@media (min-width: 1024px) {
  .route_options {
    top: 0.9vw;
    right: 0.9vw;
    width: 1.7rem;
  }
}
.route_options span {
  display: block;
  aspect-ratio: 1;
  width: calc(var(--gap) * 1);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #111;
  filter: invert(1);
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .route_options span {
    width: 1.7rem;
  }
}
.route_options span.route-by-walk {
  background-image: url(../images/walking.svg);
  background-size: 34%;
}
.route_options span.route-by-bike {
  background-image: url(../images/bicycle.svg);
  background-size: 68%;
}
.route_options span.route-by-car {
  background-image: url(../images/car.svg);
  background-size: 65%;
}

.card.current {
  color: #000;
}

.card:hover {
  background-color: #efefef;
}

.card:hover .project_title,
.card:hover .project_subtitle,
.card:hover .project_author {
  color: #000;
}

.card .project_title {
  align-self: flex-start;
  font-size: 0.75em;
  letter-spacing: -0.025em;
  font-family: "LL Replica Pro Light Web";
  text-transform: uppercase;
  grid-column-start: 1;
  grid-row: 2;
  color: #fff;
}

@media (min-width: 1024px) {
  .card .project_title {
    grid-column-start: 2;
    font-size: 0.8em;
    grid-row: 1;
  }
}
.card .project_subtitle {
  line-height: 1;
  font-family: "liberation-serif", serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
  display: flex;
  width: 100%;
  grid-column-start: 1;
  grid-row: 3;
  align-self: center;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .card .project_subtitle {
    grid-column-start: 2;
    grid-row: 2;
    font-size: 1.4rem;
    padding-right: 0.5em;
  }
}
.card .project_author {
  font-size: 0.75rem;
  /*font-size: clamp(12px, 0.9vw, 16px); */
  line-height: 1.06;
  width: 100%;
  grid-column-start: 1;
  grid-row: 4;
  align-self: end;
  color: #fff;
  border-top: 1px solid;
  padding-top: 2vw;
}

@media (min-width: 1024px) {
  .card .project_author {
    font-size: 0.8rem;
    grid-column-start: 2;
    grid-row: 3;
    padding-top: 1rem;
  }
}
.card .thumb {
  overflow: hidden;
  aspect-ratio: 0.96;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
  align-self: start;
}

@media (min-width: 1024px) {
  .card .thumb {
    aspect-ratio: 1.09;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 4;
  }
}
.card .thumb img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  position: inherit;
  transform: none;
}

.category-list.has-mirades ul.objects {
  grid-auto-flow: dense;
}