.projects-filter {
    align-items: flex-start;
    position: relative;
}

.projects-filter .filter-container {
    margin-bottom: 0;
}

.projects-filter .filter-container .filter-item {
    display: block;
}

.projects-filter .filter-sort {
    margin-left: auto;
}

.projects-filter .filter-default__icon {
    margin-left: auto;
    padding-left: 0.75rem;
    position: relative;
    display: flex;
    align-items: center;
}

.projects-filter .filter-default {
    position: relative;
    touch-action: manipulation;
}

.projects-filter .filter-default__number {
    right: auto;
    left: 100%;
    top: 50%;
    transform: translate(-0.625rem, -50%);
}

.projects-filter .filter-default__icon-close {
    position: absolute;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3.3125rem;
}

.projects-card {
    min-width: 0;
}

.projects-card.is-hidden {
    display: none;
}

.projects-grid .pic-link {
    align-items: flex-start;
}

.projects-grid .pic-link__img {
    padding-bottom: 110%;
}

.projects-empty[hidden] {
    display: none;
}

@media (max-width: 1660px) {
    .projects-grid {
        gap: 1.6875rem;
    }
}

@media (max-width: 1279px) {
    .projects-filter {
        gap: 1.25rem;
    }

    .projects-filter .filter-container .filter-item {
        display: block;
    }

    .projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.875rem;
    }
}

@media (max-width: 767px) {
    .projects-filter {
        display: block;
        overflow: visible;
        overflow-y: visible;
        padding-bottom: 0.3125rem;
    }

    .projects-filter .filter-container {
        display: flex;
        flex-flow: row nowrap;
        gap: 0.75rem;
        overflow-x: auto;
        overflow-y: visible;
        width: max-content;
        min-width: 100%;
        margin-right: 0;
        padding-right: 0.9375rem;
        touch-action: pan-x;
        scrollbar-width: none;
    }

    .projects-filter .filter-container::-webkit-scrollbar {
        display: none;
    }

    .projects-filter .filter-container .filter-item {
        display: block;
        flex: 0 0 auto;
        position: static;
    }

    .projects-filter .filter-container .filter-default {
        white-space: nowrap;
    }

    .projects-filter .filter-container .filter-block {
        position: absolute;
        left: 15px;
        right: auto;
        width: calc(100vw - 30px);
        max-width: calc(100vw - 30px);
        z-index: 20;
    }

    .projects-filter > .filter-block {
        position: absolute;
        left: 15px;
        right: auto;
        width: calc(100vw - 30px);
        max-width: calc(100vw - 30px);
        z-index: 20;
    }

    .projects-filter > .filter-block.projects-filter-block-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .projects-filter .filter-item-checked .filter-default__number {
        display: flex;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}