<div class="split-layout-container">
    <div class="split-left">
        <blockquote class="tiktok-embed" cite="https://www.tiktok.com/@swarnavahinisl" data-unique-id="swarnavahinisl" data-embed-type="creator">
            <section>
                <a target="_blank" href="https://www.tiktok.com/@swarnavahinisl?refer=creator_embed">@swarnavahinisl</a>
            </section>
        </blockquote>
        <script async src="https://www.tiktok.com/embed.js"></script>
    </div>
    <div class="split-right">
        <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fswarnavahini%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden;border-radius:20px;" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
    </div>
</div>

<style>
    .split-layout-container {
        display: flex;
        width: 100%;
        max-width: 1200px;
        margin: 40px auto;
        padding: 20px;
        gap: 20px;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        color: white;
        align-items: stretch;
    }

    .split-left, .split-right {
        flex: 1;
        border-radius: 20px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .split-left {
        flex: 2;
    }

    .tiktok-embed, .split-right iframe {
        height: 500px;
        width: 100%;
        border-radius: 20px;
        box-sizing: border-box;
    }

    .tiktok-embed iframe {
        border-radius: 20px;
        height: 100%;
        width: 100%;
    }

    /* Responsive adjustments */
    @media (max-width: 991px) {
        .split-layout-container {
            flex-direction: column;
            margin: 15px auto;
            gap: 15px;
        }
        .split-left, .split-right {
            border-radius: 15px;
        }
        .tiktok-embed, .split-right iframe {
            height: 400px;
        }
    }

    @media (max-width: 576px) {
        .split-layout-container {
            margin: 10px auto;
            gap: 10px;
        }
        .split-left, .split-right {
            border-radius: 10px;
            padding: 15px;
        }
        .tiktok-embed, .split-right iframe {
            height: 300px;
        }
    }
</style>