@layer addon {
    .templateCollection.collectionArticle {
        .container {
            @media (max-width: 56em) {
                grid-column: full-start / full-end;
            }
            @media (--max-fablet) {
                grid-column: full-start / full-end;
            }
            .inner {
                
            }
            .inner:has(.intro) {
                flex-wrap: wrap;
                align-items: flex-end;
                flex-direction: row;
                
                .intro {
                    flex: 1;
                    @media (min-width: 56em) {
                        order: 1;
                    }
                    @media (--min-fablet) {
                        order: 1;
                    }
                    @media (max-width: 56em) {
                        max-width: 100vw;
                        padding: 0 var(--spacer);
                    }
                    @media (--max-fablet) {
                        max-width: 100vw;
                        padding: 0 var(--spacer);
                    }
                }
                .grid {
                    @media (min-width: 56em) {
                        order: 3;
                    }
                    @media (--min-fablet) {
                        order: 3;
                    }
                }
                .buttons {
                    @media (min-width: 56em) {
                        order: 2;
                    }
                    @media (--min-fablet) {
                        order: 2;
                    }
                    @media (max-width: 56em) {
                        padding: 0 var(--spacer);
                    }
                    @media (--max-fablet) {
                        padding: 0 var(--spacer);
                    }
                }
            }
            .splide {
                margin-left: var(--min-gutter);
                margin-right: var(--min-gutter);
                max-width: calc(100vw + var(--gutter) + var(--gutter) - var(--spacer) - var(--spacer));
                @media (max-width: 56em){
                    margin-left: initial;
                    margin-right: initial;
                    max-width: 100vw;
                }
                @media (--max-fablet){
                    margin-left: initial;
                    margin-right: initial;
                    max-width: 100vw;
                }
            }
        }
    }
}