:where(.imageGallery-carousel *) {
    margin-top: 0;
}


.imageGallery-carousel {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 1.5rem;
}

    .imageGallery-carousel .glide__track,
    .imageGallery-carousel .glide__arrows {
        grid-column: 1;
        grid-row: 1;
    }

    .imageGallery-carousel .glide__bullets {
        grid-row: 2;
    }


    .imageGallery-carousel .glide__slides {
        align-items: center;
    }

    .imageGallery-carousel .glide__arrows {
        display: flex;
        gap: 1.5rem;
        align-items: center;
        justify-content: space-between;
    }

@media (width < 64rem) {
    .imageGallery-carousel .glide__arrows {
        grid-row: 3;
        justify-content: center;        
    }
}

.imageGallery-carousel__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .imageGallery-carousel__item img {
        object-fit: contain;
        height: auto;
    }

:where(.imageGallery-carousel) .glide__arrow {
    --button-height: 0;
    --button-border: none;
    --button-padding: 0;
    --button-background: transparent;
    --button-color: var(--color-black);
    height: 3rem;
    width: 3rem;
    transition: color 0.3s ease;
}

    :where(.imageGallery-carousel) .glide__arrow:hover {
        --button-border: none;
        --button-color: var(--color-gray-700);
    }

    :where(.imageGallery-carousel) .glide__arrow svg {
        pointer-events: none;
        width: 1.5rem;

        @media (width < 64rem) {
            width: 1rem;
        }
    }

@media (width >= 64rem) {
    :where(.imageGallery-carousel) .glide__arrow--left {
        transform: translateX(calc(-100% - 1.5rem));
    }

    :where(.imageGallery-carousel) .glide__arrow--right {
        transform: translateX(calc(100% + 1.5rem));
    }
}

:where(.imageGallery-carousel) .glide__bullets {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

:where(.imageGallery-carousel) .glide__bullet {
    --button-height: 0;
    --button-border: none;
    --button-padding: 0;
    --button-background: var(--color-gray-600);
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
}

    :where(.imageGallery-carousel) .glide__bullet:hover {
        --button-background: var(--color-gray-700);
        --button-border: none;
    }

:where(.imageGallery-carousel) .glide__bullet--active {
    --button-background: var(--color-gray-800);
}