/* Contenedor principal para el slider */
.aviso-slider-wrapper {
    overflow: hidden; /* Oculta las tarjetas fuera de la vista */
    position: relative;
    width: 100%;
    cursor: grab; /* Cambia el cursor para indicar que es arrastrable */
}

/* Contenedor que contiene todas las tarjetas */
.aviso-slider {
    display: flex; /* Muestra las tarjetas en una fila */
    will-change: transform; /* Optimiza el rendimiento para el movimiento */
    transition: transform 1s ease-in-out; /* Transición suave para el movimiento */
}

/* Cada tarjeta de aviso */
.aviso-card {
    flex: 0 0 33.3333%; /* Cada tarjeta ocupa el 33.33% del espacio (3 a la vez) */
    padding: 8px;
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
}

/* Media Queries para hacer el slider responsivo */
@media (min-width: 640px) {
    .aviso-card {
        flex: 0 0 50%; /* En pantallas medianas, 2 tarjetas por fila */
    }
}

@media (min-width: 1024px) {
    .aviso-card {
        flex: 0 0 33.33%; /* En pantallas grandes, 3 tarjetas por fila */
    }
}

/* Esto puede añadir un pequeño espacio entre las tarjetas, si es necesario */
.aviso-card + .aviso-card {
    margin-left: 16px; /* Espacio entre las tarjetas */
}