.gallery {
    margin: 0 1em;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 0.5em;
}





/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    body {
        --img-wd: 900px;
        /* background: red; */
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    body {
        --img-wd: 700px;
        /* background: green; */
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    body {
        --img-wd: 600px;
        /* background: blue; */
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    body {
        --img-wd: 500px;
        /* background: orange; */
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    body {
        --img-wd: 200px;
        /* background: pink; */
    }
}


.gallery img {
    width: var(--img-wd);
    border: solid transparent 1px;
    transition: all 0.5s;
    /* animation: zoom-in-zoom-out 1s ease infinite; */
}

@keyframes zoom-in-zoom-out {
    0% {
        scale: 100%;
    }

    50% {
        scale: 150%;
    }

    100% {
        scale: 100%;
    }
}

.gallery>img:hover {
    /* filter: contrast(1.6); */
    filter: drop-shadow(0px 0px 15px black);
    border: solid white 1px;
    scale: 1.2;
    animation: s 0.82s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes s {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}










/* .gallery-img-container {
     width: min(1000px, 100%);
     margin: 0 auto;
     columns: 3 300px;
     column-gap: 1em;
 }

 .gallery-img-container .gallery-img-div img {
     display: block;
     margin-bottom: 1em;
     width: 100%;
 }

 .gallery-blur {
     position: absolute;
     bottom: 0px;
     width: 100%;
     height: 20%;
     text-align: center;
     background: linear-gradient(0deg, #212428 45%, transparent 100%);
 }

 .white-version .gallery-blur {
     background: linear-gradient(0deg, #ecf0f3 45%, transparent 100%);
 }





 .gallery-img-container-pita-ji {
     position: relative;
     height: fit-content;
     width: 100%;
     border: 1px solid;
     overflow: hidden;
 }

 .gallery-img-container-beta-ji {
     width: 100%;
     height: fit-content;
     white-space: nowrap;
     border: 1px solid;
     overflow: hidden;
     animation: tv-div 3s linear infinite;
 }

 @keyframes tv-div {

     0% {
         transform: translate(0, 0);
     }

     100% {
         transform: translate(-50%, 0);
     }

 }

 .gallery-img-container-beta-ji img {
     margin: 0 0.5em;
     width: 80px;
 } */