/* Adicione este CSS ao seu arquivo css/miolo.css */ .gallery-wrapper { display: flex; flex-wrap: wrap; /* Permite que as fotos quebrem para a próxima linha se não couberem */ justify-content: center; /* Centraliza as fotos horizontalmente */ gap: 20px; /* Adiciona um espaço entre as fotos */ padding: 20px 0; /* Um pouco de preenchimento superior/inferior */ } /* Certifique-se de que o .box3 tenha as propriedades corretas */ .box3 { /* Remova float: left; ou outras propriedades que impeçam o flexbox de funcionar */ /* Exemplo: */ width: 200px; /* Ou o tamanho que você desejar para suas miniaturas */ margin: 0; /* Remova margens que possam interferir no layout flex */ /* Outros estilos existentes para .box3 podem ser mantidos */ } .box3 img { max-width: 100%; height: auto; display: block; /* Para remover espaços extras abaixo da imagem */ border: 1px solid #ddd; border-radius: 5px; } /* No seu arquivo CSS, por exemplo, css/stile1.css ou css/miolo.css */ h1 { text-align: center; /* Outros estilos para h1 (tamanho da fonte, cor, etc.) podem ir aqui */ } /* Adicione este CSS diretamente no ou em seu css/miolo.css */ /* Estilos para o novo Lightbox */ .modal { display: none; /* Escondido por padrão */ position: fixed; /* Fixado na tela */ z-index: 1000; /* Acima de tudo */ left: 0; top: 0; width: 100%; /* Largura total */ height: 100%; /* Altura total */ background-color: rgba(0,0,0,0.9); /* Fundo preto semi-transparente */ justify-content: center; /* Centraliza horizontalmente */ align-items: center; /* Centraliza verticalmente */ } .modal-content { max-width: 90%; max-height: 90%; object-fit: contain; /* Garante que a imagem caiba sem cortar */ } .close-button, .nav-button { position: absolute; color: white; font-size: 40px; font-weight: bold; cursor: pointer; padding: 10px 20px; user-select: none; /* Evita seleção de texto */ } .close-button { top: 20px; right: 30px; } .prev-button { left: 20px; top: 50%; transform: translateY(-50%); } .next-button { right: 20px; top: 50%; transform: translateY(-50%); } .close-button:hover, .nav-button:hover { color: #bbb; } /* Estilos para centralizar as miniaturas (do exemplo anterior) */ .gallery-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 20px 0; } .box3 { width: 200px; /* ou o tamanho desejado */ margin: 0; } .box3 img { max-width: 100%; height: auto; display: block; border: 1px solid #ddd; border-radius: 5px; cursor: pointer; /* Indica que é clicável */ } .gallery-wrapper .box3 { margin: 10px; }