.pxl-post-grid {
    .pxl-grid-inner {
        margin-block: calc(-1 * var(--y));
        margin-inline: calc(-1 * var(--x));
        .pxl-grid-item {
            padding-block: var(--y);
            padding-inline: var(--x);
        }
        @media #{$max-lg} {
            --x: 15px;
        }
    }
}

.pxl-grid-item {
    padding: 0;
}
.pxl-grid-filter, .pxl-swiper-filter {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 87px;
    padding-inline: 15px;
    @media #{$max-lg} {
        margin-bottom: 65px;
    }
    @media #{$max-sm} {
        margin-bottom: 50px;
    }
}
.pxl-filter-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 67px;
    border-bottom: 1px solid #B0B6BC;
    @media #{$max-lg} {
        column-gap: 30px;;
    }
    @media #{$max-md} {
        column-gap: 15px;
    }
    .filter-item {
        --current-color: currentcolor;
        cursor: pointer;
        position: relative;
        @extend .h5;
        color: var(--secondary-color);
        padding-inline: 13px;
        padding-bottom: 17px;
        background-color: transparent;
        @extend .pxl-transition-linear;
        --height: 3px;
        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 0;
            height: var(--height);
            background-color: var(--current-color);
            transition: inherit;
        }
        &::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: var(--height);
            background-color: var(--current-color);
            transition: inherit;
        }
        &.active, &:hover {
            color: var(--primary-color);
            &::after, &::before {
                width: 50%;
            }
        }
        @media #{$max-lg} {
            padding-bottom: 15px;;
        }
        @media #{$max-sm} {
            padding: 7px 20px;
            border-radius: 100px;
            background-color: var(--secondary-color);
            color: #FFF;
            font-size: 16px;
            margin-bottom: 10px;
            &::after, &::before {
                display: none;
            }
            &.active, &:hover {
                background-color: var(--primary-color);
                color: #FFF;
            }
        }
    }
}
