ul.pagination {
    display: flex;
    justify-content: center;
    align-items: stretch;
    list-style: none;
    padding: 3rem 0;
    position: relative;
    z-index: 1;
}

ul.pagination li {
    margin-right: 5px;
}

ul.pagination li a, ul.pagination li.active span {
    width: 2rem;
    height: 2rem;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    text-decoration: none;

}

ul.pagination li a.straight {
    border: 1px solid var(--hlavnibarva);
    border-radius: 5px;
    padding: 0;
}

ul.pagination li.active span {
    background: #dbdbdb;
    color: var(--inverznitext);
}


ul.pagination li a:hover {
    background: #dbdbdb;
}

ul.pagination span.zacatek,ul.pagination span.predchozi,ul.pagination span.dalsi,ul.pagination span.konec {
    width: 0.7rem;
    height: 0.7rem;
    background: var(--hlavnibarva);
    -webkit-mask-size: cover;
    mask-size: cover;
}

ul.pagination span.zacatek {
    -webkit-mask-image: url('../img/pagination/zacatek.svg');
    mask-image: url('../img/pagination/zacatek.svg');
}
ul.pagination span.konec {
    -webkit-mask-image: url('../img/pagination/konec.svg');
    mask-image: url('../img/pagination/konec.svg');
}
ul.pagination span.predchozi {
    -webkit-mask-image: url('../img/pagination/predchozi.svg');
    mask-image: url('../img/pagination/predchozi.svg');
}
ul.pagination span.dalsi {
    -webkit-mask-image: url('../img/pagination/dalsi.svg');
    mask-image: url('../img/pagination/dalsi.svg');
}