button.sort{
    .arrow{
        line-height: 0;
        --size:  12px;
        height: var(--size);
        width: var(--size);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        top: -2px;
        transform: rotate(90deg);
        transition: transform 0.2s ease-in;
        svg{
            width: 100%;
            fill: var(--color-txt);
        }
        
    }



    &[data-sort-type="up"]{
        .arrow{
            transform: rotate(-90deg);
        }
    }

}


.page__sort {
    margin-bottom: calc(var(--spacing) * 1);
    display: flex;
    justify-content: right;
    grid-gap: var(--padding-inner);
    width: 100%;
    max-width: var(--max-w-cards);
    margin-inline: auto;
    // z-index: calc(var(--z-header) - 100);

}