@media (max-width: 767px) {
    .carousel-inner .carousel-item>div {
        display: none;
    }

    .carousel-inner .carousel-item>div:first-child {
        display: block;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {

/*    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(25%);
    }

    .carousel-inner .carousel-item-start.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-25%);
    }*/


    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(25%);
        display: flex;
    }

    .carousel-inner .carousel-item-start.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-25%);
        display: none;
    }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
    transform: translateX(0);
}

.modal-dialog {
    max-width: 90%;
    height: 90%;
    margin: auto;
}

.modal-content {
    height: 100%;
}

.modal-body {
    padding: 0;
    height: calc(100% - 56px);
    /* Ajuste para el tamaño del header */
}

    .modal-body img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.modal-header {
    padding: 0.5rem 1rem;
}