.about-hero-img {
    position: relative;
    overflow: hidden;
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.06);
    /* slightly zoomed out state */
    transition:
        opacity 1.4s cubic-bezier(0.45, 0, 0.25, 1),
        transform 1.4s cubic-bezier(0.45, 0, 0.25, 1);
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide.active {
    opacity: 1;
    transform: scale(1);
}

/* zooms in gently */
.slide.prev {
    opacity: 0;
    transform: scale(0.97);
}

/* shrinks as it fades out */