@layer addon {
    .templateMedia {
        padding: var(--section) 0;
        .container {
            padding: 0;
            .inner {
                padding: var(--section) 0;
                @media (max-width: 56em) {
                    padding: var(--padding) calc(var(--padding) - var(--gutter));
                }
                @media (--max-fablet) {
                    padding: var(--padding) calc(var(--padding) - var(--gutter));
                }
            }
            .media {
                border-radius: 0;
            }
        }
        &.themeColor2 {
            .container {
                border-top-left-radius: var(--section-radius);
                border-top-right-radius: var(--section-radius);
                overflow: hidden;
            }
        }
        &.mediaRight {
            .container {
                .media {
                    @media (min-width: 56em) {
                        grid-column: 7 / span 6;
                    }
                    @media (--min-fablet) {
                        grid-column: 7 / span 6;
                    }
                    &:has(video) {
                        @media (min-width: 56em) {
                            margin: var(--padding) 0;
                            border-top-left-radius: var(--section-radius);
                            border-bottom-left-radius: var(--section-radius);
                            overflow: hidden;
                        }
                        @media (--min-fablet) {
                            margin: var(--padding) 0;
                            border-top-left-radius: var(--section-radius);
                            border-bottom-left-radius: var(--section-radius);
                            overflow: hidden;
                        }
                    }
                    &:has(img) {
                        height: 100%;
                        img {
                            height: 100%;
                        }
                    }   
                }
                .inner {
                    grid-column: 2 / span 10;
                    @media (min-width: 56em) {
                        grid-column: 2 / span 5;
                    }
                    @media (--min-fablet) {
                        grid-column: 2 / span 5;
                    }
                }
            }
        }
    }
}