/* Explain: Styles for the rotating photo banner component. */
.rotator-slide {
    transition: opacity 1.2s ease;
}

.rotator-dot {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 0.3rem;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.rotator-dot-mark {
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.55);
    transition: all 0.3s ease;
}

.rotator-dot.is-active .rotator-dot-mark {
    width: 1.6rem;
    background: #ffffff;
}