@layer addon {

    .templateCollection.collectionPage {
        @media (min-width: 56em) {
            padding: 0;
        }
        @media (--min-fablet) {
            padding: 0;
        }

        .container {
            grid-column: full-start / full-end;
            .grid {
                gap: 0;
            }
            details {
                background-color: transparent;
                .header {display:none}
                summary {
                    opacity: .5;
                    padding: 0;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    width: 100%;
                    @media (max-width: 56em) {
                        padding: 0 var(--spacer);
                    }
                    @media (--max-fablet) {
                        padding: 0 var(--spacer);
                    }
                    .subTitle {
                        display: flex;
                        flex-grow: 1;
                        flex-direction: row;
                        align-items: center;
                        font-weight: 400;
                        .icon {
                            opacity: 0;
                            width: 0;
                            margin-right: 0;
                            @media (max-width: 56em) {
                                height: 24px;
                            }
                            @media (--max-fablet) {
                                height: 24px;
                            }
                        }
                    }
                    @media (min-width: 56em) {
                        .subTitle + .icon {
                            display: none;
                        }
                    }
                    @media (--min-fablet) {
                        .subTitle + .icon {
                            display: none;
                        }
                    }                    

                    .icon {
                        color: var(--color-light);
                        transition: var(--transition);
                        width: 32px;
                        height: 32px;
                    }
                }

                &[open] {
                    summary {
                        opacity: 1;
                        .subTitle {
                            .icon {
                                opacity: 1;
                                width: 32px;
                                margin-right: calc(var(--padding) / 2);
                                @media (max-width: 56em) {
                                    margin-right: calc(var(--gutter) / 3);
                                    width: 24px;
                                }
                                @media (--max-fablet) {
                                    margin-right: calc(var(--gutter) / 3);
                                    width: 24px;
                                }
                            }
                        }
                        @media (max-width: 56em) {
                            margin-bottom: calc(var(--gutter) / 2);
                        }
                        @media (--max-fablet) {
                            margin-bottom: calc(var(--gutter) / 2);
                        }
                    }
                }
            }

            .items > details:nth-child(1) summary .subTitle .icon {
                color: var(--color1);
            }
            .items > details:nth-child(2) summary .subTitle .icon {
                color: #86BC25;
            }
            .items > details:nth-child(3) summary .subTitle .icon {
                color: #26890D;
            }
            .items > details:nth-child(4) summary .subTitle .icon {
                color: var(--color3);
            }
            .items > details:nth-child(5) summary .subTitle .icon {
                color: #1C3D26;
            }

            .block {
                align-items: center;
                @media (min-width: 56em) {
                    padding: calc(var(--padding) * 2.5) var(--section);
                    gap: calc(var(--padding) * 2);
                    .media {
                        width: 320px;
                        height: 320px;
                        min-width: 320px;
                        min-height: 320px;
                        margin-right: auto;
                        margin-left: auto;
                    }
                }
                @media (--min-fablet) {
                    padding: calc(var(--padding) * 2.5) var(--section);
                    gap: calc(var(--padding) * 2);
                    .media {
                        width: 320px;
                        height: 320px;
                        min-width: 320px;
                        min-height: 320px;
                        margin-right: auto;
                        margin-left: auto;
                    }
                }
            }

            .pageTitle {
                @media (min-width: 56em) {
                    grid-column: span 6;
                }
                @media (--min-fablet) {
                    grid-column: span 6;
                }
            }
            .pageContent {
                @media (min-width: 56em) {
                    grid-column: 7 / span 6;
                }
                @media (--min-fablet) {
                    grid-column: 7 / span 6;
                }
            }
    
            .pageTitle, .items {
                display: flex;
                flex-direction: column;
            }
    
            .pageTitle {
                background-color: var(--color-dark);
                color: var(--color-light);
                padding: var(--section) var(--spacer);
                gap: calc(var(--padding) * 3);
                .items {
                    gap: calc(var(--gutter) * 2);
                }
                @media (max-width: 56em) {
                    padding: 0;
                    gap: var(--padding);
                    .intro {
                        padding: 0 var(--spacer);
                    }
                    .items {
                        gap: calc(var(--padding) / 2);
                        .subTitle {
                            font-size: calc(var(--fontsize) + .125rem);
                        }
                    }
                }
                @media (--max-fablet) {
                    padding: 0;
                    gap: var(--padding);
                    .intro {
                        padding: 0 var(--spacer);
                    }
                    .items {
                        gap: calc(var(--padding) / 2);
                        .subTitle {
                            font-size: calc(var(--fontsize) + .125rem);
                        }
                    }
                }
            }


            .pageContent {
                .title {
                    font-weight: 400;
                }
            }

            .pageContent > *:nth-child(1),
            .pageTitle .items > *:nth-child(1) .item {
                background-color: var(--color1);
            }
            .pageContent > *:nth-child(2),
            .pageTitle .items > *:nth-child(2) .item {
                background-color: #86BC25;
            }
            .pageContent > *:nth-child(3),
            .pageTitle .items > *:nth-child(3) .item {
                background-color: #26890D;
            }
            .pageContent > *:nth-child(4),
            .pageTitle .items > *:nth-child(4) .item {
                background-color: var(--color3);
            }
            .pageContent > *:nth-child(5),
            .pageTitle .items > *:nth-child(5) .item {
                background-color: #1C3D26;
            }

            .pageContent > *:nth-child(1),
            .pageTitle .items > *:nth-child(1) .item,
            .pageContent > *:nth-child(2),
            .pageTitle .items > *:nth-child(2) .item {
                .header {
                    .title {
                        color: var(--color-dark);    
                    }
                }
                .content, .button {
                    color: var(--color-dark);
                }
                .button {
                    border-color: var(--color-dark);
                }
            }
        }
        @media (min-width: 56em) {
            .pageTitle {
                position: sticky;
                top: 0;
                height: 100vh;
            }
            .pageContent .item {
                position: sticky;
                top: 0;
                min-height: 100vh;
                .inner {
                    flex-grow: 0;
                }
            }
        }
        @media (--min-fablet) {
            .pageTitle {
                position: sticky;
                top: 0;
                height: 100vh;
            }
            .pageContent .item {
                position: sticky;
                top: 0;
                min-height: 100vh;
                .inner {
                    flex-grow: 0;
                }
            }
        }

    }
}