/* RESET AND BASE STYLES */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        .clbody {
            font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue";
            background: #f9fbff;
            color: #122;
            line-height: 1.4;
            padding: 24px;
        }

        .clwrap {
            max-width: 1100px;
            margin: 0 auto;
        }

        /* MAIN FLEX CONTAINER */
        .clcontainer {
            display: flex;
            flex-wrap: wrap;
            gap: 3px; /* Fixed gap between columns */
            align-items: flex-start;
            align-content: flex-start;
        }

        /* IMAGE CONTAINER - fixed dimensions */
        .clmedia {
            flex: 0 0 340px;
            height: 318px;
        }
        
        .clframe {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 6px 18px rgba(8, 20, 40, 0.08);
        }
        
        .clframe img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* TEXT COLUMN (beside image) */
        .clintro {
            flex: 1 1 calc(50% - 3px);
            display: flex;
            flex-direction: column;
            min-height: 318px; /* Align with image top */
        }
        
        .clintro h1 {
            font-size: 1.25rem;
            margin-bottom: 8px;
            color: #0b74de;
        }
        
        .clintro p {
            margin: 0 0 12px 0;
        }

        /* OVERFLOW AREA for content that doesn't fit */
        .clbelow {
            flex: 1 1 100%;
            display: block;
            margin-top: 6px;
        }
        
        .clbelow p {
            margin: 0 0 12px 0;
        }

        /* LAYOUT VARIANTS: image-left or image-right */
        /* Default: image-right (text-left) */
        .climage-right .clintro {
            order: 1;
            padding-right: 10px;
        }
        
        .climage-right .clmedia {
            order: 2;
        }
        
        .climage-right .clbelow {
            order: 3;
        }

        /* Alternative: image-left (text-right) */
        .climage-left .clmedia {
            order: 1;
        }
        
        .climage-left .clintro {
            order: 2;
            padding-left: 10px;
        }
        
        .climage-left .clbelow {
            order: 3;
        }

        /* MOBILE RESPONSIVE: stacked layout */
        @media (max-width: 768px) {
            .clcontainer {
                flex-direction: column;
                gap: 12px;
            }
            
            .clmedia {
                flex: 0 0 auto;
                width: 100%;
                height: auto;
                order: -1 !important; /* Force image to top on mobile */
            }
            
            .clframe {
                aspect-ratio: 16/9;
                height: auto;
                border-radius: 10px;
            }
            
            .clintro {
                flex: 1 1 100%;
                min-height: 0;
                padding: 0 !important;
                order: 0 !important; /* Text below image */
            }
            
            .clbelow {
                margin-top: 0;
                order: 1 !important; /* Overflow content at bottom */
            }
        }