.project-filter { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; padding-bottom: 8px; } .project-filter__btn { position: relative; color: var(--gray-600); cursor: pointer; transition: color var(--transition-base); } .project-filter__btn:hover { color: var(--gray-800); } .project-filter__btn.is-active { color: var(--gray-800); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 8px; text-decoration-color: var(--gray-800); } .project-filter__btn.is-active::after { width: 100%; } @media (max-width: 768px) { .project-filter { gap: 24px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: calc(50% - 50vw); padding-inline: var(--padding-h-mobile); } .project-filter::-webkit-scrollbar { display: none; } .project-filter__btn { flex-shrink: 0; white-space: nowrap; } } .site-footer { width: 100%; margin-top: auto; border-top: 0.5px solid var(--gray-300); } .site-footer__inner { display: flex; align-items: center; justify-content: space-between; height: 56px; gap: 24px; } .container-footer { width: 100%; max-width: 1512px; margin-inline: auto; padding-inline: var(--padding-h-desktop); } .site-footer__copy { color: var(--gray-800); } .site-footer__contact { display: flex; align-items: center; gap: 16px; } .site-footer__contact-item { color: var(--gray-800); transition: color var(--transition-base); } .site-footer__contact-item:hover { color: var(--gray-500); } .site-footer__separator { font-size: 1rem; color: var(--gray-300); user-select: none; } @media (max-width: 768px) { .site-footer__inner { flex-direction: column; height: auto; padding-block: 32px; gap: 12px; align-items: flex-start; } .container-footer { width: 100%; max-width: 1984px; margin-inline: auto; padding-inline: var(--padding-h-mobile); } } .video-item { position: relative; } .video-play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.96); width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gray-800-80); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 2; padding: 0; box-shadow: inset 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.75), inset -0.5px -0.5px 0.5px rgba(0, 0, 0, 0.85), 4px 4px 16px rgba(0, 0, 0, 0.35); } .video-play-button img { width: 48px; height: 48px; margin-left: 2%; } .needs-manual-play + .video-play-button { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .video-play-button:hover { transform: translate(-50%, -50%) scale(1.05); box-shadow: inset 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.85), inset -0.5px -0.5px 0.5px rgba(0, 0, 0), 4px 4px 16px rgba(0, 0, 0, 0.4); } .video-play-button:active { transform: translate(-50%, -50%) scale(0.98); } @media (max-width: 768px){ .video-play-button { width: 56px; height: 56px; } .video-play-button img { width: 24px; height: 24px; margin-left: 2%; } }