@layer addon {
    .templateBlocks {
        &.image {
            padding: 0;
            @media (max-width: 56em) {
                padding-bottom: var(--section);
            }
            @media (--max-fablet) {
                padding-bottom: var(--section);
            }
            .container {
                grid-column: full-start / full-end;
                .splide {
                    max-width: 100vw;
                }
                .block {
                    position: relative;
                    background-color: transparent;
                    border-radius: 0;
                    .media {
                        border-radius: 256px 256px 0px 256px;
                        @media (min-width: 56em) {
                            width: calc(100% / 12 * 8);
                            min-height: 550px;
                        }
                        @media (--min-fablet) {
                            width: calc(100% / 12 * 8);
                            min-height: 550px;
                        }
                        img {
                            height: 100%;
                        }
                    }
                    .inner {
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        right: 0;
                        margin: auto;
                        height: fit-content;
                        z-index: 1;
                        background: var(--color2);
                        padding: var(--padding);
                        @media (min-width: 56em) {
                            width: calc(100% / 12 * 5);
                            border-radius: var(--large-border-radius) var(--large-border-radius) var(--large-border-radius) 0;
                        }
                        @media (--min-fablet) {
                            width: calc(100% / 12 * 5);
                            border-radius: var(--large-border-radius) var(--large-border-radius) var(--large-border-radius) 0;
                        }
                        .intro {
                            display: flex;
                            flex-direction: column;
                            gap: calc(var(--gutter) / 2);
                            .title {
                                font-size: calc(var(--m-fontsize) - 0.5rem);
                                line-height: 1;
                                order: 2;
                            }
                            .subTitle {
                                font-family: var(--font-basic);
                                font-size: calc(var(--s-fontsize) - 0.25rem);
                                font-weight: 600;
                                color: var(--color1);
                                order: 1;
                                margin: 0;
                            }
                        }
                    }
                    @media (max-width: 56em) {
                        display: flex;
                        flex-direction: column;
                        .media {
                            min-height: 325px;
                            width: 100%;
                        }
                        .inner {
                            position: relative;
                            right: auto;
                            width: 80%;
                            margin: 0 auto;
                            margin-top: calc(var(--min-padding) * 2);
                            z-index: 1;
                            border-radius: var(--border-radius) 0 var(--border-radius) var(--border-radius);
                        }
                    }
                    @media (--max-fablet) {
                        display: flex;
                        flex-direction: column;
                        .media {
                            min-height: 325px;
                            width: 100%;
                        }
                        .inner {
                            position: relative;
                            right: auto;
                            width: 80%;
                            margin: 0 auto;
                            margin-top: calc(var(--min-padding) * 2);
                            z-index: 1;
                            border-radius: var(--border-radius) 0 var(--border-radius) var(--border-radius);
                        }
                    }
                }
            }
        }
        &.content {
            overflow: visible;
            > .container {
                overflow: visible;
                > .inner {
                    overflow: visible;
                    gap: var(--padding);
                }
            }
        }
        .splide[data-splide-state="mobile"], .splide[data-splide-state="disabled"] {
            overflow: visible;
            .splide__track {
                overflow: visible;
            }
            .splide__list {
                flex-direction: column;
                align-items: center;
                counter-reset: card;
                .item {
                    /* position: sticky and top set by JS */
                    counter-increment: card;
                    &:nth-child(odd) {
                        .block { background: #D0FBFF; }
                    }
                    .block {
                        background: #fff;
                        transform-origin: top center; /* for JS scale animation */
                        @media (max-width: 56em) {
                            border-radius: var(--small-border-radius) var(--small-border-radius) 0 var(--small-border-radius);
                        }
                        @media (--max-fablet) {
                            border-radius: var(--small-border-radius) var(--small-border-radius) 0 var(--small-border-radius);
                        }
                        .inner {
                            gap: var(--padding);
                            align-items: center;
                            @media (min-width: 56em) {
                                flex-direction: row;
                            }
                            @media (--min-fablet) {
                                flex-direction: row;
                            }
                            &:before {
                                content: counter(card, decimal-leading-zero);
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: 164px; height: 164px;
                                min-width: 164px; min-height: 164px;
                                border-radius: var(--large-border-radius) var(--large-border-radius) 0 var(--large-border-radius);
                                background: #3939FF;
                                color: var(--color2);
                                font-size: var(--l-fontsize);
                                font-weight: 700;
                                font-family: var(--font-sub);
                                @media (max-width: 56em) {
                                    width: 96px; height: 96px;
                                    min-width: 96px; min-height: 96px;
                                }
                                @media (--max-fablet) {
                                    width: 96px; height: 96px;
                                    min-width: 96px; min-height: 96px;
                                }
                            }
                        }
                    }
                    @media (min-width: 56em) {
                        .slides-1 &, .slides-2 &, .slides-3 &, .slides-4 & {
                            width: calc(100% / 12 * 10);
                        }
                    }
                    @media (--min-fablet) {
                        .slides-1 &, .slides-2 &, .slides-3 &, .slides-4 & {
                            width: calc(100% / 12 * 10);
                        }
                    }
                }
            }
        }
    }
}