.filtros .container {
    background-color: #ffffff;
    padding: 0;
    gap: 8px;
    flex-wrap: wrap;
    border-width: 1px 0;
    margin: var(--elements-gap) auto;
}

.paginacao-buttons {
    margin-left: auto;
}

.paginacao-buttons-item {
    color: #000;
    border-radius: 4px;
    background-color: transparent;
    margin: 0 2px;
    padding: 8px 16px;
    border: 1px solid var(--color-cinza-escuro);

    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;

    width: 48px;
    height: 48px;
}

.paginacao-buttons-item.separator {
    border: 0;
    cursor: default;
}

.paginacao-buttons-item:not(.separator).active,
.paginacao-buttons-item:not(.separator):hover {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    color: #fff;
    padding: 5px 16px;
}

.filtro-display-mode {
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.filtro-display-mode-list {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
}

@media (max-width: 374px) {
    .filtro-display-mode-list {
        display: none;
    }
}

.filtro-display-mode-item--mobile {
    display: block;
}

.filtro-display-mode-item--desktop {
    display: none;
}

@media (min-width: 768px) {
    .filtro-display-mode-item--mobile {
        display: none;
    }

    .filtro-display-mode-item--desktop {
        display: block;
    }
}

.filtro-display-mode-item rect {
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;

    fill: #d1d9dd;
}

.filtro-display-mode-item:hover {
    cursor: pointer;
}

.filtro-display-mode-item:hover :is(rect, path) {
    fill: var(--primary-color);
}

.filtro-display-mode-item.active :is(rect, path) {
    fill: var(--primary-color);
}