Widget:Teste

<style>

   .island-grid {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       gap: 10px;
       padding: 12px 0;
   }

   .island-banner {
       position: relative;
       width: 380px;
       height: 90px;
       overflow: hidden;
       border-radius: 8px;
       box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 10px;
       cursor: pointer;
       transition: transform 0.15s, box-shadow 0.15s;
       display: block;
       box-sizing: border-box;
   }

   .island-banner::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: linear-gradient(105deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.1) 70%, transparent 100%);
       pointer-events: none;
       z-index: 1;
   }

   .island-banner:hover {
       transform: translateY(-2px);
       box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 12px;
   }

   .island-banner .island-chests {
       position: absolute;
       top: 8px;
       left: 8px;
       display: flex;
       flex-wrap: wrap;
       gap: 6px;
       z-index: 2;
       pointer-events: none;
   }

   .island-banner .island-chest-group {
       position: relative;
       display: inline-block;
   }

   .island-banner .island-chest-group img {
       display: block;
       width: auto;
       height: auto;
   }

   .island-banner .island-chest-count {
   position: absolute;
   left: 0;          /* era right: 0 */
   bottom: 0;
   font-size: 12.5px;  /* era 11px */
   font-weight: bold;
   color: #fff;
   background: rgba(0, 0, 0, 0.75);
   padding: 1px 3px;
   border-radius: 3px;
   line-height: 1;
   white-space: nowrap;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   z-index: 10;

}

   .island-banner .island-title {
       position: absolute;
       bottom: 10px;
       left: 8px;
       font-size: 1.35em;
       font-weight: bold;
       color: #fff;
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5);
       line-height: 1.2;
       z-index: 2;
       pointer-events: none;
       text-transform: uppercase;
   }

   @media (max-width: 768px) {
       .island-grid {
           flex-direction: column;
           align-items: stretch;
       }

       .island-banner {
           width: 100%;
           max-width: none;
       }
   }

</style> <script>

   (function () {
       function applyBackgrounds() {
           document.querySelectorAll('.island-banner[data-bgimg]').forEach(function (el) {
               var filename = el.getAttribute('data-bgimg');
               if (!filename) return;
               var url;
               if (typeof mw !== 'undefined' && mw.util && mw.util.getUrl) {
                   url = mw.util.getUrl('Especial:FilePath/' + filename);
               } else {
                   url = '/index.php?title=Especial:FilePath/' + encodeURIComponent(filename);
               }
               el.style.backgroundImage = 'url(' + url + ')';
               el.style.backgroundSize = 'cover';
               el.style.backgroundPosition = 'center';
               el.style.backgroundRepeat = 'no-repeat';
           });
       }
       function initClickable() {
           document.querySelectorAll('.island-banner[data-href]').forEach(function (el) {
               if (el._icClick) return;
               el._icClick = true;
               el.setAttribute('role', 'link');
               el.setAttribute('tabindex', '0');
               el.addEventListener('click', function () {
                   var href = el.getAttribute('data-href');
                   if (href) window.location.href = href;
               });
               el.addEventListener('keydown', function (e) {
                   if (e.key === 'Enter' || e.key === ' ') {
                       e.preventDefault();
                       var href = el.getAttribute('data-href');
                       if (href) window.location.href = href;
                   }
               });
           });
       }
       function run() {
           applyBackgrounds();
           initClickable();
       }
       if (document.readyState === 'loading') {
           document.addEventListener('DOMContentLoaded', run);
       } else {
           run();
       }
   })();

</script>