.abg-carousel {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
}

.abg-carousel-track {
    display: flex;
    gap: var(--abg-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    user-select: none;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
}

.abg-carousel-track::-webkit-scrollbar {
    display: none;
}

.abg-carousel-track.abg-dragging {
    cursor: grabbing;
}

.abg-carousel-set {
    display: flex;
    flex: 0 0 auto;
    gap: var(--abg-gap);
}

.abg-carousel-slide {
    flex: 0 0 var(--abg-w-desktop);
    width: var(--abg-w-desktop);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--abg-radius);
}

.abg-carousel-slide img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: inherit;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

@media (max-width: 1024px) {
    .abg-carousel-slide {
        flex-basis: var(--abg-w-tablet);
        width: var(--abg-w-tablet);
    }
}

@media (max-width: 767px) {
    .abg-carousel-slide {
        flex-basis: var(--abg-w-mobile);
        width: var(--abg-w-mobile);
    }
}

@media (max-width: 767px) {
    .abg-carousel-track {
        cursor: default;
        scroll-behavior: auto;
        touch-action: pan-x pan-y;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
}