body {
    font-family: sans-serif;
  }
  
  .outer-wrapper {
    --animation-delay: .2s;
    --animation-count: 1;
    position: relative;
  }
  
  .credits {
    position: absolute;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;
    gap: 0.5rem 2rem;
    justify-content: space-between;
    width: 100%;
    padding: 0.3rem 0.5rem;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    animation: credits-show 1s calc(var(--animation-delay) + var(--max-duration) * var(--animation-count)) linear forwards;
  }
  .credits a {
    color: #fc0;
    text-decoration: none;
  }
  .credits a:hover {
    text-decoration: underline;
  }
  .credits .location, .credits .photo-link {
    font-size: 0.85em;
    opacity: 0.7;
  }
  
  .info {
    position: absolute;
    top: 60%;
    bottom: auto !important;
    right: 2rem;
    left: auto !important;
    max-width: 250px;
    padding: 0.5rem;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    animation: credits-show 1s calc(var(--animation-delay) + var(--max-duration) * var(--animation-count)) linear forwards;
  }
  
  @keyframes credits-show {
    to {
      opacity: 1;
    }
  }
  .img-split-wrapper {
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .img-split-item {
    width: calc(100% / var(--items));
    height: 100%;
    overflow: hidden;
    background-color: #ddd;
    opacity: 0;
    animation: var(--duration) ease-in var(--animation-delay) var(--animation-count) alternate forwards splits-show;
  }
  .img-split-item > div {
    position: absolute;
    left: calc(-1 * var(--idx) * 100dvw / var(--items));
    width: 100dvw;
    height: 100%;
    background-image: var(--img);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .img-split-item:nth-child(even) {
    transform: translateY(-101%);
  }
  .img-split-item:nth-child(odd) {
    transform: translateY(101%);
  }
  .img-split-item::after {
    position: absolute;
    inset: 0;
    display: block;
    content: "";
    background-color: var(--color);
    opacity: 1;
    animation: calc(var(--max-duration) * var(--animation-count) * .5) linear var(--animation-delay) forwards color-hide;
  }
  
  @keyframes splits-show {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes color-hide {
    to {
      opacity: 0;
    }
  }