Image processing script conflicts with colorbox.

Problem/Motivation

Hello.
Thumbnails created by the colorbox module for example: 100x100 №1 is usually fine, but after loading custom.js the thumbnails are enlarged to the size of the main image №2. If you delete part of the script, the thumbnails become normal, but the image becomes transparent №3. I hope the screen is clearer than I wrote.

// Disable top margin if breadcrumb exist.
      if (document.querySelector('nav.breadcrumb')) {
        $(context)
          .find('.main-box')
          .once('.main-box')
          .addClass('breadcrumb-found');
      }

      $(context)
        .find('a > .w3-image')
        .once('a > .w3-image')
        .each(
          function () {
            $(this).parent().addClass('d8-has-image');
          }
        );

      mediaSize();
      window.addEventListener('resize', mediaSize);
      window.addEventListener('scroll', scrollWindow);   

Do you have any idea how to fix this?