/* Usos de la madera: catálogo */

/* Celular: capa pareja sobre toda la foto */
@media (max-width: 767px) {
  .usos-hero::after {
    background: rgba(var(--oscuro-foto), 0.65);
  }
}

/* Abajo y entre las tarjetas y las flechas, 8 px menos: los botones de las flechas son más altos que la flecha */
.usos-catalogo {
  padding: 40px 0 32px;
}

.usos-catalogo .carrusel__flechas {
  margin-top: 12px;
}

/* Tarjetas iguales: títulos a la misma altura, en una línea, y botones abajo. La fila les da a todas el alto de la más alta */
.usos-catalogo .tarjeta-uso__img {
  height: 158px;                                     /* 205 x 310 / 401: la proporción de la foto del diseño */
}

.usos-catalogo .tarjeta-uso__pie {
  justify-content: flex-start;
  padding-block: 30px;
}

.usos-catalogo .tarjeta-uso__titulo {
  font-size: 18px;                                   /* AJUSTAR: lo máximo para que "Molduras y revestimientos" entre en 230 px */
  line-height: 24px;
  white-space: nowrap;
}

.usos-catalogo .tarjeta-uso__pie .btn {
  margin-top: auto;
}

@media (min-width: 1024px) {
  .usos-catalogo {
    padding: 80px 0 72px;
  }

  .usos-catalogo .carrusel__flechas {
    margin-top: 42px;
  }

  .usos-catalogo .tarjeta-uso__img {
    height: 217px;
  }

  .usos-catalogo .tarjeta-uso__titulo {
    font-size: 26px;                                 /* AJUSTAR: lo máximo para que "Molduras y revestimientos" entre en 341 px */
    line-height: 34px;
  }

  ul.usos-catalogo__pista {
    --separacion: 24px;
  }
}