.lms-blog-carousel-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; max-width: 32rem; margin: .6rem auto 0; }
.lms-blog-carousel-arrow { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; padding: 0; border: 1px solid #64748b; border-radius: 999px; background: #ffffff; color: #0f172a; font-size: 1.75rem; line-height: 1; cursor: pointer; }
.lms-blog-carousel-arrow:hover { background: #f8fafc; }
.lms-blog-carousel-prev { grid-column: 1; grid-row: 1; }
.lms-blog-carousel-next { grid-column: 3; grid-row: 1; }
.lms-blog-carousel-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem; min-width: 0; grid-column: 2; }
.lms-blog-carousel-dot {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 1.75rem;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    padding: 0;
    cursor: pointer;
}
.lms-blog-carousel-dot::before {
    content: "";
    display: block;
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: #cbd5e1;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #0f172a;
    transition: width .18s ease;
}
.lms-blog-carousel-dot.is-active::before { width: 1.2rem; background: #0f172a; }
.lms-blog-carousel-dot:focus-visible, .lms-blog-carousel-arrow:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 4px #0f172a; }
@media (prefers-reduced-motion: reduce) { .lms-blog-carousel-dot::before { transition: none; } }