How to fix vw sized divs overlaying

!Image(https://i.imgur.com/DOaQR24.png)

The Metal straw campaign div keeps overlaying the Food CPR div when the screen reaches a certain size.
The text inside both divs are min(40px,5vw) sized)
I have tried setting a maximum size but it still happens.

.initiatives=Both the divs
.foodcpr & .metalstraw= both the texts in the divs

.initiatives {
font-size: min(130px,10vw);
margin: -1% 5% -1% 5%;
color: white;
text-shadow: -0.5px -0.5px 0 black, 0.5px -0.5px 0 black, -0.5px 0.5px 0 black, 0.5px 0.5px 0 black;
}

.foodcpr {
background-image: url(https://themalaysianreserve.com/wp-content/uploads/2019/09/TMRAMN19091912.jpg);
background-size: cover;
background-color: rgba(255, 0, 0, 40%);
background-blend-mode: multiply;
}

.metalstraw {
background-image: url(https://insideretail.asia/wp-content/uploads/2020/09/straw.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

(Sorry for bad English)