/* Nerd-Pastell Divider */

.np-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin: 38px auto;

    width: min(100%, 760px);
    height: 24px;
}

.np-divider::before,
.np-divider::after {
    content: "";

    height: 2px;
    flex: 1;

    border-radius: 999px;
}

.np-divider::before {
    background: linear-gradient(
        90deg,
        transparent,
        #ffd1e5 22%,
        #bfa7f3 58%,
        #6fdccf
    );
}

.np-divider::after {
    background: linear-gradient(
        90deg,
        #6fdccf,
        #bfa7f3 42%,
        #ffd1e5 78%,
        transparent
    );
}

.np-divider span {
    position: relative;

    display: grid;
    place-items: center;

    width: 18px;
    height: 18px;

    flex: 0 0 auto;
}

.np-divider span::before {
    content: "";

    width: 9px;
    height: 9px;

    border-radius: 999px;

    background: #ff78ad;

    box-shadow:
        0 0 0 4px rgba(255, 120, 173, 0.14),
        0 0 18px rgba(255, 120, 173, 0.42);
}

@media (max-width: 680px) {

    .np-divider {
        margin: 30px auto;
        width: 100%;
    }
}