@layer addon {
    section {
        &.templateCollection {
            &.collectionOccupation {
                &.themeColor1 {
                    .block {
                        background-color: transparent;
                    }
                }

                .intro {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    width: calc(100% / 12 * 10);
                    margin: 0 auto;
                    @media (max-width: 56em) {
                        width: 100%;
                    }
                    @media (--max-fablet) {
                        width: 100%;
                    }
                    .content {
                        @media (min-width: 56em) {
                            width: 75%;
                        }
                        @media (--min-fablet) {
                            width: 75%;
                        }
                        @media (max-width: 56em) {
                            padding: 0 var(--padding);
                        }
                        @media (--max-fablet) {
                            padding: 0 var(--padding);
                        }
                    }
                }

                .grid {
                    width: 100%;
                    gap: 0;
                    .item {
                        grid-column: span 12;
                        border-top: 1px solid var(--color-light);
                        &:last-of-type {
                            border-bottom: 1px solid var(--color-light);
                        }

                        details {
                            background-color: transparent;
                            summary {
                                align-items: center;
                                padding: calc(var(--padding) / 2) 0;
                                @media (max-width: 56em) {
                                    padding: var(--padding) 0;
                                    font-size: var(--s-fontsize);
                                }
                                @media (--max-fablet) {
                                    padding: var(--padding) 0;
                                    font-size: var(--s-fontsize);
                                }
                                .icon {
                                    background: var(--color2);
                                    border-radius: 100%;
                                    width: 32px;
                                    height: 32px;
                                    padding: 10px 8px 8px;
                                    color: var(--color1);
                                    transition: var(--transition);
                                }
                            }
                            &[open] {
                                background: none;
                            }
                            .block {
                                margin-bottom: var(--padding);
                                gap: calc(var(--gutter) * 2);
                                @media (min-width: 56em) {
                                    flex-direction: row;
                                }
                                @media (--min-fablet) {
                                    flex-direction: row;
                                }
                                                                
                                .media {
                                    @media (min-width: 56em) {
                                        width: 50%;
                                    }
                                    @media (--min-fablet) {
                                        width: 50%;
                                    }
                                    order: 2;
                                    img {
                                        aspect-ratio: 16 / 9;
                                        border-radius: var(--border-radius);
                                    }
                                }
                                .inner {
                                    @media (min-width: 56em) {
                                        width: 50%;
                                    }
                                    @media (--min-fablet) {
                                        width: 50%;
                                    }
                                    padding: 0;
                                    order: 1;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}