@layer addon {

    .templateHighlight {
        margin: calc(var(--section) / 2) var(--spacer);
        padding: var(--gutter) 0 calc(var(--section) / 2) 0;
        border-radius: var(--border-radius);
        .container {
            @media (min-width: 56em) {
                grid-column: full-start / full-end;
                &:has(.media) {
                    gap: calc(var(--gutter) * 2);
                }
            }
            @media (--min-fablet) {
                grid-column: full-start / full-end;
                &:has(.media) {
                    gap: calc(var(--gutter) * 2);
                }
            }

            .irresistibleText {
                grid-column: span 12;
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: var(--color4);
                font-family: var(--font-extra);
                font-size: var(--m-fontsize);
                padding-bottom: var(--gutter);
                .themeColor1 & {
                    color: var(--color1);
                }
            }
            .media, .irresistibleText {
                @media (min-width: 56em) {
                    grid-column: 2 / span 10;
                }
                @media (--min-fablet) {
                    grid-column: 2 / span 10;
                }
            }
            .inner {
                @media (min-width: 56em) {
                    grid-column: 4 / span 6;
                }
                @media (--min-fablet) {
                    grid-column: 4 / span 6;
                }
                text-align: center;
                &:not(.inner ~ .inner) {
                    gap: calc(var(--gutter) / 2);
                    @media (min-width: 56em) {
                        grid-column: 3 / span 8;
                        .homepage & {
                            grid-column: 2 / span 10;
                        }
                    }
                    @media (--min-fablet) {
                        grid-column: 3 / span 8;
                        .homepage & {
                            grid-column: 2 / span 10;
                        }
                    }
                }
                .themeColor2 & {
                    p, .title, .subTitle {
                        color: var(--color4);
                    }
                }
                .small {
                    font-size: calc(var(--m-fontsize) * 2);
                }
                .subTitle {
                    font-family: var(--font-extra);
                    font-size: calc(var(--m-fontsize) * 1.5);
                    line-height: var(--m-lineheight);
                }
                .buttons {
                    justify-content: center;
                }
            }
        }
    }
}