.lg-logo-grid {
    display: grid;
    gap: 40px;
    align-items: center;

    /* Use variable for desktop */
    grid-template-columns: repeat(var(--grid-desktop), 1fr);
}

/* Medium screens (<1920) */
@media (max-width: 1920px) {
    .lg-logo-grid {
        grid-template-columns: repeat(var(--grid-medium), 1fr);
    }
}

/* Tablet */
@media (max-width: 1000px) {
    .lg-logo-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .lg-logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.lg-logo-item {
    opacity: 0;
    transform: translateY(30px);
    will-change: opacity, transform;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.lg-logo-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Logo image styling */
.lg-logo-img {
    width: 100%;
    height: auto;
    display: block;
    transition: 
        filter 0.4s ease,
        transform 0.4s ease;
}

/* Hover effect */
.lg-logo-item:hover .lg-logo-img {
    transform: translateY(-6px);
}

/* Only apply grayscale if enabled */
.lg-grayscale .lg-logo-img {
    filter: grayscale(100%);
    transition: 
        filter 0.4s ease,
        transform 0.4s ease;
}

.lg-grayscale .lg-logo-item:hover .lg-logo-img {
    filter: grayscale(0%);
    transform: translateY(-6px);
}

/* If grayscale disabled */
.lg-no-grayscale .lg-logo-img {
    transition: transform 0.4s ease;
}

.lg-no-grayscale .lg-logo-item:hover .lg-logo-img {
    transform: translateY(-6px);
}