.actie_blok .actie_blok_layout {
    display: flex;
}

/* Reuse palette colors and contrast, without the shared white framed-block border. */
.jumbotron.actie_blok .actie_blok_layout {
    border: 0;
}

.actie_blok .actie_blok_afbeelding {
    /* Figma: a 300-wide image in the 1288-wide banner; ACF's 40% is editor-only. */
    flex: 0 0 calc(100% * 300 / 1288);
    aspect-ratio: 300 / 200;
    position: relative;
}

.actie_blok .actie_blok_afbeelding picture {
    display: flex;
    width: 100%;
    height: 100%;
}

.actie_blok .actie_blok_afbeelding img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.actie_blok .actie_blok_content {
    flex: 1;
    /* Allow this flex item to shrink below its longest word or link. */
    min-width: 0;
    align-self: center;
    padding: var(--spacing_3) calc(var(--spacing_3) * 1.5);
    hyphens: auto;
}

.actie_blok .actie_blok_content .button {
    max-width: 100%;
}

/* The compact banner uses 15px text gaps at the desktop 30px spacing token. */
#content .actie_blok .actie_blok_content > * + * {
    margin-top: calc(var(--spacing_3) / 2);
}

@media (max-width:767px) {
    .actie_blok .actie_blok_layout {
        flex-direction: column;
    }

    .actie_blok .actie_blok_afbeelding {
        flex-basis: auto;
    }

    .actie_blok .actie_blok_content {
        align-self: stretch;
        padding: var(--spacing_3);
    }
}