.picture.yo {
    display: grid;
    background: #000;
}

.picture.yo img {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: photo-fade 48s infinite both;
}

.picture.yo img:nth-child(1) { animation-delay: -4s; }
.picture.yo img:nth-child(2) { animation-delay: 12s; }
.picture.yo img:nth-child(3) { animation-delay: 28s; }

@keyframes photo-fade {
    0%      { opacity: 0; }
    8.33%   { opacity: 1; }
    41.66%  { opacity: 1; }
    50%     { opacity: 0; }
    100%    { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .picture.yo img { animation: none; }
    .picture.yo img:first-child { opacity: 1; }
    .picture.yo img:not(:first-child) { display: none; }
}