.img-grid-20 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  gap: 1rem;
}

.img-grid-20 img {
  object-fit: contain;
  width: 100%;
  cursor: pointer;
  transition: filter 0.5s ease-in-out;
}

.img-grid-20 img.filtered {
  filter: grayscale(100%) blur(1px);
}

.pills-20 > .nav-link {
  border-radius: 5rem;
  margin: 0.25rem 0;
}

.img-button-20 {
  height: 1.5rem;
  vertical-align: middle;
  margin-right: 0.5rem;
}

.element-20 .tab-content {
  height: 100%;
}

.nav-link:hover .img-button-20,
.active .img-button-20{
  /* filter:invert(100%) sepia(9%) saturate(4337%) hue-rotate(329deg) brightness(123%) contrast(106%); */
}
.element-20 .pills-20 button.nav-link{
  margin-left: 5px;
  background-color: transparent;
  margin-right: 5px;
}

.vertical-divider {
  padding: 0;
  width: 1px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.tab-content > .active{
  display: flex;
}
.img-button-20{
  
  display: inline-block;
  mask-size: contain;
  -webkit-mask-size: contain;
  display: inline-block;
  -webkit-mask-repeat:no-repeat;
  mask-position: center center;
  -webkit-mask-position: center center;
}
.nav-link:hover .img-button-20, .active .img-button-20 {
  /* filter: invert(100%) sepia(9%) saturate(4337%) hue-rotate(
329deg) brightness(123%) contrast(106%); */
}