@layer addon {

    .templateBlocks {
        &.image, &.content {
            .block {
                background-color: transparent;
                border-radius: 0;
                .inner {
                    padding: 0;
                    justify-content: center;
                    .subTitle + .content {
                        margin-top: var(--gutter);
                    }
                    .title:has(em) {
                        display: flex;
                        align-items: center;
                        @media (min-width: 56em) {
                            justify-content: space-between;
                        }
                        @media (--min-fablet) {
                            justify-content: space-between;
                        }
                        em {
                            padding: 0 var(--gutter);
                            font-size: var(--xl-fontsize);
                        }
                    }
                }
            }
            @media (max-width: 56em) {
                .splide__list {
                    row-gap: calc(var(--gutter) * 2);
                }
            }
            @media (--max-fablet) {
                .splide__list {
                    row-gap: calc(var(--gutter) * 2);
                }
            }
        }
        &.image {
            .splide__list {
                width: calc(100% / 12 * 11);
            }
            .block {
                @media (min-width: 56em) {
                    flex-direction: row;
                    gap: calc(var(--section)/2);
                    align-items: center;
                    .inner {
                        width: calc(100% / 12 * 5 - var(--gutter));
                    }
                    .media {
                        width: calc(100% / 12 * 5);
                        &:has(img[src$=".jpg"]) {
                            overflow: visible;
                            left: var(--gutter);
                        }
                        img[src$=".jpg"] {
                            rotate: 4deg;
                            scale: 0.95;
                            border-radius: var(--border-radius);
                        }
                    }
                }
                @media (--min-fablet) {
                    flex-direction: row;
                    gap: calc(var(--section)/2);
                    align-items: center;
                    .inner {
                        width: calc(100% / 12 * 5 - var(--gutter));
                    }
                    .media {
                        width: calc(100% / 12 * 5);
                        &:has(img[src$=".jpg"]) {
                            overflow: visible;
                            left: var(--gutter);
                        }
                        img[src$=".jpg"] {
                            rotate: 4deg;
                            scale: 0.95;
                            border-radius: var(--border-radius);
                        }
                    }
                }
            }
        }
    }

}