@layer ds.block {
    .block-mission-vision {
        position: relative;
        overflow: clip;
        background: var(--color-surface-strong);
        color: var(--color-text-invert);
    }

    .mission-vision__motif { position: absolute; right: calc(-1 * var(--space-6)); bottom: calc(-1 * var(--space-8)); width: 9rem; opacity: 0.28; color: var(--brand-sage); }

    .mission-vision__inner { position: relative; }

    .mission-vision__head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); }

    .mission-vision__kicker {
        margin: 0;
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--brand-apricot);
    }

    .mission-vision__title { margin: 0; font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--font-weight-medium); color: var(--color-text-invert); }

    .mission-vision__grid { display: grid; grid-template-columns: repeat(3, 1fr); counter-reset: mission-vision-item; }

    .mission-vision__item {
        counter-increment: mission-vision-item;
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        padding-inline: var(--space-7);
        border-left: 1px solid color-mix(in srgb, var(--color-text-invert) 16%, transparent);
    }

    .mission-vision__item:first-child { padding-left: 0; border-left: none; }
    .mission-vision__item:last-child { padding-right: 0; }

    .mission-vision__meta { display: flex; align-items: center; gap: var(--space-3); }

    .mission-vision__num { font-family: var(--font-display); font-size: var(--text-h5); color: var(--brand-apricot); }
    .mission-vision__num::before { content: counter(mission-vision-item, decimal-leading-zero); }

    .mission-vision__label { font-size: var(--text-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--brand-sage-light); }

    .mission-vision__text { margin: 0; font-family: var(--font-display); font-size: var(--text-h5); font-weight: var(--font-weight-medium); line-height: 1.45; color: var(--color-text-invert); }

    @media (max-width: 64rem) {
        .mission-vision__grid { grid-template-columns: 1fr; gap: var(--space-6); }
        .mission-vision__item { padding-inline: 0; border-left: none; padding-top: var(--space-5); border-top: 1px solid color-mix(in srgb, var(--color-text-invert) 16%, transparent); }
        .mission-vision__item:first-child { padding-top: 0; border-top: none; }
    }
}