.component-area-links {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 10px
}

.component-area-links li {
    width: calc(1/5*100% - (1 - 1/5)*20px);
}

.component-area-links li a {
    position: relative
}

.component-area-links li a:after {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    position: absolute;
    bottom: -2px;
    left: 0;
    background-color: var(--primary-color);
}

@media only screen and (max-width: 991px) {
    .component-area-links li {
        width: calc(1/3*100% - (1 - 1/3)*20px);
    }
}

@media only screen and (max-width: 767px) {
    .component-area-links li {
        width: calc(1/2*100% - (1 - 1/2)*20px);
    }
}