.responsive-img{ width: 100%; max-width: 468px; height: auto; }

.geo-button {
  position: relative;
  width: 88px;
  height: 31px;
  display: inline-block;
  overflow: hidden;
  border-top:    2px solid #fff;
  border-left:   2px solid #fff;
  border-right:  2px solid #000;
  border-bottom: 2px solid #000;
  box-sizing: border-box;
}
.geo-button img {
  width: 100%; height: 100%;
  display: block;
  transition: transform .1s;
  position: relative;
  z-index: 1;
}
.geo-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background .1s;
  z-index: 2;
}
.geo-button:hover {
  border-top:    2px solid #000;
  border-left:   2px solid #000;
  border-right:  2px solid #fff;
  border-bottom: 2px solid #fff;
}
.geo-button:hover img        { transform: translate(-1px,-1px); }
.geo-button:hover::after     { background: rgba(0,0,0,.1); }

.gif-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.gif-container a   { flex: 0 1 auto; display: inline-block; }
.gif-container img { max-width: 100%; height: auto; display: block; }