.root {
  background-position: center center;
  background-size: cover;
  color: var(--color-white);
  position: relative;
  display: block;
}

.inner {
  vertical-align: middle;
  width: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-default);
  transition: all 200ms;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
}

.link:hover .overlay,
.link:focus .overlay {
  opacity: 0.6;
}

.center .inner {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: auto;
}
.root {
  background-position: center center;
  background-size: cover;
  color: var(--color-white);
  position: relative;
  display: block;
}

.inner {
  vertical-align: middle;
  width: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-default);
  transition: opacity 200ms;
  will-change: opacity;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
}

.link:hover .overlay,
.link:focus .overlay {
  opacity: 0.6;
}

.center .inner {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: auto;
}
Fix card animation glitch on Chrome and Opera
Fix card animation glitch on Chrome and Opera

The opacity transition of the picture card is making the embedded svg glitchy.
Adding will-change: opacity should make it more stable.
