@layer addon {
    .collectionFaq {
        .grid {
            gap: 8px;
        }
        .item {
            details {
                background-color: transparent;
                border: 1px solid var(--color-light);
                border-radius: 8px;
                transition: var(--transition);
                summary {
                    font-size: var(--s-fontsize);
                    font-weight: 500;
                    padding: var(--gutter) var(--gutter) var(--gutter) var(--padding);
                    align-items: center;
                    .icon {
                        color: currentColor;
                        width: 16px;
                        min-width: 16px;
                        height: 16px;

                    }
                }
                article {
                    .block {
                        background-color: transparent;
                    }
                }
                .inner {
                    display: flex;
                    color: var(--color-dark);
                    padding: 0 var(--padding) var(--gutter) var(--padding);
                }
                &[open] {
                    background-color: var(--color-light);
                    color: var(--color-dark);
                    .content {
                        color: var(--color-dark);
                    }
                }
                .themeColor1 & {
                    border-color: var(--color-dark);
                    &[open] {
                        border: 0;
                        background: var(--gradient);
                        border-color: var(--color-light);
                        color: var(--color-light);
                        .icon {
                            color: var(--color-light);
                        }
                        .content {
                            color: var(--color-light)
                        }
                    }
                }
            }
        }

        .inner {
            grid-template-rows: auto 1fr;
            .intro {
                grid-row: 1;
                align-content: start;
            }
            .grid {
                grid-row: 1 / span 2;
            }
            .buttons {
                align-content: start;
                grid-column: 1 / span 5;
                grid-row: 2;
            }
        }
    }
}