/* 1. LAYOUT GRID/FLEXBOX PARA DISPOSIÇÃO 2x2 */
        .image-grid-container {
            display: flex;
            flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
            justify-content: center; /* Centraliza a grade na página */
            max-width: 950px; /* Limita a largura total para conter 2x (450px + margem) */
            margin: 0 auto;
        }

        /* 2. ESTILOS DO CONTAINER PRINCIPAL (ITEM DA GRADE) */
        .img-comparison-container {
            position: relative;
            /* Largura ajustada para caber 2 em 2 (50% da largura do grid-container) */
            width: 450px; 
            height: 300px; 
            overflow: hidden; 
            margin: 20px; /* Adiciona espaçamento entre os blocos */
            cursor: ew-resize; 
            box-shadow: 0 6px 12px rgba(0,0,0,0.2); 
            border-radius: 8px; 
        }
        
        /* Estilo para a descrição abaixo de cada comparação */
        .comparison-wrapper {
            /* Usamos este wrapper para que a descrição e o slider funcionem como uma unidade */
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 50%; /* Faz com que dois wrappers caibam por linha */
            padding: 10px;
            box-sizing: border-box; /* Inclui padding na largura */
        }

        /* 3. ESTILOS DAS IMAGENS */
        .img-comparison-container img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover; 
            pointer-events: none; 
            transition: clip-path 0.05s linear; 
        }

        .img-before { z-index: 1; }
        .img-after { z-index: 2; }

        /* 4. ESTILOS DO SLIDER (DIVISÓRIA ARRASTÁVEL) */
        .img-slider {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 4px; 
            background-color: white;
            z-index: 3;
            transform: translateX(-50%);
        }

        /* O círculo/pino que o usuário arrasta */
        .slider-handle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: white;
            border: 3px solid #00A1FF;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Estilos do handle (setas) */
        .slider-handle::before, .slider-handle::after {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
        }

        .slider-handle::before {
            border-width: 6px 8px 6px 0;
            border-color: transparent #00A1FF transparent transparent;
            left: 5px;
        }

        .slider-handle::after {
            border-width: 6px 0 6px 8px;
            border-color: transparent transparent transparent #00A1FF;
            right: 5px;
        }

        /* Responsividade: Garante que em telas pequenas, eles fiquem em coluna */
        @media (max-width: 950px) {
            .image-grid-container {
                max-width: 100%;
            }
            .img-comparison-container {
                width: 90%; /* Ocupa quase toda a largura */
                max-width: 400px;
            }
            /* Em telas pequenas, cada wrapper ocupa 100% da linha */
            .comparison-wrapper {
                width: 100%; 
            }
        }