html.overlay-shown {
    overflow: hidden !important;
  }

  #overlay,
  #gallery-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: auto;
    --padding-top: max(50px, calc(100 * var(--px)));
    --padding-bottom: var(--padding-top);
  }
  
  #gallery-overlay {
    z-index: 9999;
  }
  
  #overlay::after,
  #gallery-overlay::after {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0E0E0E;
    opacity: 0;
    transform: none;
    transform-origin: center bottom;
    transition: 1000ms var(--ttf-6);
    transition-property: opacity, transform;
  }
  
  #overlay.shown::after,
  #gallery-overlay.shown::after {
    opacity: 0.94;
    transform: none;
  }
  
  #overlay > .inner,
  #gallery-overlay > .inner {
    position: relative;
    z-index: 2;
  }
  
  #overlay .overlay-body,
  #gallery-overlay .overlay-body {
    position: relative;
    opacity: 0;
    color: var(--base-color-white);
    height: 100vh;
    box-sizing: border-box;
    padding-block: var(--padding-top) var(--padding-bottom);
  }
  
  #gallery-overlay .module-image-grid-slider .module-inner {
    padding-top: 0;
  }
  
  #gallery-overlay .module-image-grid-slider .sn-slider-slide {
    height: calc(100vh - (var(--padding-top) + var(--padding-bottom)));
  }
  
  #overlay.shown-2 .overlay-body,
  #gallery-overlay.shown-2 .overlay-body {
    opacity: 1;
    transition: 1500ms var(--ttf-2);
    transition-property: opacity, transform;
    transition-delay: 500ms;
  }
  
  #gallery-overlay.is-fading-out {
    interactivity: inert;
    pointer-events: none;
  }
  
  #gallery-overlay.is-fading-out .overlay-body {
    opacity: 0 !important;
    transition: none !important;
  }

  #gallery-overlay .overlay-header {
    opacity: 0; 
  }
  
  #gallery-overlay.shown-2 .overlay-header {
    opacity: 1;
    transition: opacity 1000ms 150ms var(--ttf-2);
  }
  
  #gallery-overlay.is-fading-out .overlay-header {
    opacity: 0 !important;
    transition: none !important;
  }
  
  #gallery-overlay .overlay-header {
    position: relative;
  }
  
  #gallery-overlay .overlay-header .site-title--overlay {
    position: fixed;
    top: var(--page-padding-top);
    left: var(--page-padding-left);
    z-index: 10;
  }
  
  #gallery-overlay .overlay-header .site-title--overlay svg path {
    fill: var(--base-color-white);
  }
  
  
  
  #gallery-overlay .overlay-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    height: var(--padding-top);
  }
  
  #gallery-overlay .overlay-headline {
    color: var(--base-color-white);
    position: absolute;
    left: var(--page-padding-left);
    top: 50%;
    transform: translateY(-50%);
  }
  
  
  
  
  
  
  
  #gallery-overlay .btn-close-gallery-overlay {
    position: absolute;
    top: 50%;
    right: var(--page-padding-left);
    transform: translateY(-50%);
    z-index: 10;
    --color: var(--base-color-white);
    border: 0;
  }
  
  #gallery-overlay .btn-close-gallery-overlay span.label {
    position: absolute;
    top: -10000px;
    left: -10000px;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  
  
  
  
  
  @media (max-width: 500px) {
    
    #overlay,
    #gallery-overlay {
      --padding-bottom: 4px;
    }
    
    #gallery-overlay .overlay-header {
      position: fixed;
      z-index: 100;
      background: #0E0E0E;
    }

    
    #gallery-overlay {
      
      .module-image-grid-slider {
        padding-bottom: 4px;
      }
      
      .module-image-grid-slider .sn-slider {
        padding-bottom: 0;
      }
    
      .module-image-grid-slider .sn-slider:not(.sn-slider-ghost) {
        display: none;
      }
      
      .module-image-grid-slider .sn-slider-slides {
        flex-flow: column nowrap;
        width: 100%;
        box-sizing: border-box;
        gap: 4px;
      }
      
      .module-image-grid-slider .sn-slider-ghost {
        opacity: 1;
      }
          
      .module-image-grid-slider .sn-slider-slide {
        width: auto;
        display: flex;
        flex-flow: column nowrap;
        gap: 4px;
        height: auto;
      }
      
      .module-image-grid-slider .sn-slider-slide[data-layout] figure {
        position: static;
        width: 100%;
        height: auto;
      }
      
    }
    
    
    
  }