.wb-documents-list {

    .post-filter {
        background-color: var(--wb--color--white);
        border-top: 1px solid var(--wb--color--light-grey);
        border-bottom: 1px solid var(--wb--color--light-grey);
        padding: 1.25rem 1.5rem;
        .wb-service-filter {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            align-items: center;
            justify-content: center;

            h5 {
                margin-bottom: 0;
            }

            select {
                appearance: none;
                border: 0;
                text-transform: none !important;
                background-image: url('data:image/svg+xml,<svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.73405 0.741667L5.50072 3.975L2.26738 0.741667C1.94238 0.416667 1.41738 0.416667 1.09238 0.741667C0.767383 1.06667 0.767383 1.59167 1.09238 1.91667L4.91738 5.74167C5.24238 6.06667 5.76738 6.06667 6.09238 5.74167L9.91738 1.91667C10.2424 1.59167 10.2424 1.06667 9.91738 0.741667C9.59238 0.425001 9.05905 0.416667 8.73405 0.741667V0.741667Z" fill="%233232CD"/></svg>');
                background-repeat: no-repeat;
                background-position: right 1rem center;
                padding-right: 2rem;
                color: var(--wb--color--primary) !important;
            }

            input[type="text"] {
                border-radius: 0.75rem;
                padding: 1rem 1.5rem;
                border: 1px solid var(--wb--color--light-grey);
                min-width: 220px;
                font-weight: 600;
            }
        }
    }

    .document-card {
        display: flex;
        background-color: var(--wb--color--white);
        padding: 1.5rem;
        border-radius: 1rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        height: 100%;
        gap: 2rem;
        flex-direction: column;

        .document-card--image {
            flex-shrink: 0;
            width: 165px;
            .document-card--image--container {
                position: relative;
                overflow: hidden;
                border-radius: 1rem;
                padding-top: 100%;
                display: block;
                background: var( --wb--color--secondary);
                background: linear-gradient(45deg,var( --wb--color--primary) 40%, var( --wb--color--secondary) 100%);
                img {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    inset: 0;
                }
            }
        }

        .document-card--btn {
            flex-shrink: 0;
            display: flex;
        }

        .document-card--categories {
            display: flex;
            flex-wrap: wrap;
            gap: 0.25rem;

            a {
                text-decoration: none;
                font-weight: 600;
                text-transform: uppercase;
                font-size: 0.75rem;
                color: var(--wb--color--heading);
                background-color: var(--wb--color--light-grey);
                transition: all .4s cubic-bezier(.4,0,.2,1), color .4s cubic-bezier(.4,0,.2,1);
                padding: 3px 9px;
                border-radius: 24px;
            }

            a:hover {
                color: var(--wb--color--white);
                background-color: var(--wb--color--primary);
            }
        }

        h3 {
            a {
                text-decoration: none;
            }
        }

        .document-card--excerpt {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .document-card--date {
            color: var(--wb--color--grey);
            font-weight: 600;
            display: flex;
            gap: 1rem;
            align-items: center;
            text-transform: uppercase;
            flex-wrap: wrap;
            margin-bottom: 1rem;
            p {
                margin-bottom: 0;
            }
        }
    }

    .post-pagination {
        background-color: var(--wb--color--white);
        padding: 1.5rem;
        border-radius: 1rem;
        display: flex;
        justify-content: center
        align-items: center;
        margin-top: 4rem;
        gap: 0.25rem;
        flex-wrap: wrap;

        .page-numbers {
            font-weight: 600;
            font-size: 0.75rem;
            color: var(--wb--color--primary);
            padding: 0 1rem;
        }

        .page-numbers.current {
            opacity: .5;
            pointer-events:none;
        }
    }
}

@media screen and (min-width: 768px) {
    .wb-documents-list {

        .document-card {
            flex-direction: row;


            .document-card--btn {
                flex-direction: column;
                justify-content: center;
            }

        }


    }

}