.portfolio-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* Espaço entre as duas imagens */
    flex-wrap: wrap;
    margin: 50px auto;
    max-width: 1200px;
}

.portfolio-item {
    position: relative;
    width: 480px; /* Tamanho maior para destacar os projetos imersivos */
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.portfolio-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px; /* Leve arredondamento para combinar com o site */
}

/* ==========================================================================
   ELEMENTOS DO HOVER (DESIGN ESPECÍFICO DESTA PÁGINA)
   ========================================================================== */

/* A caixa de borda branca que envolve o título (visto na imagem de referência) */
.info-box-wrapper {
    border: 1px solid #ffffff; 
    padding: 10px 20px;
    margin: 15px 0;
    display: inline-block;
    box-sizing: border-box;
}

.project-title {
    font-family: 'Gentium Book Basic', serif !important;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1.5px;
    margin: 0;
    color: #ffffff;
    text-transform: none;
}

/* Sobrescrevendo o estúdio para esta página se necessário */
.immersive-studio {
    font-family: 'Gentium Book Basic', serif !important;
    font-size: 12px;
    color: #ffffff;
    opacity: 0.8;
    margin-top: 5px;
}

/* ==========================================================================
   BODY E FOOTER
   ========================================================================== */

/* Força o body a ocupar pelo menos 100% da altura da tela */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

/* Faz este container esticar para ocupar todo o espaço sobrando, 
   empurrando o footer para baixo */
.content-wrapper {
    flex: 1;
}

/* Ajuste no Footer para garantir que ele fique no fim */
footer {
    width: 100%;
    padding: 40px 0;
    margin-top: auto !important; /* O 'auto' no flex-direction: column empurra para o fim */
    position: relative !important;
}

@media (max-width: 768px) {
    
    /* Aplica o layout de 2 ou 4 colunas para TODAS as grades do site */
    .projects-grid, 
    .poster-grid, 
    .portfolio-grid { 
        display: grid !important;
        grid-template-columns: repeat(1, 1fr) !important; /* Recomendo 2 colunas para essas páginas pois os títulos são maiores */
        gap: 15px !important;
        width: 100% !important;
    }

    /* Garante que os itens de portfólio ocupem a largura correta */
    .portfolio-item {
        width: 100% !important;
    }

    /* Ajuste para os ícones de software (isso já deve funcionar para todas) */
    .software-icons-footer {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        margin-top: 80px !important;
    }
}