/* FOOTER RUNNERS */
@keyframes runMove {
    from {
        transform: translateX(-120%);
    }

    to {
        transform: translateX(120vw);
    }
}

.runner {
    animation: runMove linear infinite;
    transform-origin: bottom left;
    display: block;
}

.runner-1 {
    animation-duration: 28s;
}

.runner-2 {
    animation-duration: 18s;
    animation-delay: -10s;
}

.runner-3 {
    animation-duration: 22s;
    animation-delay: -5s;
}

/* --- DYNAMIC CONFIGURATION --- */
:root {
    --runner-height: 28px;
    /* Default Mobile */
}

@media (min-width: 640px) {
    :root {
        --runner-height: 50px;
    }

    /* sm */
}

@media (min-width: 768px) {
    :root {
        --runner-height: 58px;
    }

    /* md */
}

@media (min-width: 1024px) {
    :root {
        --runner-height: 85px;
    }

    /* lg */
}

@media (min-width: 1280px) {
    :root {
        --runner-height: 100px;
    }

    /* xl */
}

@media (min-width: 1536px) {
    :root {
        --runner-height: 125px;
    }

    /* 2xl */
}

@media (min-width: 1920px) {
    :root {
        --runner-height: 170px;
    }

    /* 2xl + */
}

/* --- RUNNERS CODE --- */
.runner-1,
.runner-2,
.runner-3 {
    height: var(--runner-height);
    width: auto;
    transition: height 0.3s ease;
}