Using different GSAP timelines at different breakpoints with matchmedia()

Question

I'm trying to trigger different GSAP timelines at different breakpoints using the window.matchmedia(); method.

I've attempted to put together a simple example here to explain my thinking:

const box = document.querySelector(".box");
const change = document.querySelector(".change");

const mqs = [
  window.matchMedia("(min-width: 600px)"),
  window.matchMedia("(min-width: 768px)"),
  window.matchMedia("(min-width: 1024px)")
];

const tl = gsap.timeline({
  paused: true;
});

if (mqs[0].matches) {
  tl.to(box, { backgroundColor: "green" });
} else if (mqs[1].matches) {
  tl.to(box, { backgroundColor: "pink" });
} else {
  tl.to(box, { backgroundColor: "black" });
}

function playTl() {
  tl.play();
}

change.addEventListener("click", playTl);

The idea is to have the change button trigger the animations within each breakpoint. But this approach isn't working. Is this possible to achieve?

Here's a Codepen also: https://codepen.io/abbasarezoo/pen/94c0b1c73f770d36f1103f615ac3e917