CSS overflow-x hidden also hides vertical - html

Question

There are endless questions on SO that are very similar but none of which have solved my problem.
I have multiple sections that have top and bottom margins and inner elements that overflow horizontally, for example...
section {
position: relative;
margin: 100px 0;
}
section:before {
content: 'This overflows...';
display: block;
position: relative;
width: 110vw;
padding: 1rem;
margin-bottom: 1rem;
background: darkred;
color: white;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row">
<div class="col">
<div class="card shadow-lg">
<div class="card-body">
<h3>Card 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id luctus mi, tempor varius ligula. Nunc pharetra et velit vitae tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-lg">
<div class="card-body">
<h3>Card 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id luctus mi, tempor varius ligula. Nunc pharetra et velit vitae tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-lg">
<div class="card-body">
<h3>Card 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id luctus mi, tempor varius ligula. Nunc pharetra et velit vitae tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col">
<div class="card shadow-lg">
<div class="card-body">
<h3>Card 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id luctus mi, tempor varius ligula. Nunc pharetra et velit vitae tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-lg">
<div class="card-body">
<h3>Card 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id luctus mi, tempor varius ligula. Nunc pharetra et velit vitae tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</div>
</div>
</div>
</section>
As you can see from the above, the red box causes overflow-x to scroll, however, I want this element to still overflow but hidden.
I assumed adding overflow-x: hidden; overflow-y: visible; to the <section> would fix this...
section {
position: relative;
margin: 100px 0;
overflow-x: hidden;
overflow-y: visible;
}
section:before {
content: 'This overflows...';
display: block;
position: relative;
width: 110vw;
padding: 1rem;
margin-bottom: 1rem;
background: darkred;
color: white;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row">
<div class="col">
<div class="card shadow-lg">
<div class="card-body">
<h3>Card 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id luctus mi, tempor varius ligula. Nunc pharetra et velit vitae tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-lg">
<div class="card-body">
<h3>Card 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id luctus mi, tempor varius ligula. Nunc pharetra et velit vitae tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-lg">
<div class="card-body">
<h3>Card 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id luctus mi, tempor varius ligula. Nunc pharetra et velit vitae tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col">
<div class="card shadow-lg">
<div class="card-body">
<h3>Card 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id luctus mi, tempor varius ligula. Nunc pharetra et velit vitae tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-lg">
<div class="card-body">
<h3>Card 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id luctus mi, tempor varius ligula. Nunc pharetra et velit vitae tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</div>
</div>
</div>
</section>
But this clips the shadows...
Obviously switching from margins to paddings would fix this but it also doubles the space between the two sections so the use of margins is a must.