/* ================================ */ /* Parallax Fixo no */ /* ================================ */ html, body { height: 100%; margin: 0; padding: 0; } /* Faz o background ficar fixo e cobrir toda a janela */ .galeria-body { margin: 0; padding: 0; background: url("../imagens/apresenta.jpeg") center center / cover no-repeat; background-attachment: fixed; /* Fica parado enquanto rola o conteúdo */ min-height: 100vh; /* Garantir altura mínima da tela */ } /* ================================ */ /* Container da galeria */ /* ================================ */ .galeria-container { /* Sem min-height para deixar crescer conforme itens */ margin-top: 60px; /* Se seu navbar for fixo e tiver ~120px de altura */ padding: 20px; position: relative; /* se quiser, adicione um "fundo semitransparente" para destacar os cards, ex: background-color: rgba(255,255,255,0.2); */ flex: 1; } /* ================================ */ /* Layout Flex: 3 colunas */ /* ================================ */ .album-flex { display: flex; flex-wrap: wrap; justify-content: center; /* centraliza quando sobra menos que 3 na última linha */ gap: 30px; } @keyframes fadeUp { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } } .wrapper { display: flex; flex-direction: column; min-height: 100vh; } /* Card ~ 3 colunas em telas grandes */ .album-card { width: 350px; /* Ajuste conforme desejado */ text-decoration: none; color: inherit; display: block; overflow: hidden; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease; opacity: 0; animation: fadeUp 0.6s ease forwards; } .album-card:hover { transform: translateY(-5px); } /* Imagem de fundo do card */ .album-image { position: relative; aspect-ratio: 1 / 1; height: auto; background-position: center; background-size: cover; background-repeat: no-repeat; } /* Degradê no rodapé do card */ .album-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; /* define altura do degradê */ padding: 10px; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); display: flex; align-items: flex-end; justify-content: center; } /* Título do álbum */ .album-title { color: #fff; margin: 10px; font-size: 32px; font-family: "Lora", serif; font-weight: lighter; text-align: center; } .mobile-title { display: none; /* escondido por padrão */ text-align: center; font-size: 2rem; margin-top: 80px; /* para não ficar colado ao navbar */ color: #f3ca4c; /* cor dourada (se quiser) */ font-family: "Lora", serif; font-weight: lighter; } /* ================================ */ /* Responsividade */ /* ================================ */ @media (max-width: 768px) { /* Em telas pequenas, cada card ocupa 100% */ .album-card { width: 70%; } /* Ajusta a imagem para ficar quadrada */ .album-image { /** Nova abordagem com aspect-ratio **/ aspect-ratio: 1 / 1; height: auto; /* ignora o height fixo anterior */ } .mobile-title { display: block; } .galeria-container { margin-top: 0px; } }