.bg-socket-bg.text-socket-color {
    color: #c5bdb5;
}

.text-main-meta {
    color: #706257;
}

.hero-carousel-dot {
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
}

.hero-carousel-dot::before {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: rgb(255 255 255 / 40%);
    content: "";
    transition: width 300ms ease, background-color 300ms ease;
}

.hero-carousel-dot[aria-pressed="true"]::before {
    width: 28px;
    background: rgb(255 255 255 / 80%);
}

.hero-carousel-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .hero-carousel-dot::before {
        transition: none;
    }
}