.hero {
    height: 100vh;
    background-image: var(--bg-desktop);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Switch the variable at the breakpoint */
@media (max-width: 768px) {
    .hero {
        background-image: var(--bg-mobile);
    }
}