.faq-aside {
    --pl-faq-aside-gap: var(--bs-gap-large, 3rem);
    --pl-faq-aside-columns: minmax(0, 1fr) minmax(0, 2fr);
    --pl-faq-aside-intro-position: sticky;
    --pl-faq-aside-sticky-top: 2rem;
    --pl-faq-aside-text-max-width: 32rem;
    --pl-faq-aside-index-color: inherit;
    --pl-faq-aside-index-opacity: 0.55;
    --pl-faq-aside-index-font-family: inherit;
    --pl-faq-aside-index-font-size: 0.875em;
    --pl-faq-aside-index-font-weight: inherit;
    --pl-faq-aside-index-min-width: 2.25em;
    --pl-faq-aside-index-gap: 0.5em;
    container-type: inline-size;
}

.faq-aside-grid {
    display: grid;
    gap: var(--pl-faq-aside-gap);
}

.faq-aside-intro-inner > .frame-header:last-child {
    margin-bottom: 0;
}

.faq-aside-text {
    max-width: var(--pl-faq-aside-text-max-width);
}

.faq-aside-text > :last-child {
    margin-bottom: 0;
}

.faq-aside-index {
    flex: 0 0 auto;
    min-width: var(--pl-faq-aside-index-min-width);
    margin-inline-end: var(--pl-faq-aside-index-gap);
    color: var(--pl-faq-aside-index-color);
    opacity: var(--pl-faq-aside-index-opacity);
    font-family: var(--pl-faq-aside-index-font-family);
    font-size: var(--pl-faq-aside-index-font-size);
    font-weight: var(--pl-faq-aside-index-font-weight);
    font-variant-numeric: tabular-nums;
}

@container (min-width: 48rem) {
    .faq-aside-grid:has(> .faq-aside-intro) {
        grid-template-columns: var(--pl-faq-aside-columns);
    }
}

@container (min-width: 62rem) {
    .faq-aside-intro-inner {
        position: var(--pl-faq-aside-intro-position);
        top: var(--pl-faq-aside-sticky-top);
    }
}