/* Image Gallery $(ID) */
#gallery$(ID) #gallery$(ID)-container {
          position: relative;
             width: 100%;
            height: 0px;
    padding-bottom: 56.7%; /* 16/9 ratio */
  background-color: blue;

  margin-top: 0px;
  margin-left: 0px
  margin-bottom: 0px;
  margin-right: 0px;

  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;

         font-size: 28pt;
             color: #f44;
}
/*
  padding-bottom: 0px;

*/

/* (note) [10Oct2023] works in Safari, not Firefox */
.subdiv_outer:has(#gallery$(ID))  {
    display: inline;
    background-color: #0000;
}
.subdiv_inner:has(#gallery$(ID))  {
    background-color: #0000;
}
.subdiv_outer:has(#gallery$(ID)) .subdiv_title  {
    width: 75%;
     margin: auto;
}
/*
    font-size: 30pt;
    background-color: #070;
  max-width: 75%;
display: block;
display: block;
    width: 75%;
    width: 100%;
    font-size: 30pt;
*/

#gallery$(ID) #gallery$(ID)-container #gallery$(ID)-content {
  position: absolute;
       top: 0px;
     right: 0px;
    bottom: 0px;
      left: 0px;
    height: 100%;
   display: flex;
  
  scroll-snap-type: x mandatory;
        overflow-x: scroll;
   scroll-behavior: smooth;

  margin-top: 0px;
  margin-left: 0px
  margin-bottom: 0px;
  margin-right: 0px;
  padding-top: 0px;
  padding-left: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
}

#gallery$(ID) .img {
  border: 0px;
}

#gallery$(ID) #gallery$(ID)-container #gallery$(ID)-content .gallery__item {
              width: 100%;
             height: 100%;
        flex-shrink: 0;
  scroll-snap-align: start;
   scroll-snap-stop: always;
           position: relative;

  margin-top: 0px;
  margin-left: 0px
  margin-bottom: 0px;
  margin-right: 0px;
  padding-top: 0px;
  padding-left: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
}

#gallery$(ID) #gallery$(ID)-container #gallery$(ID)-content .gallery__item img {
           display: block;
             width: 100%;
            height: 100%;
        object-fit: contain;
  background-color: white;

  margin-top: 0px;
  margin-left: 0px
  margin-bottom: 0px;
  margin-right: 0px;
  padding-top: 0px;
  padding-left: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
}


#gallery$(ID):not(:hover) .gallery-arrow {
  opacity: 0;
}


#gallery$(ID):not(:hover) #gallery$(ID)-controls {
  opacity: 0;
}

#gallery$(ID) #gallery$(ID)-container #gallery$(ID)-controls {
          display: flex;
            width: 100%;
  justify-content: center;
          z-index: 4;
         position: absolute;
            right: 0;
           bottom: 1em;
             left: 0;
       text-align: center;
}

#gallery$(ID) #gallery$(ID)-container #gallery$(ID)-controls .gallery-controls__dot {
             width: 0.85em;
            height: 0.85em;
     border-radius: 50%;
           outline: none;
  background-color: #fff;
           opacity: .3;
            cursor: pointer;
        transition: opacity 200ms ease;
}

#gallery$(ID) #gallery$(ID)-container #gallery$(ID)-controls .gallery-controls__dot:hover {
  opacity: .8;
}

#gallery$(ID):not(:hover) #gallery$(ID)-container #gallery$(ID)-toggleFullscreenVisual {
  opacity: 0;
}

#gallery$(ID) #gallery$(ID)-container #gallery$(ID)-toggleFullscreenVisual {
   display: block;
     width: 36px;
    height: 40px;
  position: absolute;
       top: 10px;
     right: 10px;
  
         font-size: 28pt;
             color: #7aaa;
            cursor: pointer;
           z-index: 4;
  background-color: white;
           opacity: .05;
        transition: opacity 200ms ease;
} 

#gallery$(ID) #gallery$(ID)-container #gallery$(ID)-toggleFullscreenVisual:hover {
  opacity: .8;
}

#gallery$(ID)-toggleFullscreen {
  display: none;
}

/* (note) vh = viewport relative height https://developer.mozilla.org/en-US/docs/Web/CSS/length */
/* ~ #gallery$(ID)-main */
#gallery$(ID)-toggleFullscreen:checked  {
    height: 100vh;
  overflow: hidden;
}

/* ~ #gallery$(ID)-main */
#gallery$(ID)-toggleFullscreen:checked  #gallery$(ID) #gallery$(ID)-container {
        position: absolute;
             top: 0px;
           right: 0px;
          bottom: 0px;
            left: 0px;
          height: 100%;
  padding-bottom: 0px;
}

/* ~ #gallery$(ID)-main */
#gallery$(ID)-toggleFullscreen:checked  #gallery$(ID) #gallery$(ID)-toggleFullscreenVisual {
           opacity: .6;
  background-color: grey;
          position: fixed;
}

/* ~ #gallery$(ID)-main */
#gallery$(ID)-toggleFullscreen:checked  #gallery$(ID) #gallery$(ID)-controls {
  position: fixed;
}

/* ~ #gallery$(ID)-main */
#gallery$(ID)-toggleFullscreen:checked  #gallery$(ID) #gallery$(ID)-controls .gallery-controls__dot {
           opacity: .6;
  background-color: grey;
}

#gallery$(ID)-main #gallery$(ID)-content {
  padding: 0px 36px;

}

#gallery$(ID)-main #gallery$(ID)-content p {
  margin-top: 36px;

}

#gallery$(ID)-main {
    padding: 0px;
     margin: 0px;
  max-width: 75%;
     margin: auto;
}
