@layer addon {
    .themeColor2 + .templateCallToAction {
        margin-top: var(--section);
    }
    
    .templateCallToAction {
        padding: 0;

        &:last-child {
            &:after {
                content: "";
                background: var(--gradient);
                height: var(--section);
                position: absolute;
                left: 0;
                width: 100%;
                bottom: 0;
            }
        }

        .container {
            position: relative;
            z-index: 1;
            padding: 0;
            background: transparent;
            .inner {
                z-index: 2;
                grid-column: 2 / span 5;
                padding: var(--padding);
                min-height: 300px;
                justify-content: center;
                @media (min-width: 56em) {
                    padding-right: 0;
                }
                @media (--min-fablet) {
                    padding-right: 0;
                }
                @media (max-width: 56em) {
                    grid-column: span 8;
                    justify-content: flex-end;
                    padding-bottom: var(--section);
                }
                @media (--max-fablet) {
                    grid-column: span 8;
                    justify-content: flex-end;
                    padding-bottom: var(--section);
                }
                .title {color: var(--color-light);}
                .textLink {
                    color: var(--color-light);
                }
            }
            .media {
                grid-column: 2 / span 10;
                border-radius: var(--section-radius);
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;

                position: absolute;
                height: 100%;
                width: 100%;
                
                @media (max-width: 56em) {
                    grid-column: span 8;
                }
                
                @media (--max-fablet) {
                    grid-column: span 8;
                }
                &:before {
                    content: "";
                    position: absolute;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.0) 100%);
                }
            }
        }
    }
}