.ecosystem-grid {
    grid-template-columns: repeat(4, minmax(64px, 1fr));
    column-gap: 6px;
    row-gap: 16px;
    overflow: hidden;
}

.ecosystem-box {
    cursor: pointer;
    transition: all 0.3s ease;
    gap: 12px;
    opacity: 0.8;
}

.ecosystem-box:hover {
    opacity: 1;
}

.ecosystem-box:hover .ecosystem-logo {
    transform: scale(1.1); 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ecosystem-box .ecosystem-logo {
    height: 52px;
    /* width: 52px; */
    width: 80%;
}

.ecosystem-box .ecosystem-logo i {
    font-size: 26px;
}

.ecosystem-box .ecosystem-title {
    font-size: 12px;
}

@media (max-width: 1581.98px) {
    .ecosystem-grid {
        row-gap: 10px;
    }
    .layout-menu-open .ecosystem-grid {
        grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
    }   
    .layout-menu-open .ecosystem-grid .ecosystem-box {
        row-gap: 8px;
    }
    .layout-menu-open .ecosystem-grid .ecosystem-logo {
        height: 48px;
    }   
    .layout-menu-open .ecosystem-grid .ecosystem-box .ecosystem-title {
        font-size: 11px;
    }
    .layout-menu-open .ecosystem-grid .ecosystem-box .ecosystem-logo i {
        font-size: 24px;
    }
}

@media (max-width: 1477.98px) {
    .ecosystem-grid .ecosystem-box, .layout-menu-open .ecosystem-grid .ecosystem-box {
        row-gap: 8px;
    }
    .ecosystem-grid .ecosystem-logo {
        height: 44px;
    }   
    .ecosystem-grid .ecosystem-box .ecosystem-title, .layout-menu-open .ecosystem-grid .ecosystem-box .ecosystem-title {
        font-size: 11px;
    }
    .ecosystem-box .ecosystem-logo i, .layout-menu-open .ecosystem-grid .ecosystem-box .ecosystem-logo i {
        font-size: 24px;
    }
    .layout-menu-open .ecosystem-grid {
        grid-template-columns: repeat(3, minmax(48px, 1fr));
    }
    .layout-menu-open .ecosystem-grid .ecosystem-logo {
        height: 40px;
    } 
}

@media (max-width: 1370px) {
    .ecosystem-grid {
        grid-template-columns: repeat(3, minmax(56px, 1fr));
    }
}

@media (max-width: 1206px) and (min-width: 992px) {
    .layout-menu-open .ecosystem-grid {
        grid-template-columns: repeat(2, minmax(44px, 1fr));
    }
    .layout-menu-open .ecosystem-grid .ecosystem-box {
        row-gap: 6px;
    }
    .layout-menu-open .ecosystem-grid .ecosystem-logo {
        height: 28px;
    } 
    .layout-menu-open .ecosystem-grid .ecosystem-box .ecosystem-logo i {
        font-size: 18px;
    }
}

@media (max-width: 1124.98px) and (min-width: 992px) {
    .ecosystem-grid {
        grid-template-columns: repeat(3, minmax(48px, 1fr));
    }
    .ecosystem-grid .ecosystem-logo {
        height: 40px;
    } 
}

@media (max-width: 767.98px) and (min-width: 500px) {
    .ecosystem-grid {
        grid-template-columns: repeat(4, minmax(48px, 1fr));
    }
}

@media (max-width: 499.98px) {
    .ecosystem-grid .ecosystem-logo {
        height: 40px;
    }  
}