.gallery.card-group .card-body img {
  object-fit: cover;
}
.gallery.card-group .row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.gallery.card-group .card-back {
  transform: rotateY(180deg) translateX(-100%);
  position: absolute;
  backface-visibility: hidden;
  transition: transform 300ms;
  transition-timing-function: linear;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  background: white;
  color: black;
}
.gallery.card-group .card.card-flip.h-100:nth-child(4n) {
  margin-right: 0em;
}

.gallery.card-group .card.card-flip.h-100 {
  position: relative;
  overflow: hidden;
  width: 25%;
  width: calc( 25% - 0.75em);
  background: white;
  margin-right: 1em;
  margin-bottom: 1em;
}
@media (max-width: 768px){
  .gallery.card-group .card.card-flip.h-100 {
    width: 50%;
    width: calc( 50% - 0.5em);
  }
  .gallery.card-group .card.card-flip.h-100:nth-child(2n) {
    margin-right: 0em;
  }
}
@media (max-width: 575px){
  .gallery.card-group .card.card-flip.h-100 {
    width: 100%;
    margin-right: 0em;
  }
}
.gallery.card-group h3.card-title {
  padding: 0.5em;
  margin: 0;
  font-size: 1.2em;
}
.gallery.card-group .card-front{
	backface-visibility: hidden;
  width: 100%;
  height: 100%;
}
.gallery.card-group .card.card-flip.h-100:hover .card-back {
  transform: rotateY(0deg);
}
.gallery.card-group .card-button-group{
  bottom: 0;
  right: 0;
  position: absolute;
  display: flex;  
}
.gallery.card-group .card-body{
  width: 100%;
  position: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.gallery.card-group .card-button-group a {
  color: #fff;
  display: block;
  background: #6c757d;
  padding: 0.5em;
  width: 2.3em;
  height: 2.3em;
  margin-right: 0.1em;
  border-radius: 0;
}
.gallery.card-group .card-button-group a:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
}
.gallery.card-group .card-button-group a:focus {
  color: #fff;
  outline: 0.1em dotted !important;
}