Using nth child with responsive

[samrobbins85]

It's a fairly niche use-case, but I'm wanting to have different nth child declarations at different breakpoints, looking like this

@layer utilities {
  @variants responsive {
.hex-3 {
  width: 33.333%;
}
.hex-3:nth-child(5n + 4){
  margin-left: 16.6%;
}
.hex-2 {
    width: 50%; 
  }
.hex-2:nth-child(3n + 3) {
  margin-left: 25%; 
}
  }
}

The declarations for .hex-2 and .hex-3 work, however if I do for example hex-2 sm:hex-3, I will get the .hex-3 class, but will get the class .hex-2:nth-child(3n+3) as opposed to .hex-3:nth-child(5n+4), you can see this problem in this tailwind play

Thanks!