.gallery-container {
    display: flex;
    height: 60vh;
    width: 100%;
    margin-top: 20px;
    justify-content: center;
    overflow: visible;
}

.gallery-item {
    position: relative;
    flex: 1;
    background-size: cover;
    background-position: center;
    height: 100%;
    text-decoration: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    margin: 0 -10%;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.6s ease;
    z-index: 1;
    overflow: hidden;
    /* Corta o GIF no formato do polígono */
}

.gallery-item span {
    position: relative;
    z-index: 2;
    padding-bottom: 40px; /* Sobe o texto para longe da base mais estreita */
    font-family: 'gentium book basic', serif;
    font-size: 1.7rem;    /* Reduzido para caber melhor nas fatias inclinadas */
    text-transform: lowercase;
    letter-spacing: 1px; /* Menor espaçamento evita que o texto saia pelas bordas */
    text-shadow: 0 0 10px black;
    white-space: nowrap;
    color: white;
    text-align: center;
    width: 90%; /* Limita a largura para garantir margem de segurança */
    left: 30%;
    transform: translateX(-60%);
}
.gallery-item:last-child span {
      
    left: 0%;
    transform: translateX(0%);
}

.gallery-item:hover span {
     left: 30%;
    transform: translateX(-45%);      
}

.gallery-item:last-child:hover span {
      
     left: 0%;
    transform: translateX(0%);
}

/* Camada oculta para o GIF */
.gif-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}
/* Garante que o vídeo preencha o quadrado como o GIF fazia */
.video-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Faz o vídeo cortar para preencher o espaço sem distorcer */
    opacity: 0;        /* Escondido por padrão */
    transition: opacity 0.5s ease;
    z-index: 1;
}

/* Quando passar o mouse no item da galeria, o vídeo aparece */
.gallery-item:hover .video-layer {
    opacity: 1;
}

/* Garante que o texto fique acima do vídeo */
.gallery-item span {
    z-index: 2;
    position: relative;
}

.gallery-item:hover .gif-layer {
    opacity: 1;
}

/* Ajustes das Pontas */
.gallery-item:first-child {
    clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
    margin-left: 0;
    flex: 0.9;
}

.gallery-item:last-child {
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 0% 100%);
    margin-right: 0;
    flex: 0.6;
}

/* Efeito de Salto */
.gallery-item:hover {
    z-index: 10;
    transform: scale(1.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

/* Ajuste para a primeira fatia (Advertising / Carro) */
.gallery-item:nth-child(1) {
    background-position: 60% center !important; 
}

/* Ajuste para a segunda fatia (Cinematics / Mulher) */
.gallery-item:nth-child(2) {
    background-position: 45% center !important; /* Move a imagem para a direita */
}

/* Ajuste para a terceira fatia (VFX / Castelo) */
.gallery-item:nth-child(3) {
    background-position: 50% center !important;
}

/* Ajuste para a quarta fatia (Immersive / Monstro) */
.gallery-item:nth-child(4) {
    background-position: 50% center !important; /* Move a imagem para a esquerda */
}

/* Ajuste para a quinta fatia (Case Studies / Elfo) */
.gallery-item:nth-child(5) {
    background-position: 20% center !important;
}

/* ==========================================================================
   MOBILE RESPONSIVITY (Telas até 768px) - NOVO E CORRIGIDO
   ========================================================================== */
@media (max-width: 768px) {
    
    .gallery-item:nth-child(5) {
    background-position:  center 20% !important;
}

    .gallery-container {
        flex-direction: column; /* Lista vertical */
        height: auto;           /* Altura cresce conforme conteúdo */
        margin-top: 10px;
        padding: 0 10px;
        justify-content: flex-start;
    }

    .gallery-item {
        height: 200px !important;  /* Altura fixa para todos */
        margin: 5px 0 !important;  /* Espaço uniforme entre eles */
        clip-path: none !important; /* REMOVE INCLINAÇÃO DE TODOS */
        flex: none !important;
        width: 100% !important;
        transform: none !important; /* Previne zooms indesejados no mobile */
        border-radius: 4px;        /* Leve arredondado nos cantos */
    }

    /* Ajuste para garantir que o hover/active funcione no toque */
    .gallery-item .gif-layer {
        transition: opacity 0.3s ease;
    }
    .gallery-item:active .gif-layer,
    .gallery-item:focus .gif-layer {
        opacity: 1;
    }

    /* CORREÇÃO DO TEXTO: Força centralização total */
    .gallery-item span {
        left: 0 !important;      /* Zera o posicionamento lateral esquerdo */
        transform: none !important; /* Zera a translação */
        width: 100% !important;     /* Usa a largura total da fatia */
        font-size: 1.4rem !important;
        padding: 0 20px 20px 20px; /* Margem interna para o texto respirar */
        text-align: center !important; /* Centralização real */
        white-space: normal !important; /* Permite quebrar linha se o nome for gigante */
    }

    /* CORREÇÃO DAS PONTAS: Remove as regras especiais que cortavam */
    .gallery-item:first-child {
        clip-path: none !important;
        margin-left: 0 !important;
    }

    .gallery-item:last-child {
        clip-path: none !important;
        margin-right: 0 !important;
    }
    
    /* Zera os hovers do desktop que tiram o texto do lugar */
    .gallery-item:hover span,
    .gallery-item:last-child:hover span {
        left: 0 !important;
        transform: none !important;
    }
}