.engagement-card {
    display: flex;
    flex-direction: column;
    /* The lower edge keeps more room than the upper one, 50px → 63px. */
    padding: 3.125rem 2rem clamp(3.125rem, 3.125rem + (100vw - 24.375rem) * 0.009716, 3.9375rem);
    border-radius: var(--sav-radius);
    background-color: var(--sav-color-hellgrau);

    /* `[hidden]` is a user agent rule and loses to the author `display` above. */
    &[hidden] {
        display: none;
    }
}

.engagement-card__title {
    color: var(--sav-color-dunkelblau);

    /* Without a title the text starts at the card's own padding instead. */
    & + .engagement-card__text {
        margin-block-start: 1.5rem;
    }
}

.engagement-card__footer {
    display: flex;

    /* The button is as wide as its label rather than as wide as the card. */
    flex-direction: column;
    align-items: flex-start;
    /* Logo → button, 32px → 60px */
    gap: clamp(2rem, 2rem + (100vw - 24.375rem) * 0.020927, 3.75rem);
    /* At the lower edge however long the text above runs, so logo and button of the cards in
       a row end at the same height; the padding is the least distance the text keeps. */
    margin-block-start: auto;
    /* 32px → 48px */
    padding-block-start: clamp(2rem, 2rem + (100vw - 24.375rem) * 0.011958, 3rem);
}

/* One height for every logo whatever proportion it arrives in, so the button below it starts
   at the same place in every card. 24px → 40px */
.engagement-card__logo {
    block-size: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.011958, 2.5rem);
    inline-size: auto;
    max-inline-size: 100%;
    /* A logo wide enough to reach the card's width is contained rather than stretched, and
       keeps the lower edge the others stand on. */
    object-fit: contain;
    object-position: left bottom;
}