* { margin: 0; padding: 0; box-sizing: border-box; } .main-container { display: flex; height: 390px; width: 100%; } .gallery-zone { width: 100%; display: flex; gap: 9px; padding: 0 2px 0 2px; overflow: hidden; } .column { flex: 1; overflow: hidden; position: relative; display: flex; flex-direction: column; } .column::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; background: linear-gradient(to bottom, transparent, #060608); pointer-events: none; z-index: 2; } .column-inner { display: flex; flex-direction: column; animation: scroll-vertical 68.5s linear infinite; } .column.reverse .column-inner { animation-direction: reverse; } .column img, .column video { width: 100%; height: auto; margin: 9px 0 9px 0; border-radius: 12px; object-fit: cover; display: block; } @keyframes scroll-vertical { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } /* Efeito de opacidade apenas no desktop */ @media (min-width: 769px) { .column img, .column video { opacity: 0.66; transition: opacity 0.2s ease; } .column img:hover, .column video:hover { opacity: 1; } } /* MOBILE */ @media (max-width: 768px) { .main-container { flex-direction: column; height: auto !important; /* Altura automática no mobile para não cortar o conteúdo */ } .gallery-zone { flex-direction: column; gap: 3px; padding: 3px; } .column { position: relative; flex: none; width: 100%; } .column-inner { display: flex; flex-direction: row; width: max-content; animation: scroll-horizontal 68.5s linear infinite; } .column-inner > * { flex-shrink: 0; } .column img, .column video { width: auto; height: 110px !important; margin: 3px !important; border-radius: 8px; object-fit: cover; display: block; opacity: 0.8; } .column::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; opacity: 0.45; background: linear-gradient(to bottom, transparent, #060608); pointer-events: none; z-index: 2; } /* Oculta as colunas extras no mobile */ .hide-mobile { display: none !important; } /* Animação de rolagem horizontal */ @keyframes scroll-horizontal { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Direção de rolagem para as colunas no mobile */ .gallery-zone > .column:nth-child(1) .column-inner { animation-direction: normal; } .gallery-zone > .column:nth-child(2) .column-inner { animation-direction: reverse; } .gallery-zone > .column:nth-child(3) .column-inner { animation-direction: normal; } }