.gallery{overflow:hidden;padding:0 var(--pad-y-xl)1rem;animation:fadeInAnimation ease 1s;animation-iteration-count:1;animation-fill-mode:forwards;-webkit-user-select:none;-ms-user-select:none;user-select:none;column-count:3;column-gap:1rem;@for $i from 1 through 36{div:nth-child(#{$i}) {
      $h: (
        random(400) + 100) + px;
      height: $h;
      line-height: $h;
    }
  }@media(max-width:768px){column-count: 1; padding: 0 var(--pad-y-md) 1rem var(--pad-y-md);}@media(min-width:768px) and (max-width:1200px){column-count: 2; padding: 0 var(--pad-y-lg) 1rem var(--pad-y-lg);}}@keyframes fadeInAnimation{0%{opacity:0}100%{opacity:1}}.image-container{margin-bottom:8px;overflow:hidden;img { width: 100%; display: block; transition: transform .4s; cursor: pointer; &:hover { transform: scale(1.1); opacity: 0.9; transform-origin: 50% 50%; } }}.image-fullscreen{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.8);-webkit-user-select:none;-ms-user-select:none;user-select:none}.image-fullscreen-content{margin:auto;display:block;width:auto;height:auto;opacity:1!important;max-width:80vw;max-height:80vh;-webkit-animation-name:zoom;-webkit-animation-duration:.5s;animation-name:zoom;animation-duration:.5s}@-webkit-keyframes zoom{from{-webkit-transform:scale(.75)}to{-webkit-transform:scale(1)}}@keyframes zoom{from{transform:scale(.75)}to{transform:scale(1)}}.image-fullscreen-exit-text{position:static;display:block;margin-top:1rem;text-align:center;font-size:1rem;transition:.25s ease;opacity:60%;color:var(--bgcolor);text-decoration:none;&:hover,&:focus { opacity:100%; } @media (max-width:768px) { font-size:0.875rem; }}