.c-ulink-c {
    list-style-type: none;
    margin         : 0;
    padding        : 0;
}

.c-ulink {
    list-style-type    : none;
    margin             : 0;
    font-family        : var(--font-title);
    padding            : 0 2.5em 0 0;
    align-content      : center;
    background-position: center right;
    background-size    : 2em;
    background-repeat  : no-repeat;
    text-decoration    : none;
    color              : inherit;
    display            : inline-block;
    width              : 100%;
    height             : 3em;
    border-bottom-width: var(--border-thin);
    border-bottom-style: solid;
}

.c-ulink:visited {
    color: inherit;
}

.c-ulink-news {
    background-image   : url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.a{fill:none;stroke:%230c76f2;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}</style></defs><path d="M31 16a15 15 0 1 1-30 0 15 15 0 0 1 30 0Z" class="a"/><path d="m16 22 6-6-6-6m-6 6h12" class="a"/></svg>');
    border-bottom-color: var(--univ-primary-news);
}

.c-ulink-inst {
    background-image   : url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.a{fill:none;stroke:%23696969;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}</style></defs><path d="M31 16a15 15 0 1 1-30 0 15 15 0 0 1 30 0Z" class="a"/><path d="m16 22 6-6-6-6m-6 6h12" class="a"/></svg>');
    border-bottom-color: var(--univ-primary-inst);
}

.c-ulink-serv {
    background-image   : url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.a{fill:none;stroke:%23fd6b00;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}</style></defs><path d="M31 16a15 15 0 1 1-30 0 15 15 0 0 1 30 0Z" class="a"/><path d="m16 22 6-6-6-6m-6 6h12" class="a"/></svg>');
    border-bottom-color: var(--univ-primary-serv);
}

.c-ulink-news .c-ulink-sep {
    color: var(--univ-primary-news);
}

.c-ulink-inst .c-ulink-sep {
    color: var(--univ-primary-inst);
}

.c-ulink-serv .c-ulink-sep {
    color: var(--univ-primary-serv);
}

@media (min-width: 48rem) {
    .c-ulink-c {
        flex-grow: 1;
    }

    .c-ulink {
        box-sizing         : content-box;
        padding            : 0 var(--margin-xl) 0 0;
        background-size    : var(--margin-xl);
        font-size          : var(--font-size-xl);
        transition         : all 0.2s ease-in-out;
        border-bottom-width: var(--border-thin);
        margin-bottom      : calc(var(--border-strong) - var(--border-thin));
        width              : calc(100% - var(--margin-xl));
        height             : 4em;
    }

    .c-ulink:hover {
        border-bottom-width: var(--border-strong);
        transition         : all 0.2s ease-in-out;
        border-bottom-width: var(--border-strong);
        margin-bottom      : 0;
    }

}