#showcase {
    display: block;
    height: 512px;
    margin: 0 auto;
    max-height: 512px;
    position: relative;
    width: 100%;
}

    #showcase .showcase-item {
        animation: fade 36s infinite;
        height: 100%;
        left: 0;
        object-fit: cover;
        position: absolute;
        top: 0;
        width: 100%;
    }

        #showcase .showcase-item:nth-child(1) {
            animation-delay: 27s;
            object-position: 0 30%;
        }

        #showcase .showcase-item:nth-child(2) {
            animation-delay: 18s;
            object-position: 0;
        }

        #showcase .showcase-item:nth-child(3) {
            animation-delay: 9s;
            object-position: 0 40%;
        }

        #showcase .showcase-item:nth-child(4) {
            animation-delay: 0s;
            object-position: 0 30%;
        }

/**
 * See https://www.devtwins.com/blog/css-cross-fading-images for more information.
 *
 * let n = the number of showcase items
 * let a = the duration to show each item
 * let b = the crossfade duration
 * let t = (a + b) * n; This is our animation-duration
 * let d = t / n; This is the delay for each item
 *
 * Assume a = 6s, b = 3s, n = 4, then:
 * t = (6 + 3) * 4 = 36s
 * d = 36 / 4 = 9s
*/
@keyframes fade {
    0% {
        opacity: 1;
    }

    /* (a / t) * 100% */
    16.67% {
        opacity: 1;
    }

    /* (a + b) / t * 100% */
    25% {
        opacity: 0;
    }

    /* 100% - (b / t * 100%) */
    91.67% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}