.page__nav {
    margin-bottom: 112px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.page__nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    font-family: "Golos", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: rgba(17, 24, 39, 1);
    border-radius: 64px;
    background: rgba(240, 242, 245, 1);
    color: rgba(17, 24, 39, 1);
}

a.page__nav-item {
    transition: background-color .3s ease-in-out;
}

a.page__nav-item:hover,
.page__nav-item-active {
    background: rgba(185, 6, 64, 1);
    color:#fff;
}

.page__nav-item-dots {
    background: rgba(240, 242, 245, 1);
    color:rgba(17, 24, 39, 1);
}

.page__nav-item-prev,
.page__nav-item-next {
    border: none;
    background: #fff;
    width: fit-content;
}

a.page__nav-item-prev:hover,
a.page__nav-item-next:hover {
    background: none;
}

a.page__nav-item-prev path,
a.page__nav-item-next path  {
    transition: stroke .3s ease-in-out;
}

a.page__nav-item-prev:hover path,
a.page__nav-item-next:hover path {
    stroke: rgba(185, 6, 64, 1);
}

@media (max-width: 576px) {
    .page__nav {
        margin-bottom: 88px;
        gap: 12px;
        font-size: 16px;
        line-height: 22px;
    }

    .page__nav-item {
        width: 48px;
        height: 48px;
    }

    .page__nav-item-prev, .page__nav-item-next {
        width: fit-content;
    }
}