Hollow circle items - html

Question

I would like to achieve circle cuts/hollows in the layer that covers the background images.
I have the background image covered with white tint (opacity 60%).
On the background, I have 3 circles that include text.
How can I cut "rings" in the white tint?
I would like to make hollows/cuts in the white tint like here:
My code looks now as below:
body {
margin: 0;
}
.block {
position: relative;
width: 100%;
}
.bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -3;
}
.bg:before {
content: "";
background: #ffffff;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.bg img {
display: block;
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
}
.wrapper {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
gap: 0 30px;
}
.item {
background: #aaaaaa;
width: 150px;
height: 150px;
border-radius: 100%;
display: flex;
flex-direction: columns;
justify-content: center;
align-items: center;
padding: 10px;
}
.item h2 {
font-family: Arial, sans-serif;
font-size: 15px;
color: #000000;
text-align: center;
margin: 0;
}
<section class="block">
<div class="bg">
<img src="https://i.picsum.photos/id/98/1920/1080.jpg?hmac=38vHAR4QCfR9YGpaasbQ0h390ZJnDlnQqzv3xTDF6ik" alt="" />
</div>
<div class="wrapper">
<div class="item">
<div class="item__content">
<h2>Heading 1</h2>
</div>
</div>
<div class="item">
<div class="item__content">
<h2>Heading 2</h2>
</div>
</div>
<div class="item">
<h2>Heading 3</h2>
</div>
</div>
</section>

Answer 1

You can do it like below. I have simplified the code as well:
body {
margin: 0;
}
section {
min-height: 100vh;
/* a grid container with 3 columns*/
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* the image as background */
background: url(https://i.picsum.photos/id/98/1920/1080.jpg?hmac=38vHAR4QCfR9YGpaasbQ0h390ZJnDlnQqzv3xTDF6ik) center/cover;
}
.item {
overflow: hidden; /* hide the overflow of the shadow */
/* center the heading */
display: grid;
place-items: center;
/**/
}
.item h2 {
width: 80%; /* adjust this to control the size */
aspect-ratio: 1; /* keep it a perfect circle */
box-sizing: border-box;
border-radius: 50%;
/* center the content of the heading */
display: grid;
place-items: center;
/**/
padding: 20px; /* this will control the inner space */
background: rgb(255 255 255/60%) content-box; /* color only the content area */
box-shadow: 0 0 0 100vmax rgb(255 255 255/60%); /* a big box-shadow */
}
<section>
<div class="item">
<h2>Heading 1</h2>
</div>
<div class="item">
<h2>Heading 2</h2>
</div>
<div class="item">
<h2>Heading 2</h2>
</div>
</section>