Responsive grid with a circular image and cut out div - css

Question

I need some help here.
I am trying to achieve the following layout - a rectangular div containing text on the left and circular image on the right, similar to this (but reverse order). I'm also using Bootstrap for layout.
example
The issue with the solutions proposed on StackOverflow is that they require definining height and width of the circle and I need it to be responsive.
The closest was to use a radial gradient, however the cut out area from the rectangle did not have the same radius as the circle and the gap was too large.
This is what I've got so far:
<div class="cut-out-grid cut-out-grid--alt">
<div class="cut-out-grid__image-section">
<div class="image-rounded">
<div class="image-rounded__wrap">
<img class="image-rounded__image" src="/images/stock/dog.png">
</div>
</div>
</div>
<div class="cut-out-grid__text-section cut-out-grid__text-section--tertiary">
<div class="cut-out-grid__text">
<h3 class="feature-grid__title">lorem ipsum dolor sit amet.</h3>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<span class="button-grid__item">
Lorem ipsum
</span>
</div>
</div>
</div>
</div>
And Sass:
.cut-out-grid {
#extend .row;
#extend .align-items-center;
&__image-section,
&__text-section {
#extend .col-6;
}
}
Any help will be appreciated, thanks! :)

Answer 1

Okay, so I actually ended up finding a solution myself by adding this:
&__image{
border-left: 1.2em #ffcd41 solid;
box-sizing: content-box;
position: absolute;
bottom: -210px;
left: -100px;
}
which seems to have done the trick.
The key was to focus on the image div, not text, as I wanted the cut out shape to be the same radius as the radius of the circle.
This is why previous solutions suggesting radial-gradient on Stack were not applicable in this case.
Box-sizing: content-box; was necessary to ensure the border does not eat into the image.
The border is what creates the cut-out effect. I was experimenting with padding on the image wrap before, but that did not achieve the effect I wanted and made the image smaller despite box-sizing: content-box added. I'm not entirely sure why and need to research this further.
Now I will focus on getting rid of the px values and adding necessary media queries.