@layer ds.block {
    .experience-cards__head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-7); }

    .experience-cards__title { margin: 0; font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--font-weight-medium); color: var(--color-heading); }

    .experience-cards__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }

    .experience-cards__card { position: relative; display: flex; gap: var(--space-5); padding: var(--space-7); }

    .experience-cards__tile {
        flex-shrink: 0;
        width: 3.4rem;
        height: 3.4rem;
        border-radius: var(--radius-pill);
        background: var(--brand-sage-tile);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Alternates the icon-tile colour by position (green, clay, clay, green, …) —
       a decorative rhythm, not tied to specific card content. */
    .experience-cards__card:nth-child(4n+2) .experience-cards__tile,
    .experience-cards__card:nth-child(4n+3) .experience-cards__tile { background: var(--brand-clay-tile); }

    .experience-cards__icon { width: 1.5rem; height: 1.5rem; color: var(--color-heading); stroke-width: 1.3; }

    .experience-cards__card:nth-child(4n+2) .experience-cards__icon,
    .experience-cards__card:nth-child(4n+3) .experience-cards__icon { color: var(--brand-clay); }

    .experience-cards__body { display: flex; flex-direction: column; gap: var(--space-2); }

    .experience-cards__card-title { margin: 0; font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--font-weight-bold); color: var(--color-heading); }

    .experience-cards__card-text { font-size: var(--text-small); line-height: var(--line-height-base); color: var(--color-text); }
    .experience-cards__card-text p { margin: 0; }
    .experience-cards__card-text a { color: var(--color-primary); font-weight: var(--font-weight-medium); }

    @media (max-width: 64rem) {
        .experience-cards__grid { grid-template-columns: 1fr; }
    }
}
