body {
    .image-carousel {
        display: flex;
        overflow-x: auto;
        gap: .75rem;
        padding: .5rem;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        cursor: grab;
        user-select: none;
    }

        .image-carousel.dragging {
            cursor: grabbing;
            scroll-snap-type: none;
        }

    .image-slide {
        flex: 0 0 auto;
        width: min(320px, calc(100vw - 2rem));
        aspect-ratio: 4 / 3;
        padding: 0;
        border: 0;
        border-radius: .75rem;
        overflow: hidden;
        background: transparent;
        scroll-snap-align: center;
    }

        .image-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    /* Imagen ampliada */
    .image-modal {
        position: fixed;
        inset: 0;
        z-index: 9991;
        place-items: center;
        padding: 1rem;
        background: rgb(0 0 0 / .85);
        display: none;
        /*display: grid;*/
        overflow: auto;
    }

    .image-modal-content {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: .5rem;
    }

    .image-modal-close {
        position: fixed;
        top: 1rem;
        right: 1rem;
        width: 2.75rem;
        height: 2.75rem;
        border: 0;
        border-radius: 50%;
        font-size: 2rem;
    }