How to continue the background colors of a two-line grid with headline and description in a spanned image cell

I have a component that consists of two rows with a headline and a description. There is also an image cell that spans both rows. Both the headline and the description have a background color. The problem is that I haven't yet figured out how to continue the background colors.

So here is what I have right now. (See also this Stackblitz example.)

And here is what I want to achieve.

The difficulty lies in the fact that the headline or description have different lengths depending on the content in the content management system.

So it can also look like this, for example

I tried using a grid with template areas with the following HTML and CSS

:root {
    --color-primary: lightblue;
    --color-secondary: orange;
    --color-tertiary: lightgreen;
}

.component {
    display: grid;
    grid-template-areas: 'headline image' 'description image';
    grid-template-rows: auto auto;
    max-width: 960px;
    outline: 2px dashed orchid;
}

.text--headline {
    grid-area: headline;
    background-color: var(--color-primary);
}

.text--description {
    grid-area: description;
    background-color: var(--color-secondary);
}

.image {
    grid-area: image;
    display: grid;
    align-content: center;
    justify-content: center;
    min-width: 200px;
    min-height: 400px;
}

.image-fake {
    width: 100px;
    height: 200px;
    padding: 8px;
    background-color: var(--color-tertiary);
}

/* For demo purposes */
.text {
    padding-inline: 8px;
}

<div class="component">
    <div class="text text--headline">
      <h1>Split Background Headline</h1>
    </div>
    <div class="text text--description">
      <p>Split Background Description</p>
    </div>
    <div class="image">
      <div class="image-fake">This is an image</div>
    </div>
</div>

For the full code see the already mentioned Stackblitz.

No solution is to use pseudo-classes with position: absolute as then I have to calculate the percentage, which is always shaky.

My hope was that subgrid could help here, for example

    .image {
        grid-area: image;
        /* ... */

        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
    }

but this breaks the layout.

Maybe I don't understand subgrid here enough, maybe there is another solution possible.

So do you have any hint?

Solution

Using the technique I am detailing here: https://css-tip.com/overflowing-background/

.text--headline {
  border-image: conic-gradient(var(--color-primary) 0 0) fill 0//0 100vw 0 0;
}

.text--description {
  border-image: conic-gradient(var(--color-secondary) 0 0) fill 0//0 100vw 0 0;
}

Full code

:root {
  --color-primary: lightblue;
  --color-secondary: orange;
  --color-tertiary: lightgreen;
}

.component {
  display: grid;
  grid-template-areas: 'headline image' 'description image';
  grid-template-rows: auto auto;
  max-width: 960px;
  outline: 2px dashed orchid;
  overflow: hidden;
}

.text {
  padding-inline: 8px;
}

.text--headline {
  grid-area: headline;
  border-image: conic-gradient(var(--color-primary) 0 0) fill 0//0 100vw 0 0;
}

.text--description {
  grid-area: description;
  border-image: conic-gradient(var(--color-secondary) 0 0) fill 0//0 100vw 0 0;
}

.image {
  grid-area: image;
  display: grid;
  align-content: center;
  justify-content: center;
  min-width: 200px;
  min-height: 400px;
}

.image-fake {
  width: 100px;
  height: 200px;
  padding: 8px;
  background-color: var(--color-tertiary);
}

<main>
  <div class="component">
    <div class="text text--headline">
      <h1>
        Split Background Headline
      </h1>
    </div>
    <div class="text text--description">
      <p>
        Split Background Description
      </p>
    </div>
    <div class="image">
      <div class="image-fake">This is an image</div>
    </div>
  </div>
</main>