.single-default-menu{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    >a{
        padding: 20px;
        display: flex;
        align-items: center;
        gap: 16px;
        position: relative;
        overflow: hidden;
        >h5{
            flex-grow: 1;
        }
        >svg{
            flex-shrink: 0;
        }
        &::before,
        &::after{
            content: "";
            display: block;
            position: absolute;
            left: 0;
            bottom: 0px;
            width: 100%;
            height: 2px;
        }
        &::before{
            background-color: var(--color-gray-5);
        }
        &::after{
            background-color: var(--color-primary-1);
            transform: translateX(-100%);
            transition: transform .5s;
        }

        &:hover::after,
        &.active::after{
            transform: translateX(0%);
        }
    }
}

@media screen and (width < 1024px) {
    .single-default-menu{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (width < 576px) {
    .single-default-menu{
        grid-template-columns: 100%;
        >a{
            padding: 16px;
        }
    }
}