.main-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.main-nav .ms-nav-icon {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
    flex-shrink: 0;

    filter:
        drop-shadow(
            0 0 4px
            rgba(139, 92, 246, .30)
        );

    transition:
        transform .2s ease,
        filter .2s ease;
}

.main-nav a:hover .ms-nav-icon {
    transform: scale(1.08);

    filter:
        drop-shadow(
            0 0 9px
            rgba(167, 139, 250, .55)
        );
}

.main-nav a.active .ms-nav-icon,
.main-nav a[aria-current="page"] .ms-nav-icon {

    filter:
        drop-shadow(
            0 0 10px
            rgba(167, 139, 250, .70)
        );
}

.main-nav .ms-nav-label {
    line-height: 1;
}

@media (max-width: 768px) {

    .main-nav .ms-nav-icon {
        width: 24px;
        height: 24px;
    }

}