
.at-home-gallery .framer--slideshow-controls &gt; div:has(&gt; button[aria-label^=&quot;Scroll to page &quot;]) {
    box-sizing: border-box !important; width: var(--at-indicator-width, 220px) !important;
    max-width: 100% !important; height: 44px !important; padding: 0 !important;
    gap: 0 !important; overflow: hidden !important; justify-content: flex-start !important;
    background: transparent !important; border-radius: 0 !important; backdrop-filter: none !important;
}
.at-home-gallery .framer--slideshow-controls &gt; div:has(&gt; button[aria-label^=&quot;Scroll to page &quot;]) &gt; button {
    position: relative !important; box-sizing: border-box !important; flex: 0 0 44px !important;
    width: 44px !important; height: 44px !important; padding: 0 !important; border: 0 !important;
    background: transparent !important; cursor: pointer;
    transform: translateX(var(--at-indicator-offset, 0px)) !important;
    transition: transform .25s ease; outline-offset: -4px;
}
.at-home-gallery .framer--slideshow-controls &gt; div:has(&gt; button[aria-label^=&quot;Scroll to page &quot;]) &gt; button &gt; div { visibility: hidden !important; }
.at-home-gallery .framer--slideshow-controls &gt; div:has(&gt; button[aria-label^=&quot;Scroll to page &quot;]) &gt; button::after {
    content: &quot;&quot;; position: absolute; top: 50%; left: 50%;
    width: 14px; height: 4px; border-radius: 99px;
    background: #383838; transform: translate(-50%, -50%);
    transition: width .25s ease, background-color .25s ease;
}
.at-home-gallery .framer--slideshow-controls &gt; div:has(&gt; button[aria-label^=&quot;Scroll to page &quot;]) &gt; button[aria-current=&quot;true&quot;]::after {
    width: 24px; background: #e8c547;
}
.at-home-gallery .framer--slideshow-controls &gt; div:has(&gt; button[aria-label^=&quot;Scroll to page &quot;]) &gt; button:hover::after { background: #777; }
.at-home-gallery .framer--slideshow-controls &gt; div:has(&gt; button[aria-label^=&quot;Scroll to page &quot;]) &gt; button[aria-current=&quot;true&quot;]:hover::after {
    background: #e8c547;
}
.at-home-gallery .framer--slideshow-controls &gt; div:has(&gt; button[aria-label^=&quot;Scroll to page &quot;]) &gt; button:focus-visible {
    outline: 2px solid #e8c547;
    outline-offset: -4px;
}
@media (prefers-reduced-motion: reduce) {
    .at-home-gallery .framer--slideshow-controls &gt; div:has(&gt; button[aria-label^=&quot;Scroll to page &quot;]) &gt; button,
    .at-home-gallery .framer--slideshow-controls &gt; div:has(&gt; button[aria-label^=&quot;Scroll to page &quot;]) &gt; button::after { transition: none; }
}
