@layer addon {
    .templateCollection.collectionFaq {
        .container {
            background-color: inherit;
            grid-column: full-start / full-end;
        }
        .inner {
            background-color: inherit;
            grid-column: 1 / span 12;
            .intro, .buttons {
                margin: 0 var(--spacer);
            }
        }
        .grid {
            background-color: inherit;
            position: relative;
            
            .media {
                background-color: inherit;
                order: 2;
                grid-column: span 6;

                &:before,
                &:after {
                    content: '';
                    position: absolute;
                    z-index: 8;
                    background-color: inherit;
                    width: 80px;
                    height: 80px;
                }

                &:before {
                    top: 80px;
                    right: 0px;
                }
                &:after {
                    top: 0;
                    right: 80px;
                }
                @media (max-width: 56em) {
                    &:before,
                    &:after {
                        width: 48px;
                        height: 48px;
                    }
                    &:before {
                        top: 48px;
                    }
                    &:after {
                        right: 48px;
                    }
                }
                @media (--max-fablet) {
                    &:before,
                    &:after {
                        width: 48px;
                        height: 48px;
                    }
                    &:before {
                        top: 48px;
                    }
                    &:after {
                        right: 48px;
                    }
                }
                
                .faq-image { 
                    opacity: 0;
                    transition: var(--transition);
                    @media (min-width: 56em) {
                        display: block;
                        height: 100%;
                        position: absolute;
                        width: 100%;
                    }
                    @media (--min-fablet) {
                        display: block;
                        height: 100%;
                        position: absolute;
                        width: 100%;
                    }

                    @media (max-width: 56em) {
                        display: none;
                    }

                    @media (--max-fablet) {
                        display: none;
                    }                    
                    &.active {
                        opacity: 1;
                        @media (max-width: 56em) {
                            display: block;
                        }
                        @media (--max-fablet) {
                            display: block;
                        }
                    }
                } 
            }
            .inner {
                gap: 0;
                order: 1;
                grid-column: span 6;
                .item {
                    border-bottom: 1px solid var(--color-dark);
                    &:first-of-type {
                        border-top: 1px solid var(--color-dark);
                    }
                    &:last-of-type {
                        @media (max-width: 56em) {
                            border-bottom: 0;
                        }
                        @media (--max-fablet) {
                            border-bottom: 0;
                        }
                    }
                    details {
                        background-color: initial;
                        &[open] {
                            background: none;
                            .icon {
                                transform: rotate(180deg);
                            }
                        }
                        summary {
                            padding: var(--padding);
                            padding-left: var(--spacer);
                            align-items: center;
                            gap: calc( var(--gutter) / 2);

                            &:after {display: none;}
                            .icon {
                                width: 20px;
                            }
                        }
                        article {
                            padding-bottom: var(--padding);
                            .inner {
                                padding-bottom: 0;
                                padding-left: var(--spacer);
                                @media (max-width: 56em) {
                                    padding-right: var(--spacer);
                                }
                                @media (--max-fablet) {
                                    padding-right: var(--spacer);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}