︎
html, body { margin: 0; padding: 0; overflow-x: hidden; background: #000; color: #fff; font-family: Helvetica, Arial, sans-serif; } .page, .page_content, .page-content, .site_content, .site-content, main, section { max-width: none !important; width: 100% !important; } .site-nav { position: fixed; top: 0; left: 0; width: 100%; display: flex; flex-direction: row; justify-content: space-between; padding: 20px 24px; box-sizing: border-box; background: #000; z-index: 1000; } .site-nav .nav-item { font-size: 11px; letter-spacing: 0.02em; font-weight: bold; color: #fff; line-height: 1.5; } .site-nav .nav-item a { color: #fff; text-decoration: none; } .site-nav .nav-item a:hover, .site-nav .nav-item.active { opacity: 0.5; } #motion-gallery-block { padding-top: 64px; } .motion-subnav { text-align: center; margin: 48px 12px 40px !important; padding: 0 !important; line-height: 1; } .motion-subnav button { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0 16px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: bold; letter-spacing: 0.02em; text-transform: uppercase; color: #888; opacity: 0.7; transition: opacity 0.2s ease, color 0.2s ease; } .motion-subnav button:hover { opacity: 1; color: #fff; } .motion-subnav button.active { color: #fff; opacity: 1; } .custom-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0 12px 24px !important; width: auto; max-width: none !important; box-sizing: border-box; } .custom-gallery .video-item { position: relative; overflow: hidden; background: #000; min-width: 0; } .custom-gallery .video-item a { display: block; text-decoration: none; color: inherit; } .custom-gallery .video-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; } .custom-gallery iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; transition: transform 0.4s ease; } .custom-gallery .video-item:hover iframe { transform: scale(1.03); } .custom-gallery .overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; display: flex; align-items: center; justify-content: center; transition: opacity 0.25s ease; pointer-events: none; } .custom-gallery .video-item:hover .overlay { opacity: 1; } .custom-gallery .title { color: #fff; font-size: 11px; font-weight: bold; font-family: inherit; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; padding: 0 10px; } .video-item.is-hidden { display: none !important; } @media (max-width: 1200px) { .custom-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .site-nav .nav-item { display: none; } .site-nav .nav-item:first-child, .site-nav .nav-item.active { display: block; } .site-nav .nav-item.active { position: absolute; top: 16px; right: 16px; } .motion-subnav { margin: 36px 8px 28px !important; } .motion-subnav button { margin: 0 10px; font-size: 10px; } .custom-gallery { grid-template-columns: 1fr; margin: 0 8px 8px !important; gap: 4px; } }