#home {
  background-color: #0a0a0a;
  color: #eee;
  padding-top: 5rem;
}
#home article {
  grid-column-start: 5;
  grid-column-end: 7;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
#home .usp-list {
  list-style-type: "✓ ";
  margin-left: 1rem;
}
#home .media-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 100vh;
  position: relative;
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
}
#home .media-compare > figure {
  overflow: hidden;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
}
#home .media-compare > figure >canvas {
  width: 100%;
  height: auto;
  opacity: 0.01;
  transition: opacity .5s;
}
#home .media-compare > figure >canvas.shown {
  opacity: 1;
}
#home .media-compare > figure img,
#home .media-compare > figure video {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
}
#home .media-compare > figure img.current,
#home .media-compare > figure video.current {
  display: block;
}
#home .media-compare-divider {
  position: absolute;
  top: 1rem;
  left: 50%;
  bottom: 1rem;
}
#home .media-compare-divider::before {
  content: "";
  border-left: .5px solid white;
  position: absolute;
  inset: 0;
}
#home .media-compare-divider-handle {
  position: absolute;
  touch-action: none;
  top: 50%;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  border: 1px solid #fff;
  background: #ffffff;
  transform: translateX(-50%) translateY(-50%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: zoom .15s;
}
#home .media-compare-divider-handle:hover {
  zoom: 1.25;
}
#home .media-compare-divider-handle >span {
  user-select: none;
  color: #000;
  transform: translateX(0.2em);
  font-size: .8em;
  line-height: 0;
}
#home .media-compare-divider-handle >span:first-child {
  transform: translateX(-0.2em);
}
#home .media-compare-divider-handle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: transparent;
}
#home .media-compare.--active .media-compare-divider-handle::before {
  inset: -150px;
}
@media screen and (max-width: 1365px) {
  #home article {
    grid-column-start: 4;
  }
  #home .media-compare {
    grid-column-end: 4;
  }
}
@media screen and (max-width: 700px) {
  #home article {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  #home .media-compare {
    grid-column-start: 1;
    grid-column-end: 2;
    overflow-x: hidden;
  }
}
@media screen and (max-width: 700px) and (orientation: portrait) {
  #home .media-compare {
    aspect-ratio: 1;
  }
}