.in-focus-preview a {
  text-decoration: none;
  color: var(--bs-light-text-emphasis);
  display: block;
}

.in-focus-preview a .bg-grey, .in-focus-preview a .bg-grey {
  background-color: #d7d7d7;
  display: block;
}

.in-focus-preview a:hover .bg-grey, .in-focus-preview a:focus .bg-grey {
  background-color: #b4b4b4;
  display: block;
}

.in-focus-preview a:hover, .in-focus-preview a:focus {
  color: var(--bs-primary);
}

.in-focus-preview a .bg-grey {
  transition: all .3s linear;
}

.in-focus-preview a .img-box {
  position: relative;
  overflow: hidden;
}

.in-focus-preview a .img-hidden {
  visibility: hidden;
  position: relative;
  z-index: 1;
}

.in-focus-preview a .text-box {
  transition: all .2s linear;
  padding: 3rem 3rem 3rem 3rem;
}

@media (min-width: 768px) {
  .in-focus-preview a:hover .text-box, .in-focus-preview a:focus .text-box {
    padding: 3rem 4rem 3rem 2rem;
  }
}

.in-focus-preview a .bg-img-visible {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: scale(1);
  filter: grayscale(100%);
  transition: all .2s linear;
}

.in-focus-preview a:hover .bg-img-visible, .in-focus-preview a:focus .bg-img-visible {
  transform: scale(1);
  filter: grayscale(0%);
}