.gallery {
  width: 100%;
    display: inline-block;
    grid-template-columns: auto;
    grid-gap: 20px;
    align-items: center;
    margin: 0;
}
.gallery a {
  display: block;
  position: relative;
  height: auto;
  width: 32%;
  padding-right: 0px;
  padding-left: 0px;
  float: left;
  object-fit: contain;
  margin: 4px;
}
.gallery a .details {
  width: 90%;
  height: 90%;
  padding: 5% 8%;
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateY(90deg);
  transform-origin: 50%;
  background: rgba(255, 255, 255, 0.9);
  opacity: 0;
  transition: all 0.4s ease-in;
}
.gallery a:hover .details {
  transform: translate(-50%, -50%) rotateY(0deg);
  opacity: 1;
}
.gallery a img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  transform: translate(0%, 0%);
  /* object-fit: contain; */
  border: 1px solid #980a67;
}

@media screen and (max-width: 776px) {

  .gallery {
    grid-template-columns: 1fr;
  }
}

.gallery-sec-50{margin: 50px 0;}
.gallery-sec-50 .row{width: 70%;margin: auto;}
.gallery-sec-50 ul.nav.nav-tabs {
  border: none;
}

.gallery-sec-50 ul.nav.nav-tabs li {
  float: none;
  display: inline-block;
}
.gallery-sec-50 .nav-tabs>li.active a {
  background: #980a67;
  color: #fff;
  padding: 10px 25px 12px;
  margin: 0 15px;
}

.gallery-sec-50 .nav-tabs>li a:hover {
  color: #980a67;
}

.gallery-sec-50 .nav-tabs>li.active a:hover {
  color: #fff;
}











div.tab-frame input{ display:none;}
div.tab-frame label{ display:block; float:left;padding:5px 10px; cursor:pointer}
div.tab-frame input:checked + label{ background:black; color:white; cursor:default}
div.tab-frame div.tab{ display:none; padding:5px 10px;clear:left}

div.tab-frame input:nth-of-type(1):checked ~ .tab:nth-of-type(1),
div.tab-frame input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
div.tab-frame input:nth-of-type(3):checked ~ .tab:nth-of-type(3){ display:block;}