.splitting-image {
  background-size: 0% 0%;
  position: relative;
  overflow: hidden;
}

.splitting-image img {
  display: block;
}

@supports (--row-size: calc( 100% / 2 )) {
  .splitting-image {
    background-size: cover;
    visibility: hidden;
    --row-size: calc(100% / var(--row-total));
    --col-size: calc(100% / var(--col-total));
  }

  .split-cell {
    background: inherit;
    position: absolute;
    overflow: hidden;
    top: calc(var(--row-size) * var(--row-index));
    left: calc(var(--col-size) * var(--col-index));
    width: calc(0.5px + var(--col-size));
    height: calc(0.5px + var(--row-size));
  }

  .split-cell__inner {
    position: absolute;
    visibility: visible;
    background: inherit;
    width: calc(100% * var(--col-total));
    height: calc(100% * var(--row-total));
    transform: translate(
      calc(-1 * var(--col-size) * var(--col-index)),
      calc(-1 * var(--row-size) * var(--row-index))
    );
  }
}