:where(.component-accordion) {
    container-type: inline-size;
    container-name: accordion-container;

    :where(& > .component-wrapper) {
        :where(& > .region) {
            container-type: unset !important;
            container-name: unset !important;

            :where(& > .content-wrap) {
                :where(.accordion-items) {
                    :where(& > .accordion-column) {
                        container-type: inline-size;
                        container-name: accordion-column-container;
                    }
                }
            }
        }
    }
}

:where(.component-accordion) {
    :where(& > .component-wrapper) {
        --accordion-icon-width: 1.8rem;

        :where(& > .region) {
            :where(& > .content-wrap) {

                :where(.accordion-summary) {
                    background-color: var(--local-accordion-color);
                    margin-bottom: var(--size-small);
                }

                :where(.accordion-items) {
                    display: grid;
                    column-gap: 5rem;
                    margin-block-start: var(--size-small);
                    max-width: 100%;
                    margin-inline: auto;

                    :where(.accordion-column) {
                        :where(.single-accordion-item) {
                            :where(.copy) {
                                margin-bottom: 3.6rem;
                            }
                        }
                    }

                    :where(&[data-columns-count="1"]) {
                        grid-template-columns: 1fr;
                    }

                    :where(&[data-columns-count="2"]) {
                        grid-template-columns: 1fr 1px 1fr;
                    }

                    :where(& > .line) {
                        height: 100%;
                    }

                    :where(& > .accordion-column > .single-accordion-item:not(:last-of-type)) {
                        /*border-bottom: 1px solid var(--color-brand-black-100);*/
                    }
                }
            }
        }
    }
}

@container accordion-container (  inline-size < calc(144rem + 4rem + 4rem)) {
    :where(.component-accordion:not(.documentation-example)) {
        :where(& > .component-wrapper) {
            :where(& > .region) {
                max-width: 100%;
                padding-inline: var(--size-medium);
            }
        }
    }

    .component-accordion :where(.accordion-items) {
        column-gap: var(--size-small);
    }
}

@container accordion-container (  inline-size < 80rem) {
    .component-accordion :where(.accordion-items) {
        column-gap: var(--size-small);
    }
}

@container accordion-container (  inline-size < 80rem) {
    .component-accordion :where(.accordion-items) {
        :where(.accordion-items[data-columns-count="2"]) {
            grid-template-columns: 1fr;
        }

        :where(.accordion-column:first-of-type .single-accordion-item:last-of-type) {
            /*border-bottom: 1px solid var(--color-brand-black-100);*/
        }

        :where(.accordion-items .line) {
            display: none;
        }
    }

    .component-accordion {
        :where(.component-wrapper) {
            :where(.region) {
                :where(.content-wrap) {
                    :where(.accordion-items) {
                        :where(&[data-columns-count="2"]) {
                            grid-template-columns: 1fr;
                        }
                    }
                }
            }
        }
    }
}