.props-cont {
    /* margin-top: 5rem; */
    display: flex; /* Usar flexbox para un mejor control */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan */
    gap: 20px; /* Espaciado entre las tarjetas */

}

.title-cont{
    margin-top: 4rem;
    margin-bottom: 4rem;
}

props-title{
    font-family: "Inter", serif ;
    font-size: 2.5rem;
}


.prop {
    /* Define el tamaño mínimo de las tarjetas para evitar el desbordamiento */
    min-width: 280px; /* Ajusta el ancho mínimo para las tarjetas */
    flex: 1 1 30%; /* 30% de ancho por defecto para cada tarjeta */
    box-sizing: border-box; /* Asegura que los márgenes no hagan que se desborden */
    margin: auto;
    margin-top: 40px;

}


.prop:hover {
    transform: translateY(-10px); /* Movimiento al pasar el mouse */
    transition: transform 0.3s ease-in-out;
}

.page-nav {
    margin-top: 2rem;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 1400px) {
    .prop {
        flex: 1 1 45%; /* 2 tarjetas por fila para pantallas pequeñas */
    }
}
@media (max-width: 992px) {
    .prop {
        flex: 1 1 90%; /* 1 tarjeta por fila para pantallas muy pequeñas */
    }

    .props-cont {
        width: 100%;
        margin: auto !important;
    }
}


@media (max-width: 576px) {
    .prop {
        flex: 1 1 90%; /* 1 tarjeta por fila para pantallas muy pequeñas */
    }

    .props-cont {
        width: 95%;
        margin: auto;
    }
}


.prop img {
    width: 100%; /* Hace que la imagen sea responsive */
    height: auto; /* Mantiene la proporción de la imagen */
    object-fit: cover; /* Para que la imagen ocupe el espacio sin distorsionarse */
}

.prop .card-body {
    padding: 1rem; /* Reduce el padding para pantallas pequeñas */
}

.card-title {
    font-size: 1.2rem; /* Tamaño de fuente para título */
}

.card-text {
    font-size: 1rem; /* Tamaño de fuente para la descripción */
}

.card-footer {
    font-size: 0.9rem; /* Tamaño de fuente para pie de página */
}