@layer addon {
    .templateContent {
        &.split {
            .container {
                gap: calc(var(--padding) * 2);
            }
            .media {
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 100%;
                border-radius: 0;
                &:before {
                    content: "";
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    z-index: 1;
                    background: linear-gradient(0deg, rgba(0, 0, 0, 0.33) 0%);
                }
            }
            .inner {
                z-index: 1;
                justify-content: center;
                &.contentLeft {
                    grid-column: span 6;
                    
                    .title {
                        padding-left: 80px;
                        text-indent: -80px;
                        -webkit-hyphens: none;
                                hyphens: none;
                        color: var(--color-light);
                    }
                }
                &.contentRight {
                    margin-right: var(--min-padding);
                    grid-column: 9 / span 4;
                    padding: calc(var(--padding) * 2) var(--padding);
                    border-radius: var(--border-radius);
                    border: 1.5px solid rgba(255, 255, 255, 0.50);
                    background: rgba(255, 255, 255, 0.29);
                    -webkit-backdrop-filter: blur(60px);
                            backdrop-filter: blur(60px);
                    color: var(--color-light);
                    gap: var(--padding);
                    @media (max-width: 56em) {
                        margin-right: initial;
                        grid-column: span 6;
                    }
                    @media (--max-fablet) {
                        margin-right: initial;
                        grid-column: span 6;
                    }
                }
            }
        }
        &:has(.embedCode) {
            @media (--min-width: @fablet) {
                .inner {
                    grid-column: span 12;
                }
                .intro {
                    width: calc(100% / 12 * 8);
                    margin: 0 auto;
                }
            }
        }
    }
}