.rr-logo-grid {
    --mobile-animation-duration: 2s;
    --mobile-stagger-delay: 0.5s;
    --desktop-animation-duration: 2.5s;
    --desktop-stagger-delay: 0.6s;
    --opacity-min: 0.2;
    --opacity-max: 1;
    position: relative;
    width: 100%;
    height: auto;
}


/* Mobile SVG - visible on mobile and tablet portrait */
.rr-logo-grid__mobile {
    display: block;
}

.rr-logo-grid__mobile svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Desktop SVG - hidden by default */
.rr-logo-grid__desktop {
    display: none;
}

.rr-logo-grid__desktop svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Tablet landscape and up - switch to desktop version */
@media (min-width: 768px) {
    .rr-logo-grid__mobile {
        display: none;
    }
    
    .rr-logo-grid__desktop {
        display: block;
    }
}

/* Base logo group styles - JavaScript will control the animations */
.rr-logo-grid .logo-group {
    opacity: var(--opacity-min);
    transition: opacity 0.3s ease-in-out;
}

/* Animation group classes are used by JavaScript for targeting - no CSS animations needed */