.story {
    background: var(--button);
    color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 1rem;
    padding: 5rem 1rem;
    border-radius: 20rem;
}

.story h1 {
    font-family: var(--font-kaligrafi);
    font-size: 4rem;
    word-spacing: 0.5rem;
    line-height: 3rem;
    margin-bottom: 2rem;
    margin-top: -2rem;
}

.content-story {
    width: 100%;
    overflow: hidden;
}

.story-slides {
    display: flex;
    align-items: stretch;
}

.story-slides.active {
    animation: story-carousel 20s infinite;
}

.story-slide {
    flex: 0 0 100%;
    box-sizing: border-box;
    padding: 0 0.25rem;
}

.story-slide img {
    width: 80%;
    height: auto;
    border-radius: 1rem;
    display: block;
    margin: auto;
}

.story-slide p {
    font-family: var(--font-biasa);
    font-size: 1rem;
    padding: 0 2rem;
    margin-top: 1rem;
}

@keyframes story-carousel {
    /* slide 1 */
    0%, 20%   { transform: translateX(0%); }
    /* slide 2 */
    25%, 45%  { transform: translateX(-100%); }
    /* slide 3 */
    50%, 70%  { transform: translateX(-200%); }
    /* slide 4 */
    75%, 95%  { transform: translateX(-300%); }
    /* kembali ke awal (akan “snap” saat loop) */
    100%      { transform: translateX(0%); }
}