.gallery {
  --gap: var(--gutter-sm);
  margin-top: 0;
  margin-bottom: 0;
  /*background-color: red;*/
  height: auto;
  width: 100%;
  max-width: 100%;
  padding: var(--gutter-sm) 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: baseline;
  gap: var(--gap);
  //background-color: red;
  box-sizing: border-box;
  overflow: clip;
}

gallery-thumb {
  /*outline: solid 1px blue;*/
  //display: block !important;
  //flex: 1 1 auto;
  aspect-ratio: 1/1;
  //min-width: 300px;
  //min-height: 300px;
  //max-width: 500px;
  box-sizing: border-box;
  //opacity: 100%;
  //will-change: opacity;
  width: calc(calc(100vw - calc(var(--gap) * var(--num-vw-gaps))) / var(--num-cols));
  //transform-origin: top left;
  //transition-duration: 80ms !important;
  /*max-height: 500px;*/
  //transform: rotateY(45deg);
  animation: 600ms ease-in-out alternate fader;
  transform: scale(100%);
  transition: all 600ms;
  filter: blur(0);
  transition-timing-function: ease-in-out;
}


.hideitem {
  opacity: 0;
  animation: 600ms ease-in-out alternate fader;
  transition: all 600ms;
  transform: scale(0.9);
  }

.invisible {
  display: none;
  }

//.hide {
//  display: none !important;
//  }


@keyframes fader {
  from {
    opacity: 0%;
    transform: scale(0.97);

    }
  10% {
    opacity: 0%;
    }
  to {
    opacity: 1;
    transform: scale(1);
    }
  }
/*

!*  Needed for filters *!

.hide { !* You can play with the seconds to change the "animation" *!
  animation: hide .3s ease 0s 1 normal forwards;
  transform-origin: center;
  }
.show { !* You can play with the seconds to change the "animation" *!
  animation: show .3s ease 0s 1 normal forwards;
  transform-origin: center;
  }

@keyframes hide {
  0%{
    transform: scale(1);
    }
  100% {
    transform: scale(0);
    width: 0;
    height: 0;
    margin: 0;
    }
  }
@keyframes show {
  0%{
    transform: scale(0);
    width: 0;
    height: 0;
    margin: 0;
    }
  100% {
    transform: scale(1);
    }
  }
!*  // Needed for filters *!


*/



//
//.mix {
//
//  opacity: 1;
//  transition: all 0.25s ease;
//  }
//
//.invisible {
//  opacity: 0;
//  transform: scale(0.8);
//  }
//
//.filter-out {
//  display: none !important;
//  }

.red {
  outline: solid 20px red!important;
  outline-offset: -20px!important;
  }

.blue {
  border: dotted 5px blue;
  }

@media screen and (min-width: 1769px) {
  gallery-thumb {
    --num-cols: 5;
    --num-vw-gaps: 6;
    }
  }
@media screen and (max-width: 1768px) {
  gallery-thumb {
    --num-cols: 4;
    --num-vw-gaps: 5;
    }
  }
@media screen and (max-width: 1440px) {
  gallery-thumb {
    --num-cols: 3;
    --num-vw-gaps: 4;
    }
  }
@media screen and (max-width: 991px) {
  gallery-thumb {
    --num-cols: 2;
    --num-vw-gaps: 3;
    }
  }
@media only screen and (max-width: 624px) {
  /* phones */
  gallery-thumb {
    --num-cols: 1;
    --num-vw-gaps: 2;
    }
  }
//@media screen and (max-width: 479px) {
//  gallery-thumb {
//
//    }
//    }