.outer-container {
    overflow: visible;

    .template-text {
        width: 100% !important;
    
        .container {
            --gap: 24px;


            display: flex;
            position: relative;
            flex-direction: column;
            gap: var(--gap);
            align-items: flex-start;
        
                

            .side-banner {
                --primary-color: grey;
                --secondary-color: black;

                display: grid;
                grid-template-columns: 40% 60%;
                position: sticky;
                top: calc(25vh - 7vw);
                right: 0;
                width: 100%;
                border-radius: 10px;
                height: fit-content;

                &[data-primary-color="purple"] {
                    --primary-color: var(--dark-purple);
                }

                &[data-primary-color="blue"] {
                    --primary-color: #552e8b;
                }

                &[data-primary-color="pink"] {
                    --primary-color: #672e8c;
                }

                &[data-secondary-color="orange"] {
                    --secondary-color: var(--orange);
                }

                &[data-secondary-color="blue"] {
                    --secondary-color: #2f78bd;
                }
                
                & >  img {
                    object-fit: cover;
                    border-radius: 10px 0 0 10px;
                    height: 100%;
                }

                & > .text-background {
                    grid-column: 2;
                    border-radius: 0 10px 10px 0;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 12px;
                    justify-content: center;
                    
                    z-index: 2;
                    padding: 24px 20px;
        
                    & > * {
                        color: #fff !important;
                        font-weight: 600;
                    }

                    & > p {
                        letter-spacing: 0.04em;
                        line-height: 1.35em;
                    }

                    & > a {
                        letter-spacing: 0.08em;
                        padding: 12px 16px;
                        text-shadow: 0 0 6px var(--primary-color);
                        box-shadow: rgba(0,0,0,.35) 0 0 8px 4px;
                        
                        border-radius: 10px;
                    }
                }

                &.split {
                    background: var(--secondary-color);

                    & > .text-background {
                        & > a {
                            background-color: var(--primary-color);
                        }
                    }
                }

                &.gradient {
                    --gradient-overlap: 24px;
                    background: var(--primary-color);

                    & > .text-background {
                        justify-self: end;
                        width: calc(100% + var(--gradient-overlap));
                        background: linear-gradient(to right, transparent 0, var(--primary-color) calc(var(--gradient-overlap) - 8px) 100%);
                        padding: 24px 20px 24px calc(var(--gradient-overlap) + 20px);

                        & > a {
                            background-color: var(--secondary-color);
                        }
                    }
                }
        

            }
            
            @media(min-width: 768px) {
                & {
                    flex-direction: row;
                    
                    .side-banner {
                        grid-template-columns: 100%;
                        grid-template-rows: auto;
                        width: calc(100% - 200px + var(--gap));
                        top: calc(50% + 35px);
                        
                       
    
                        & > * {
                            width: 100%;
                            min-height: fit-content;
                            display: block;
                        }

                        & >  img {
                            border-radius: 10px 10px 0 0;
                        }
    
                        & > .text-background {
                            grid-column: 1;
                            border-radius: 0 0 10px 10px;
                        }

                        &.gradient {
                            .text-background {
                                align-self: end;
                                width: 100%;
                                height: calc(100% + var(--gradient-overlap));
                                background: linear-gradient(transparent 0, var(--primary-color) calc(var(--gradient-overlap) - 8px) 100%);
                                padding: calc(var(--gradient-overlap) + 24px) 20px 24px;
                            }
                        }

                        &.scrolling {
                            transform: translateY(-50%);
                        }
                    }
                }
            }

            @media (min-width: 1024px) {
                .side-banner {
                    --gap: 32px;
                    width: calc(100% - 400px + var(--gap));

                    & > .text-background > a {
                        font-size: 16px;
                    }
                }
            }

            @media (min-width: 1200px) {
                .side-banner {
                    width: calc(100% - 600px + var(--gap));

                    &.gradient {
                        & >  {
                            max-height: 60vh;
                        }

                        & > .text-background {
                            padding: calc(var(--gradient-overlap) + 12px) 16px 12px;
                        }
                    }
                }


            }

            @media (min-width: 1400px) {
                .side-banner {
                    width: calc(100% - 800px + var(--gap));

                    & > .text-background {
                        & > a {
                            font-size: 16px;
                        }
                    }
                }
            }

        }
    }
}