👨‍💼 At the xl breakpoint, make the animations slide from the right instead of from the top.

🐨 Create a new slide-left set of keyframes, which is just like the slide-up one, but with the 20px translation happening on the X axis.

🐨 Create a new animate-slide-left utility so you can apply it to elements.

🐨 At the xl breakpoint, override the slide-up animations on the logo, h1 and paragraph with the new slide-left animation.

🦉 Looks like the animation-delay sub-property gets reset to its default value (0s) when applying the xl:animate-slide-left class. Make sure you redefine it at the xl breakpoint!