/* HEADER WITH GIFS */

.js-banner {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr 1fr 1.2fr 1.1fr 1fr 1.1fr 1.1fr 1fr 1.1fr 1fr 0.4fr;
        width: 100%;
      }

      .js-banner-cell {
        position: relative;
        cursor: pointer;
      }

      .js-banner-layer {
        position: absolute;
        inset: 0;
        transition: opacity 0.18s ease;
      }

      .js-banner-svg-layer svg {
        width: 100%;
        height: 100%;
        display: block;
        fill: #000;
      }

      .js-banner-gif-layer {
        opacity: 0;
        background: transparent;
      }

      .js-banner-gif-layer img {
        width: 100%;
        height: 100%;
        object-fit: fill;
        display: none;
      }

      .js-banner-gif-layer-show {
        position: absolute;
        inset: 0;
      }

      .js-banner-gif-layer-show img {
        width: 100%;
        height: 100%;
        object-fit: fill;
        display: block;
      }

      .js-banner-gif-placeholder {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: monospace;
        font-size: 11px;
        color: #333;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        border: 1px dashed #222;
      }

      .js-banner-cell:hover .js-banner-svg-layer {
        opacity: 0;
      }

      .js-banner-cell:hover .js-banner-gif-layer,
      .js-banner-gif-layer-show {
        opacity: 1;
        image-rendering: pixelated !important;
        -ms-interpolation-mode: nearest-neighbor;
      }

      .js-banner-cell.js-banner-flashing .js-banner-svg-layer {
        opacity: 0;
      }

      .js-banner-cell.js-banner-flashing .js-banner-gif-layer {
        opacity: 1;
        image-rendering: pixelated !important;
        -ms-interpolation-mode: nearest-neighbor;
      }

      .js-banner-cell.js-banner-drag-over .js-banner-gif-placeholder {
        border-color: #555;
        color: #666;
      }

      @media (max-width: 576px) {
        .js-banner {
          gap: 2px;
          height: 12vw;
        }
      }

      @media (min-width: 577px) {
        .js-banner {
          gap: 2px;
          height: 12vw;
        }
      }

      @media (min-width: 992px) {
        .js-banner {
          gap: 5px;
          height: 12vw;
        }
      }

      @media (min-width: 1200px) {
        .js-banner {
          gap: 5px;
          height: 12vw;
        }
      }