.wp-block-acf-story.has-background {
    padding: var(--wp--preset--spacing--30);
}
.story-gallery {
    display: none;
}
.story-grid .story-section {
    padding: var(--wp--preset--spacing--50, 40px) 0;
    max-width: var(--md-text-width, 700px);
    margin: 0 auto;
    display: grid;
    gap: var(--wp--preset--spacing--30);
}
.story-section:first-child {
    padding-top: 0;
}
.story-section:last-child {
    padding-bottom: 0;
}
.wp-block-acf-story-media {
    aspect-ratio: 3/2;
}
.wp-block-acf-story-media :is(video,img) {
    height: 100%;
    width: 100%;
    object-fit: cover;
    margin: 0;
}
.wp-block-acf-story-content,
.wp-block-acf-story-content .acf-innerblocks-container  {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
}


.wp-block-acf-story {
    /* shorthand: name / type */
    container: story-container / inline-size;
}

@container story-container (min-width:768px) {
    .js .story-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--wp--preset--spacing--50, 40px);
    }
    .js .story-gallery {
        display: block;
        height: 100px;
        min-height: min(100%, var(--view-height, 100vh));
        position: sticky;
        top: 0;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 100%;
    }
    .js .story-gallery figure.wp-block-acf-story-media {
        grid-column: 1/2;
        grid-row: 1/2;
        margin: 0;
        aspect-ratio: unset;
    }

    /* Med Stick Top */
    .js .md-stick-top .story-gallery {
        top: var(--wp--preset--spacing--50);
        min-height: min(100%, calc(var(--view-height, 100vh) - 2*var(--wp--preset--spacing--50)));
    }
    /* Lrg Stick Top */
    .js .lg-stick-top .story-gallery {
        top: var(--wp--preset--spacing--60);
        min-height: min(100%, calc(var(--view-height, 100vh) - 2*var(--wp--preset--spacing--60)));
    }

    .js .story-grid.image-right .story-gallery {
        order: 2;
    }

    .js .story-section {
        min-height: var(--inner-height);
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: calc(0.9 * var(--view-height, 100vh));
    }
    .js .story-section:first-child .wp-block-acf-story-content {
        padding-top: var(--wp--preset--spacing--50, 40px);
    }
    .js .story-section:last-child .wp-block-acf-story-content {
        padding-bottom: var(--wp--preset--spacing--50, 40px);
    }
    .js .story-section figure.wp-block-acf-story-media {
        display: none;
    }

    /* Before */
    .js .story-section {
        opacity: .5;
        transition: opacity .3s ease;
    }
    .js .story-gallery figure {
        transition: opacity .3s ease;
        opacity: 1;
    }
    .js .story-gallery figure.after-item {
        opacity: 0;
    }
    .js .story-grid.before .story-gallery figure:first-child,
    .story-grid.before .story-section:first-child {
        opacity: 1;
    }

    /* Active */
    .js .story-gallery figure.active,
    .js .story-section.active {
        opacity: 1;
    }

    /* After */
    .js .story-grid.after .story-gallery figure:last-child,
    .js .story-grid.after .story-section:last-child {
        opacity: 1;
    }
}