/* ============================================================
   GATO multibanner
   - Desktop (≥992px): original ThemeVolty layout (untouched)
   - Mobile (≤991px): expanding image gallery
   ============================================================ */

/* ---- Mobile only: expanding gallery ---- */
@media (max-width: 991px) {
  .tvcmsmultibanners.gs-image-gallery-section {
    width: 100% !important;
    padding: 1rem 0 1.75rem !important;
    margin: 0 0 1.75rem !important;
    background: transparent !important;
    float: none !important;
  }

  .tvcmsmultibanners.gs-image-gallery-section .tvmultibanner.gs-image-gallery {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0.4rem !important;
    width: 100% !important;
    max-width: none !important;
    height: 20rem !important;
    min-height: 20rem !important;
    margin: 0 auto !important;
    padding: 0 0.75rem !important;
    float: none !important;
    overflow: visible !important;
  }

  /* Flatten center column so all 4 banners share one flex row */
  .tvcmsmultibanners.gs-image-gallery-section .tvmultibanner2-center-wrapper {
    display: contents !important;
  }

  .tvcmsmultibanners.gs-image-gallery-section .gs-image-gallery-item,
  .tvcmsmultibanners.gs-image-gallery-section .tvmultibanner1-wrapper,
  .tvcmsmultibanners.gs-image-gallery-section .tvmultibanner2-wrapper,
  .tvcmsmultibanners.gs-image-gallery-section .tvmultibanner3-wrapper {
    position: relative !important;
    flex: 1 1 0% !important;
    min-width: 2.25rem !important;
    width: auto !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    border-radius: 0.4rem !important;
    overflow: hidden !important;
    transition: flex 0.5s ease, min-width 0.5s ease !important;
  }

  .tvcmsmultibanners.gs-image-gallery-section .tvmultibanner.gs-image-gallery:hover .gs-image-gallery-item,
  .tvcmsmultibanners.gs-image-gallery-section .tvmultibanner.gs-image-gallery.has-active .gs-image-gallery-item {
    flex: 0.55 1 0% !important;
  }

  .tvcmsmultibanners.gs-image-gallery-section .tvmultibanner.gs-image-gallery:hover .gs-image-gallery-item:hover,
  .tvcmsmultibanners.gs-image-gallery-section .tvmultibanner.gs-image-gallery.has-active .gs-image-gallery-item.is-active,
  .tvcmsmultibanners.gs-image-gallery-section .gs-image-gallery-item.is-active {
    flex: 3.2 1 0% !important;
    min-width: 9rem !important;
  }

  .tvcmsmultibanners.gs-image-gallery-section .gs-image-gallery-link,
  .tvcmsmultibanners.gs-image-gallery-section .tvbanner-hover-wrapper {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .tvcmsmultibanners.gs-image-gallery-section .gs-image-gallery-item img,
  .tvcmsmultibanners.gs-image-gallery-section .gs-image-gallery-img,
  .tvcmsmultibanners.gs-image-gallery-section .gs-image-gallery-item img.img-responsive {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  .tvcmsmultibanners.gs-image-gallery-section .tvmultibanner-content {
    display: none !important;
  }
}

@media (max-width: 479px) {
  .tvcmsmultibanners.gs-image-gallery-section .tvmultibanner.gs-image-gallery {
    height: 18rem !important;
    min-height: 18rem !important;
  }
}

/* ---- Desktop: 3 equal columns that always fit the viewport ---- */
@media (min-width: 992px) {
  .tvcmsmultibanners.gs-image-gallery-section {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  .tvcmsmultibanners.gs-image-gallery-section .tvmultibanner.gs-image-gallery {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .tvcmsmultibanners.gs-image-gallery-section .tvmultibanner1-wrapper,
  .tvcmsmultibanners.gs-image-gallery-section .tvmultibanner2-center-wrapper,
  .tvcmsmultibanners.gs-image-gallery-section .tvmultibanner2-wrapper.tvmultibanner-4,
  .tvcmsmultibanners.gs-image-gallery-section .col-xl-4 {
    float: none !important;
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .tvcmsmultibanners.gs-image-gallery-section .tvmultibanner2-center-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
  }

  .tvcmsmultibanners.gs-image-gallery-section .gs-image-gallery-item {
    height: auto !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .tvcmsmultibanners.gs-image-gallery-section .gs-image-gallery-item img,
  .tvcmsmultibanners.gs-image-gallery-section .gs-image-gallery-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
}