.link{
    cursor: pointer;

}

.link.link-underline {
    text-decoration: underline;
}



.link.link-underline-expand {

    position: relative;
    display: inline-block;
}

.link.link-underline-expand::after {
    content: "";
    width: 100%;
    position: absolute;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    bottom: -4px;
    left: 0;
    right: 0;
    -webkit-transition: width 0.5s;
    -moz-transition: width 0.5s;
    -ms-transition: width 0.5s;
    -o-transition: width 0.5s;
    transition: width 0.5s;
}

.link.link-underline-expand:hover::after {
    width: 0%;
}

.link.link-underline-expand::before {
    content: "";
    width: 0%;
    position: absolute;
    height: 1px;
    background: var(--color);
    bottom: -4px;
    left: 0;
    right: 0;
    -webkit-transition: width 0.75s;
    -moz-transition: width 0.75s;
    -ms-transition: width 0.75s;
    -o-transition: width 0.75s;
    transition: width 0.75s;
}

.link.link-underline-expand:hover::before {
    width: 100%;
}