:root{
    --gallery-padding-y: 56px; 
    --thumb-height: 256px;  
    --anim-dur: .28s;  
  }

  .gallery-section{ padding: var(--gallery-padding-y) 0; }

  .gallery-grid.row{ display:flex; flex-wrap:wrap; }

  .gallery-grid .col-sm-6{ flex:0 0 50%; max-width:50%; }
  
  @media (min-width: 992px){
    .gallery-grid .col-lg-4{ flex:0 0 33.333333%; max-width:33.333333%; }
  }

  .gallery-item{
    transition-property: opacity, transform;
    transition-duration: var(--anim-dur);
    transition-timing-function: ease;
    will-change: opacity, transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    contain: layout paint;
    margin-bottom: 24px;
  }
  .gallery-item.will-show{ opacity:0; transform:translateZ(0) scale(.96); }
  
  .gallery-item.is-hiding{ opacity:0; transform:translateZ(0) scale(.96); }
  
  .gallery-item.is-hidden{ display:none !important; }
  
  .gallery-item.is-hidden-limit{ display:none !important; }
  
  @media (prefers-reduced-motion: no-preference){
    .gallery-item[data-stagger]{ transition-delay: var(--stagger, 0ms); }
  }

  .thumbnail-modern{
    position:relative; display:block; width:100%;
    height: var(--thumb-height); overflow:hidden;
  }
  .thumbnail-modern-image{
    position:absolute; inset:0; width:100% !important; height:100% !important;
    object-fit:cover; object-position:center; display:block;
  }
  .thumbnail-modern-dummy{ display:none !important; }

  .gallery-section .thumbnail-modern{ position: relative; }
  
  .gallery-section .thumbnail-modern-caption{
    position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
    z-index:2; display:flex; align-items:center; justify-content:center;
    background: rgba(0,0,0,.28);
    opacity:0; transition: opacity .2s ease;
  }
  .gallery-section .thumbnail-modern-caption .icon{
    color:#fff; font-size:28px; line-height:1; text-shadow:0 1px 2px rgba(0,0,0,.4);
  }
  .gallery-section .thumbnail-modern:hover .thumbnail-modern-caption,
  .gallery-section .thumbnail-modern:focus-visible .thumbnail-modern-caption{ opacity:1; }
  
  @media (hover: none){
    .gallery-section .thumbnail-modern-caption{ opacity:.12; }
    .gallery-section .thumbnail-modern:active .thumbnail-modern-caption{ opacity:.35; }
  }