.h-section {
  padding: 0.5vw;
  font-size: 0;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  display: -webkit-box;
  display: flex;
}
.h-section div {
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto;
  width: 200px;
  margin: 0.5vw;
}
.h-section div img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 400px) {
  .h-section div {
    margin: 0;
  }
  .h-section {
    padding: 0;
  }
}
.popup-image-a {
  border: 2px solid white;
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  border-radius: 1rem;
  margin: 0.5vw;
  cursor: pointer;
  overflow: hidden;
  transition-duration: 400ms;
}
.popup-image {
  /* border: 2px solid white; */
  /* --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  border-radius: 1rem;
  margin: .5vw; */
  /* cursor: pointer; */
}
.popup-image:hover {
  /* --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); */
  filter: brightness(50%);
}
.popup-image-a:hover {
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  /* filter: brightness(50%); */
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.popup-image-a:active {
  --tw-scale-x: 20;
  --tw-scale-y: 20;
  --tw-translate-x: 100%;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.overlay-image {
  pointer-events: none;
  top: 0;
  color: white;
  --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04))
    drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
  position: absolute;
  font-size: 18px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  height: -webkit-fill-available;
  width: -webkit-fill-available;
  padding-left: 20px;
  padding-bottom: 10px;
  visibility: hidden;
}