Create pattern repeating every 3 elements but only on those that contain a div with class

Question

I'm using the Kadence plugin on WordPress and looking to use some custom CSS styling for images. I want a repeating pattern on every div that contains a child element with a particular class.

Below is an example of how the HTML is made up.

<div class="kb-row-layout-wrap">
  <div class="kt-row-column-wrap kt-has-1-columns">
    <figure>
      <img src="image1.jpg">
    </figure>
  </div>
</div>

<div class="kb-row-layout-wrap">
  <div class="kt-row-column-wrap kt-has-2-columns">
    <figure>
      <img src="image1.jpg">
    </figure>
  </div>
</div>

<div class="kb-row-layout-wrap">
  <div class="kt-row-column-wrap kt-has-1-columns">
    <figure>
      <img src="image1.jpg">
    </figure>
  </div>
</div>

<div class="kb-row-layout-wrap">
  <div class="kt-row-column-wrap kt-has-2-columns">
    <figure>
      <img src="image1.jpg">
    </figure>
  </div>
</div>

Here is my CSS to only target the divs with a child div with class of kt-has-2-columns and then making a pattern using nth-of-type.

.kb-row-layout-wrap:has(.kt-has-2-columns):nth-of-type(3n + 1) figure {
  background-color: blue;
}
.kb-row-layout-wrap:has(.kt-has-2-columns):nth-of-type(3n + 2) figure {
  background-color: green;
}
.kb-row-layout-wrap:has(.kt-has-2-columns):nth-of-type(3n + 3) figure {
  background-color: yellow;
}

For some reason the pattern isn't working properly and it seems to target the div with kt-has-1-columns first. What would be the correct CSS? I can't seem to get it right, tried lots of different CSS but had no luck.

I tried to create a pattern by targeting only the divs which had a child with class of .kt-has-2-columns and add a background color to an image. I was expecting the pattern to only apply to these divs but the pattern doesn't always display correctly.