:root {
    --color-brand-neutral-cool-grey: #747678;
}

.multi-select-filters-container {
    background-color: var(--color-brand-accent-sand,#f5f0e6);
    padding: .5rem 1rem 1rem 1rem;
    container: filters/inline-size;

    h2 {
        color: var(--color-brand-core-navy,#182B49);
    }

    & .multi-select-filter-bar {
        display: flex;
        gap: 1rem;
        & .multi-select-filter-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            max-height: fit-content;
            position: relative;
            >span {
                display: inline-block;
                margin-block-end: .5rem;
            }
            &:has( label input[type="checkbox"]:checked) .multi-select-filter-btn{
                background-color: var(--color-brand-neutral-cool-grey, #747678);
                color: #fff;
            }
            & .multi-select-filter-btn{
                background-color: #fff;
                flex: 1;
                display: flex;
                align-items: center;
                position: relative;
                border-radius: var(--corner-radius-brand, 8px);
                padding: 6px 12px;
                border: var(--brand-border) var(--color-brand-neutral-cool-grey, #747678);

                svg {
                    margin-inline-start: auto;
                }
                &:hover{
                    background-color: var(--color-brand-core-blue, #00629B);
                    color: #fff;
                }
                &[aria-pressed="true"]{
                    svg {
                        transform: rotate(180deg);
                    }
                }

            }
            & .filter-options-container {
                background-color: var(--color-brand-accent-sand,#f5f0e6);
                border: solid var(--color-brand-neutral-cool-grey, #747678) 1.5px;
                border-radius: var(--corner-radius-brand, 8px);
                top: 100%;
                position: absolute;
                padding: .5rem;
                z-index: 5;
                display: none;
                white-space: nowrap;
                & label{display:block;}
                &.active{display:initial;}
                &.handle-overflow{
                    max-height: 200px;
                    overflow-y: scroll;
                    scrollbar-width: thin;
                }
                &.handle-overflow::-webkit-scrollbar{
                    width: 10px;
                }
            }
        }
    }
}
    #results-list {
        #results-list-items {
            padding: 0;
            &.layout-hidden{
                display: none;
            }
        }

        & li {
            list-style: none !important;

            .card__body__content {
                padding: 1rem 1.5rem 0 1.5rem;
            }
        }

        .card--result img {
            max-width: 300px !important;
            height: 100% !important;
            object-fit: cover;
        }

        .card__tool-bar {
            a {
                margin-inline-end: .5rem;
            }
        }
    }

    @media (width <=675px) {
        article.card--full-width:has(.card--full-width__body--img) {
            margin-inline: auto;
            width: clamp(350px, 87vw, 500px);
        }

        .card--full-width__body--img {
            flex-direction: column;

            .card__tool-bar {
                margin-block-end: 1rem;
            }
        }

        #results-list .card--result img {
            max-width: revert !important;
            width: 100%;
        }
    }

    @container filters (width <=670px) {
        .multi-select-filter-bar {
            flex-direction: column;
        }
    }