Captured Moments, Beautifully

#mOpnjzY.is-media-grid { column-count: 4; column-gap: 10px; padding: 10px; } #mOpnjzY .gallery-item { position: relative; break-inside: avoid; border-radius: 0px; margin-bottom: 10px; line-height: 0; /* Eliminate extra space */ cursor: pointer; overflow: hidden; /* box-shadow: 5px 5px 0px #00000012;*/ } #mOpnjzY .gallery-item img { width: 100%; height: auto; transition: .8s all; } #mOpnjzY .gallery-item .caption { position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.4); color: #fff; padding: 12px 15px; opacity: 0; transition: all 0.8s ease; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: .9em; font-weight: 200; line-height: 1.2; } #mOpnjzY .gallery-item .caption h4 { font-weight: 300; font-size: 1.1em; margin: 0 0 0.1em;; } #mOpnjzY .gallery-item:hover .caption { opacity: 1; } #mOpnjzY .gallery-item .caption { transform: translateY(100%); transition: transform 0.5s ease, opacity 0.5s ease; } #mOpnjzY .gallery-item:hover .caption { transform: translateY(0%); opacity: 1; } #mOpnjzY .gallery-item .caption { background-color: #fff; color: #000; } #mOpnjzY .gallery-item .caption * { color: #000; } @media (max-width: 800px) { #mOpnjzY.is-media-grid {column-count: 3;} } @media (max-width: 600px) { #mOpnjzY.is-media-grid {column-count: 2;} } /* @media (max-width: 400px) { #mOpnjzY.is-media-grid {column-count: 1;} } */ .gallery-item .gallery-video-overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.000001); } .gallery-item video { height: auto; width: 100%; object-fit: cover; }