.evento-img-container {
            width: 100%;
            /* height: 150px; */
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f9fa;
            overflow: hidden;
        }

        .evento-img-container img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: block;
        }

        .carouselEventos .carousel-control-next,
        .carouselEventos .carousel-control-prev {
            width: 42px;
        }

        /* Personaliza los iconos de los controles del carrusel */
        .carouselEventos .carousel-control-prev-icon,
        .carouselEventos .carousel-control-next-icon {
            background-color: red;
            border-radius: 50%;
            background-size: 60% 60%;
            background-position: center;
            background-repeat: no-repeat;
            width: 2.5rem;
            height: 2.5rem;
        }

        /* Opcional: mejora la visibilidad del fondo de los controles */
        .carouselEventos .carousel-control-prev,
        .carouselEventos .carousel-control-next {
            filter: none;
        }

        .card-body {
            padding: 0.5rem;
        }

        .multicarousel .carousel-control-next-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e") !important;
        }

        .multicarousel .carousel-control-prev-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e") !important;
        }

        .multicarousel .card-title {
            color: #A35C5C !important;
            font-size: 1em !important;
        }


        /* Estas clases sirven para que el contenedor de la imagen siempres tenga el mismo tamaño. Lo único malo es que cambia el ancho según la resolución */

        .evento-img-container {
            width: 100%;
            height: 160px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: #f8f9fa;
        }

        .evento-img-container>img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }