.flex-layout.faq_archive {
    background-color: var(--cbw-white-100);
    padding-block: var(--pk-row-spacing);
    margin-block: 0;
}

.flex-layout.faq_archive .pk-grid-container {
    row-gap: 3rem;
}

.flex-layout.faq_archive .filter-col {
    border-radius: var(--border-radius-medium);
    outline: 1px solid var(--cbw-deep-pine-10);
    outline-offset: -1px;
    padding: max(1rem, calc(2 * var(--su)));
    display: flex;
    flex-direction: column;
    gap: max(.75rem, calc(1 * var(--su)));
    height: fit-content;
}

/* Filter links */

.flex-layout.faq_archive .filter-col hr {
    margin: 0;
    height: 1px;
    border: none;
    background-color: var(--cbw-deep-pine-10);
}

.flex-layout.faq_archive .filter-col .filter-link {
    position: relative;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--cbw-deep-pine-40);
    font-weight: 500;
}

.flex-layout.faq_archive .filter-col .filter-link::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: max(1.5rem, calc(2 * var(--su)));
    height: auto;
    aspect-ratio: 1;
    background-color: var(--cbw-pumpkin-100);
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.23083 7.53833L5.52817 6.81533L8.07433 4.26917L0 4.26917L0 3.26917L8.07433 3.26917L5.52817 0.723L6.23083 0L10 3.76917L6.23083 7.53833Z' fill='white'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;
    border-radius: 50%;
    flex-shrink: 0;
    transform: translate(0%, -50%);
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.flex-layout.faq_archive .filter-col .filter-link.active {
    font-weight: 500;
    color: var(--cbw-deep-pine-100);
}

.flex-layout.faq_archive .filter-col .filter-link .title {
    font-size: var(--scaling-body-m-medium);
    font-weight: 500;
    max-width: 80%;
}

.flex-layout.faq_archive .results-col {
    padding: max(2rem, calc(2 * var(--su))) max(1.5rem, calc(2 * var(--su)));
    position: relative;
    border-radius: var(--border-radius-medium);
    overflow: hidden;
}

.flex-layout.faq_archive .results-col:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--cbw-sky);
    border-radius: var(--overlay-radius);
    z-index: 0;
}

.flex-layout.faq_archive .results-col > div {
    position: relative;
    z-index: 1;
}

.flex-layout.faq_archive .term-panel[hidden] {
    display: none;
}

.flex-layout.faq_archive .term-title {
    margin-top: 0;
    margin-bottom: max(1.5rem, calc(1.5 * var(--su)));
    font-size: var(--scaling-h4) !important;
}

.flex-layout.faq_archive .term-panel .cbw-info-content * {
    font-size: var(--scaling-body-xs-medium);
}

@media screen and (max-width: 992px) {

}

@media screen and (max-width: 767px) {

    .flex-layout.faq_archive .filter-col .filter-link .title {
        font-size: var(--scaling-body-xs-medium);
    }

    .flex-layout.faq_archive .filter-col, .flex-layout.faq_archive .results-col {
        border-radius: var(--border-radius-small);
    }

    .flex-layout.faq_archive .results-col {
        padding: max(2rem, calc(2 * var(--su))) 0px;
        position: relative;
        overflow: visible;
    }

    .flex-layout.faq_archive .results-col:before {
        left: calc(var(--pk-site-gutter) * -1);
        width: 100vw;
        border-radius: 1.5rem;
    }

    .flex-layout.faq_archive .term-title {
        text-align: center;
    }
    
}