.allthings-top{
        display: flex;
        justify-content: space-between;

        .tags{
            max-height: 36px;
        }
    }
    .allthings-grid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .allthings-grid.query-items{
        display: none;
    }

    .allthings-grid.all-items.hidden__now{
        display: none;
    }

    .allthings-grid.query-items.active--nonds{
        display: grid;
    }
    .allthings-item{
        padding: clamp(1.5rem, 2vw, 2rem);
        background: var(--white);
        border-radius: 12px;
        display: flex;
        justify-content: space-between;
        gap: clamp(1.25rem,2vw,2rem);
    }

    .allthings-item:hover{
        box-shadow: 0px 4px 16px 0px rgba(122, 133, 147, 0.18);

        .allthings-title{
            color: var(--green-dark);
        }
    }

    .allthings-item .allthings-item-image{
        flex: 0 0 163.54px;
        height: 100%; 
    }

    .allthings-item .allthings-item-image img{
        width: 100%;
        height: 102px;
        object-fit: cover;
        border-radius: 8px;
    }

    .allthings-title{
        margin-top: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: clamp(.9375rem, 2vw, 1rem);
        line-height: clamp(1.5rem, 2vw, 1.625rem);
    }

    .allthings-item-text{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    @media (max-width: 876px){
        .allthings-item{
            flex-direction: column;

            .allthings-item .allthings-item-image{
                flex: 0 0 fit-content;
            }

            .allthings-item-image img{
                height: 100%;
            }
        }
    }

    @media (max-width: 790px){
        .allthings-top .tags{
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
        }
    }

    

    @media (max-width: 700px){
        .allthings-top{
            flex-direction: column;
            gap: 24px;
        }
    }

    @media (max-width: 600px){
        .allthings-grid{
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.25rem;
        }
    }

    @media (max-width: 510px){
        .allthings-top .tags{
            white-space: nowrap;
            flex-wrap: nowrap;
            --offset: clamp(1rem,2vw,2rem);
            padding-left: var(--offset);
            padding-right: var(--offset);
            margin-left: calc(-1 * var(--offset));
            margin-right: calc(-1 * var(--offset));
            overflow-x: auto;
            overflow-y: hidden;
        }
    }