.dot-pattern {
    --dot-shift: 20px;
    overflow: hidden;
    background-image:
        radial-gradient(circle, #ffffff 0.55px, transparent 1.1px),
        radial-gradient(circle, #ffffff 0.55px, transparent 1.1px);
    background-size: var(--dot-shift) var(--dot-shift);
    background-position: 0 0, calc(var(--dot-shift) / 2) calc(var(--dot-shift) / 2);
    animation: dot-pattern-drift 140s linear infinite;
}

@keyframes dot-pattern-drift {
    from {
        background-position: 0 0, calc(var(--dot-shift) / 2) calc(var(--dot-shift) / 2);
    }

    to {
        background-position: var(--dot-shift) 0, calc(var(--dot-shift) * 1.5) calc(var(--dot-shift) / 2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dot-pattern {
        animation: none;
        background-image: url('../images/icons/deco_dots_tiny.svg');
        background-size: auto;
        background-position: center center;
    }
}