/* GIF square styles */

.gif-square {
    position: absolute;
    display: inline-block;
    background: rgba(255,255,255,0.85);
    border: 2px solid #222;
    box-sizing: border-box;
    padding: 8px;
    z-index: -100;
    min-width: 0;
    min-height: 0;
    touch-action: manipulation;
}

.gif-square img {
    filter: grayscale(1);
    transition: filter 0.3s;
    touch-action: manipulation;
}

.gif-square:hover img,
.gif-square:active img {
    filter: none;
}

@media (max-width: 768px) {
    .gif-square {
        padding: 6px;
        border-width: 1.5px;
    }
    
    .gif-square {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    .gif-square {
        padding: 4px;
        border-width: 1px;
    }
}