/* Aplica uma transição suave à propriedade transform nos elementos com a classe .projeto-card */
.projeto-card {
    transition: transform 0.3s ease; /* Duração: 0.3s, tipo: ease */
	    border: 2px solid #000; /* Exemplo de borda */
}

/* Ao passar o mouse sobre o card, aumenta levemente o tamanho (zoom) */
.projeto-card:hover {
    transform: scale(1.05); /* Escala para 105% do tamanho original */
}

/* Define o estilo do corpo quando está no modo escuro */
body.dark-mode {
    background-color: #121212; /* Fundo bem escuro */
    color: #f4f4f4; /* Texto claro para contraste */
}

/* Ajusta o cabeçalho e rodapé no modo escuro */
.dark-mode header,
.dark-mode footer {
    background-color: #222; /* Fundo um pouco mais claro que o body */
}

/* Container para imagem com proporção fixa e overflow controlado */
.img-wrapper {
    position: relative;        /* Permite posicionamento interno */
    width: 100%;               /* Ocupa toda a largura disponível */
    max-width: 600px;          /* Limita a largura máxima */
    aspect-ratio: 16 / 9;      /* Mantém proporção fixa (16:9) */
    overflow: hidden;          /* Corta partes da imagem que ultrapassem o container */
}

/* Estiliza imagens dentro do container .img-wrapper */
.img-wrapper img {
    width: 100%;               /* Ocupa toda a largura do container */
    height: 100%;              /* Ocupa toda a altura do container */
    object-fit: cover;         /* Preenche mantendo proporção sem distorcer */
    border-radius: 8px;        /* Cantos arredondados (opcional) */
}	

.img-wrapper.multiple {
    display: flex;              /* Coloca as imagens lado a lado */
    gap: 10px;                  /* Espaço entre elas */
    aspect-ratio: auto;         /* Remove proporção fixa */
    max-width: 600px;
}

.img-wrapper.multiple img {
    flex: 1;                    /* Cada imagem ocupa espaço igual */
    object-fit: cover;
    border-radius: 8px;
}

.img-card {
  height: 200px;
  object-fit: cover;
}