.sidebar__social-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 12px;
    margin: 0;
    justify-content: flex-start;
    # max-width: 240px; /* adjust based on layout */
    flex-direction: row;
}

.sidebar__social-container li {
    width: calc(25% - 6px); /* 4 items per row with gap compensation */
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar__social-container li a {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--tf-bg2);
    border-radius: 10px;
    padding: 10px;
    transition: all 0.2s ease;
  cursor:pointer;
}

.sidebar__social-container li a:hover ,
.instrument-icon-wrapper:hover svg {
    animation: shake 0.3s ease-in-out 1; 
    transform: scale(1.05);
    background-color: #ccb964;
}

.sidebar__social-container li svg {
    width: 100%;
    height: auto;
    max-width: 28px;
    margin: auto;
    display: block;
}
 @keyframes shake {
    0% { transform: translateX(0); }
    50% { transform: translateX(-5px); }
    100% { transform: translateX(5px); }
  }