#carouselVPT .vpt-standard-carousel-controls {
    gap: 1rem;
    padding: .5rem 0;
}

#carouselVPT .carousel-indicators {
    justify-content: center;
}

#carouselVPT .carousel-indicators button {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border: 0;
    border-radius: 50%;
    margin: 0 6px;
    padding: 0;
    background: #aaa;
    opacity: 1;
}

#carouselVPT .carousel-indicators button:hover { background: #777; }

:is(#heroCarousel, #carouselVPT) .carousel-inner {
    position: relative;
}

.vpt-hero-mosaic {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    pointer-events: none;
}
#heroCarousel > .vpt-hero-mosaic { bottom: auto; height: var(--vpt-hero-height); }
#carouselVPT > .vpt-hero-mosaic { bottom: auto; aspect-ratio: 2 / 1; }
.vpt-hero-mosaic-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vpt-hero-mosaic-tile { position: relative; overflow: hidden; opacity: 0; animation: vpt-hero-mosaic-reveal .44s ease-out both; }
.vpt-hero-mosaic-tile img { position: absolute; left: var(--tile-left); top: var(--tile-top); width: 600%; height: 400%; max-width: none; object-fit: cover; }
.vpt-hero-mosaic-tile:nth-of-type(6n+1) { --tile-left: 0%; }
.vpt-hero-mosaic-tile:nth-of-type(6n+2) { --tile-left: -100%; }
.vpt-hero-mosaic-tile:nth-of-type(6n+3) { --tile-left: -200%; }
.vpt-hero-mosaic-tile:nth-of-type(6n+4) { --tile-left: -300%; }
.vpt-hero-mosaic-tile:nth-of-type(6n+5) { --tile-left: -400%; }
.vpt-hero-mosaic-tile:nth-of-type(6n+6) { --tile-left: -500%; }
.vpt-hero-mosaic-tile:nth-of-type(n+1):nth-of-type(-n+6) { --tile-top: 0%; }
.vpt-hero-mosaic-tile:nth-of-type(n+7):nth-of-type(-n+12) { --tile-top: -100%; }
.vpt-hero-mosaic-tile:nth-of-type(n+13):nth-of-type(-n+18) { --tile-top: -200%; }
.vpt-hero-mosaic-tile:nth-of-type(n+19):nth-of-type(-n+24) { --tile-top: -300%; }
.vpt-hero-mosaic-tile:nth-of-type(1) { animation-delay: 0ms; }
.vpt-hero-mosaic-tile:nth-of-type(2) { animation-delay: 176ms; }
.vpt-hero-mosaic-tile:nth-of-type(3) { animation-delay: 352ms; }
.vpt-hero-mosaic-tile:nth-of-type(4) { animation-delay: 144ms; }
.vpt-hero-mosaic-tile:nth-of-type(5) { animation-delay: 320ms; }
.vpt-hero-mosaic-tile:nth-of-type(6) { animation-delay: 112ms; }
.vpt-hero-mosaic-tile:nth-of-type(7) { animation-delay: 112ms; }
.vpt-hero-mosaic-tile:nth-of-type(8) { animation-delay: 288ms; }
.vpt-hero-mosaic-tile:nth-of-type(9) { animation-delay: 80ms; }
.vpt-hero-mosaic-tile:nth-of-type(10) { animation-delay: 256ms; }
.vpt-hero-mosaic-tile:nth-of-type(11) { animation-delay: 48ms; }
.vpt-hero-mosaic-tile:nth-of-type(12) { animation-delay: 224ms; }
.vpt-hero-mosaic-tile:nth-of-type(13) { animation-delay: 224ms; }
.vpt-hero-mosaic-tile:nth-of-type(14) { animation-delay: 16ms; }
.vpt-hero-mosaic-tile:nth-of-type(15) { animation-delay: 192ms; }
.vpt-hero-mosaic-tile:nth-of-type(16) { animation-delay: 368ms; }
.vpt-hero-mosaic-tile:nth-of-type(17) { animation-delay: 160ms; }
.vpt-hero-mosaic-tile:nth-of-type(18) { animation-delay: 336ms; }
.vpt-hero-mosaic-tile:nth-of-type(19) { animation-delay: 336ms; }
.vpt-hero-mosaic-tile:nth-of-type(20) { animation-delay: 128ms; }
.vpt-hero-mosaic-tile:nth-of-type(21) { animation-delay: 304ms; }
.vpt-hero-mosaic-tile:nth-of-type(22) { animation-delay: 96ms; }
.vpt-hero-mosaic-tile:nth-of-type(23) { animation-delay: 272ms; }
.vpt-hero-mosaic-tile:nth-of-type(24) { animation-delay: 64ms; }
#heroCarousel .vpt-hero-mosaic-tile img { object-position: center center; }
@keyframes vpt-hero-mosaic-reveal { to { opacity: 1; } }
@media (max-width: 767.98px) {
    #heroCarousel .vpt-hero-mosaic-tile img { object-position: var(--hero-mobile-position, center center); }
    #heroCarousel .vpt-hero-mosaic-backdrop { object-position: var(--hero-current-mobile-position, center center); }
}
@media (prefers-reduced-motion: reduce) { .vpt-hero-mosaic { display: none; } }

@media (max-width: 767.98px) {
    #carouselVPT .carousel-inner { aspect-ratio: 2 / 1; overflow: hidden; }
    #carouselVPT .carousel-item,
    #carouselVPT .carousel-item img { width: 100%; height: 100%; }
    #carouselVPT .carousel-item img { object-fit: cover; }
}
#carouselVPT .vpt-content-slide-image { aspect-ratio: 2 / 1; }