Как создать класс с тенью?

Как можно добавить тень классу "item_box_icon", когда у "item_box" установлено свойство "overflow: hidden", чтобы круг, который появляется при наведении, не выходил за границы квадрата "item_box"?

```
<div class="item">
  <div class="item_box">
    <div class="item_box_icon"></div>
  </div>
	<div class="item_box">
    <div class="item_box_icon"></div>
  </div>
</div>

.item {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 13px;
}

.item_box {
  padding: 36px 16px 36px 24px;
  width: 350px;
  height: 345px;
  border-radius: 4px;
  background: #1b2837;
  position: relative;
  overflow: hidden;
}

.item_box:hover .item_box_icon {
  width: 548px;
  height: 548px;
  border-radius: 50%;
  background: #003adb;
  bottom: -223px;
  right: -206px;
  z-index: 0;
  transition: 0.3s;
}

.item_box_icon {
  width: 136px;
  height: 102px;
  border-radius: 69.5px 0px 4px 4px;
  background: #003adb;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 0;
  transition: 0.3s;
}

.item_box_icon::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0px 10px 29px 0px rgba(64, 129, 255, 0.24);
}
```

В этой модифицированной версии кода, я добавил псевдоэлемент "::before" к классу "item_box_icon", чтобы создать тень. С помощью свойства "position: absolute" и значения "top: 0; bottom: 0; left: 0; right: 0;", я расширяю псевдоэлемент на всю область класса "item_box_icon". Потом, используя свойство "box-shadow", я добавляю нужную тень.