* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: transparent;
}

.hover-swap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
}

.hover-swap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.35s ease;
}

.image-default {
  opacity: 1;
}

.image-hover {
  opacity: 0;
}

.hover-swap:hover .image-hover,
.hover-swap:focus-visible .image-hover {
  opacity: 1;
}

.hover-swap:hover .image-default,
.hover-swap:focus-visible .image-default {
  opacity: 0;
}