:root{
    --arna-category-nav-columns: 1;
}
@media screen and (min-width: 460px){
    :root{ --arna-category-nav-columns: 2; }
}
@media screen and (min-width: 750px){
    :root{ --arna-category-nav-columns: 4; }
}
@media screen and (min-width: 920px){
    :root{ --arna-category-nav-columns: 6; }
}
@media screen and (min-width: 1200px){
    :root{ --arna-category-nav-columns: 8; }
}

.arna-category-nav__label{
    font-size: 12px;
    font-weight: bold;
}

.arna-category-nav__list{
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat( var(--arna-category-nav-columns), 1fr);
    gap: 8px;

}

.arna-category-nav__item a{
    border: 1px solid #00477f;
    border-radius:5px;
    height:38px;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 10px;
    color:#000000;
}
.arna-category-nav__item a:hover{
    color: #00477f;
}
.arna-category-nav__item.current a{
    background: #00477f;
    color: white;
}