.dual-wave-wrapper { display: flex; width: 100%; position: relative; gap: 25vw; } .wave-column { flex: 1; display: flex; flex-direction: column; gap: 1.25rem; font-size: clamp(2rem, 10vw, 3rem); font-weight: 400; line-height: 0.7; position: relative; z-index: 100; } .wave-column-left { align-items: flex-start; } .wave-column-right { align-items: flex-end; } .animated-text { width: max-content; color: #4d4d4d; text-transform: uppercase; transition: color 300ms ease-out; } .animated-text.focused { color: white; z-index: 2; } .image-thumbnail-wrapper { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); width: 15vw; height: auto; z-index: 1; pointer-events: none; display: grid; place-items: center; } .image-thumbnail { width: auto; height: auto; max-width: 100%; max-height: 30vh; } @media (max-width: 1023px) { .dual-wave-wrapper { gap: 10vw; } .wave-column { gap: 2.5rem; font-size: 5vw; } .image-thumbnail-wrapper { width: 50vw; } }