/* Contenedor de tarjetas */
.card-container-news {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Ahora permite más adaptabilidad */
    gap: 16px; /* Reducimos el espacio entre tarjetas en pantallas pequeñas */
    padding: 10px; /* Menos padding para aprovechar el espacio */
}

/* Tarjeta de noticia */
.card-news {
    width: 100%; /* Ocupará el 100% del contenedor en pantallas pequeñas */
    max-width: 350px; /* Máximo tamaño en pantallas grandes */
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    background-color: #fff;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s;
    margin: 0 auto;
}

.card-news:hover {
    transform: translateY(-5px);
}

/* Imagen de la tarjeta */
.card-news-img {
    width: 100%;
    height: 200px; /* Reducimos la altura en pantallas pequeñas */
    object-fit: cover;
    margin-bottom: 8px !important;
}

/* Cuerpo de la tarjeta */
.card-body-news {
    padding: 8px;
}

/* Título del enlace */
.card-news-a {
    color: #337ab7;
    font-weight: bold;
    display: block;
    font-size: 1rem; /* Asegura que el texto sea legible en pantallas pequeñas */
}

/* Párrafos dentro de la tarjeta */
.card-news-p {
    color: #555;
    font-size: 0.9rem; /* Ajustamos el tamaño de fuente */
}

/* Mejoramos la accesibilidad en pantallas menores a 400px */
@media (max-width: 400px) {
    .card-container-news {
        grid-template-columns: 1fr; /* Asegura que las tarjetas ocupen todo el ancho */
        gap: 10px; /* Menos espacio entre tarjetas */
        padding: 5px; /* Menos padding general */
    }

    .card-news {
        max-width: 100%; /* Permite que ocupe toda la pantalla si es necesario */
        border-radius: 5px; /* Menos borde para mayor usabilidad */
    }

    .card-news-img {
        height: 180px; /* Ajustamos la altura de la imagen */
    }

    .card-news-a {
        font-size: 1.1rem; /* Texto más grande y accesible */
    }

    .card-news-p {
        font-size: 1rem; /* Asegura buena legibilidad */
    }
}