.div-cardsportafolio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    justify-content: center; /* o flex-end si quieres que estén alineadas a la derecha */
    gap: 1rem; /* ajusta este valor según el espacio que desees entre las tarjetas */
    padding: 1rem;
}

.cardproject {
    width: 28rem; /* Ancho fijo para las tarjetas */
    height: auto; /* Altura automática para acomodar el contenido */
}

@media screen and (max-width: 1200px) { /* Ajusta según el punto de ruptura deseado */
    .div-cardsportafolio {
        grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    }
}

@media screen and (max-width: 900px) { /* Punto de ruptura para una fila de dos tarjetas */
    .div-cardsportafolio {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 600px) { /* Punto de ruptura para una sola columna */
    .div-cardsportafolio {
        grid-template-columns: 1fr;
    }
}


.cardproject {
    margin-left: 3%;
    width: 28rem; /* o 100% si quieres que sea flexible */
    height: auto; /* altura automática para acomodar el contenido */
    overflow: hidden; /* solo si quieres evitar el desbordamiento */
    padding: 1rem; /* espacio dentro de la tarjeta */
}

.card-body p {
    font-size: 1rem; /* o menor si es necesario */
    margin-bottom: 0.5rem; /* espacio entre párrafos */
}

@media screen and (max-width: 768px) {
    .cardproject {
        width: 100%; /* tarjetas más pequeñas en pantallas más pequeñas */
    }

    .card-body p {
        font-size: 0.8rem; /* texto más pequeño en pantallas más pequeñas */
    }
}

@media screen and (max-width: 400px) {
    .titulo {
        font-size: 30px; /* ajusta el tamaño de la fuente según sea necesario */
    }

    .titulo2 {
        font-size: 22px; /* ajusta el tamaño de la fuente según sea necesario */
    }

    .descip {
        font-size: 18px; /* ajusta el tamaño de la fuente según sea necesario */
    }

    .cardproject {
        margin-left: 0; /* quita el margen para pantallas pequeñas */
    }
}