javascript module, querySelector

Question

So for a school assignment I need to make a javascript module/small lib. so I'm making something that wil skew panels on mouse out. But something keeps going wrong. This is the code I've got;

 var panels = (function () {

  var ANGLE = 45;
  var skewPanels = document.querySelectorAll(".skewPanel");
  var colors = ['#4975FB', '#924DE6', '#EF5252', '#F59500'];

  for (var i = 0; i < skewPanels; i++) {
    floatable(skewPanels[i], colors[i]);
  }

  function floatable (panel, color) {

    let content = panel.querySelector(".content");
    content.style.backgroundColor = color;

    panel.addEventListener('mouseout', e => {
      content.style.transform = `perspective(300px)
                                rotateY(0deg)
                                rotateX(0deg)`;
    });

    panel.addEventListener('mouseout', e => {
      var w = panel.clientWidth;
      var h = panel.clientHeight;
      var y = (e.offsetX - w * 0.5) / w * ANGLE;
      var x = (1 - (e.offsetY - h * 0.5)) / h * ANGLE;

      content.style.transform = `perspective(300px)
                                rotateX(${x}deg)
                                rotateY(${y}deg)`;
    });
  }

  return {
    floatable: floatable
  }

})();

This is the html code.

<div class="skewPanel">
<div class="content">HOVER</div>
</div>
<div class="skewPanel">
  <div class="content">HOVER</div>
</div>
<div class="skewPanel">
  <div class="content">HOVER</div>
</div>
<div class="skewPanel">
  <div class="content">HOVER</div>
</div>

<script type="text/javascript">
  panels.floatable();
</script>

So I keep getting the error "Cannot read property 'querySelector' of undefined". I don't understand why this error comes up, I am giving it the div to find look for ".content". I got it working in non-modular style, but now it keeps breaking on me. Could someone explain to me what I'm doing wrong?