@layer addon {
    
    .templateCollection.collectionFaq {
        .inner {
            gap: var(--padding);
            @media (min-width: 56em){
                grid-column: 3 / span 8;
                .title {
                    font-size: calc(var(--l-fontsize) - 1rem);
                }
                .intro {
                    width: 100%;
                }
            }
            @media (--min-fablet){
                grid-column: 3 / span 8;
                .title {
                    font-size: calc(var(--l-fontsize) - 1rem);
                }
                .intro {
                    width: 100%;
                }
            }
            .grid {
                padding: calc(var(--padding) * 2);
                @media (max-width: 56em) {
                    padding: var(--padding);
                }
                @media (--max-fablet) {
                    padding: var(--padding);
                }
                .themeColor5 &,
                .themeColor6 & {
                    border-radius: var(--border-radius);
                }
                .themeColor5 & {
                    background-color: var(--color-light);
                }
                .themeColor6 & {
                    background-color: var(--color3);
                }
            }
        }
    }
}