/* 1. GLOBAL STICKY PERMISSION
Ensures parent elements do not block the sticky effect by overriding overflow hidden */
html.html_stretched,
html.html_stretched body#top,
#top #wrap_all,
#top #main {
overflow: visible !important;
}



@media only screen and (min-width: 768px) {
  /* 2. MAIN CONTAINER
  We use CSS Grid for the 65% / 1fr split */
  #top .avia-gallery.av-gallery-sticky-scroll.besides {
    display: grid !important;
    grid-template-columns: 65% 1fr !important;
    gap: 30px !important;
    align-items: start !important; /* Crucial: prevents big-wrapper from stretching to full height */
    overflow: visible !important;
    position: relative !important;
    width: 100% !important;
  }

  /* 3. STICKY WRAPPER (Left Column) */
  #top .avia-gallery.av-gallery-sticky-scroll.besides .avia-gallery-big-wrapper {
    grid-column: 1 !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 100px !important; /* Adjust based on your header height */
    z-index: 100 !important;
    height: auto !important;
    margin: 0 !important;
    background: #ffffff !important;
  }

  /* 4. IMAGE ELEMENT */
  #top .avia-gallery.av-gallery-sticky-scroll.besides .avia-gallery-big {
    position: relative !important;
    display: block !important;
    height: auto !important;
  }

  #top .avia-gallery.av-gallery-sticky-scroll.besides .avia-gallery-big img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 80vh;
    object-fit: contain;
  }

  /* 5. THUMBNAILS (Right Column) - ruled here by grid-layout  */
  #top .avia-gallery.av-gallery-sticky-scroll.besides .avia-gallery-thumb {
    position: relative !important;
    z-index: 10 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 100vh;
    display: grid !important;
    align-content: start;
    grid-auto-flow: row;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
  }
  #top .avia-gallery.av-gallery-sticky-scroll.besides .avia-gallery-thumb a {
    width: unset !important;
  }
}


/* 5a. THUMBNAILS (Right Column) - f.e. for iPad  */

@media only screen and (min-width: 768px) and (orientation: portrait) {
  #top .avia-gallery.av-gallery-sticky-scroll.besides .avia-gallery-thumb {
    grid-template-columns: repeat(2, 1fr);
  }
}