.slideshow-viewport {
    overflow: hidden;
    border-radius: var(--rounded-box, 1rem);
    background: var(--color-base-200, #e5e7eb);
}

.slideshow-track {
    display: flex;
    width: 100%;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.slideshow-slide {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
}

.slideshow-slide img {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center;
    display: block;
}

.slideshow-info {
    padding: 1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.slideshow-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.slideshow-dots {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.slideshow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    background: oklch(var(--bc, 0.2 0 0) / 0.2);
    transition: background 0.2s, transform 0.2s;
}

.slideshow-dot.active {
    background: oklch(var(--p, 0.55 0.2 260));
    transform: scale(1.35);
}