@layer addon {
    .templateBlocks {
        .item {
            .intro {
                width: 100%;
                .title {
                    font-size: var(--m-fontsize);
                    line-height: var(--m-lineheight);
                }
                .subTitle {
                    font-size: var(--s-fontsize);
                    line-height: var(--s-lineheight);
                }
                .subTitle + .content {
                    margin-top: calc(var(--gutter) / 2);
                }
                .content {
                    font-size: var(--xs-fontsize);
                    line-height: 1.3;
                }
            }
        }
        .splide__list {
            @media (min-width: 56em) {
                .item {
                    .image & {
                        .slides-8 & {
                            width: calc(50% - var(--gutter))!important;
                            .block {
                                flex-direction: row;
                                align-items: center;
                                padding: var(--padding);
                                gap: var(--gutter);
                                .media {
                                    min-width: 150px;
                                    max-width: 150px;
                                    order: 2;
                                    border-radius: var(--border-radius);
                                }
                                .inner {
                                    padding: 0;
                                }
                            }
                        }
                    }
                }
                .content & {
                    &.slides-4 {
                        flex-wrap: wrap;
                        row-gap: var(--gutter);
                        .item {
                            width: calc(50% - var(--gutter))!important;
                        }
                    }
                }
            }
            @media (--min-fablet) {
                .item {
                    .image & {
                        .slides-8 & {
                            width: calc(50% - var(--gutter))!important;
                            .block {
                                flex-direction: row;
                                align-items: center;
                                padding: var(--padding);
                                gap: var(--gutter);
                                .media {
                                    min-width: 150px;
                                    max-width: 150px;
                                    order: 2;
                                    border-radius: var(--border-radius);
                                }
                                .inner {
                                    padding: 0;
                                }
                            }
                        }
                    }
                }
                .content & {
                    &.slides-4 {
                        flex-wrap: wrap;
                        row-gap: var(--gutter);
                        .item {
                            width: calc(50% - var(--gutter))!important;
                        }
                    }
                }
            }

        }
    }    
}