I have been trying to position a card on top of a gradient background without it getting cut off at the end. I attempted using margins to push the card down, but it didn't work as expected. Z-index and position: absolute were also unsuccessful in fixing this issue. How can I ensure that the card sits perfectly over the gradient background? Here is the code snippet I am working with:
.content-container-header {
overflow: hidden;
height: 800px;
-webkit-mask: radial-gradient(100% 95% at top, #000 100%, #0000);
mask: radial-gradient(100% 95% at top, #000 100%, #0000);
background: linear-gradient(#f5fafd, #E8F3F9);
}
.flex-display {
display: flex;
}
// More CSS code here
<div class='content-container-header flex-display justify-center margin-bottom-96'>
<div class="container-1200 header-content-posts">
<div class="flex-display flex-display-col justify-center align-center margin-top-128">
<h1 class="text-dark-blue heading-48 margin-top-disabled margin-bottom-20">
Placement Header
</h1>
</div>
<div>
<div class="flex-display align-center featured-post-ct margin-top-300">
<div class="div-50 margin-r-32 ">
<img alt="" height="308px" width="472px" src="https://media.istockphoto.com/photos/modern-skyscrapers-in-business-district-picture-id1137991385?k=20&m=1137991385&s=612x612&w=0&h=dcSq5oF99RjNW0kQo-LtkUg-Wf15ofZRg87pBOVWLkk=" />
</div>
<div class="div-50">
<div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacinia eget mi in rhoncus. Praesent dignissim libero a purus facilisis, eu blandit tortor mollis. Maecenas vitae justo ac tortor rhoncus congue.</div>
</div>
</div>
</div>
</div>
</div>