I appreciate that you are bringing so many things in your design, but check whether it is consistent or appealing everywhere. You will understand in following photos.
This is good:
This is where ignorance comes into play
I think the following code is more consistent.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
body {
width: 100vw;
min-height: 100vh;
height: max-content;
overflow: hidden;
margin: 0;
}
body>img {
position: absolute;
height: 100vh;
width: 100vw;
background-repeat: no-repeat;
object-fit: cover;
z-index: -1;
}
.container {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.card-container {
width: 280px;
display: flex;
flex-flow: column;
height: max-content;
}
.card-container img {
width: 100%;
height: 200px;
object-fit: cover;
margin: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.section {
width: 100%;
height: max-content;
background: rgba(53, 53, 53, 0.47);
backdrop-filter: blur(62px);
font-family: Poppins, sans-serif;
margin: 0;
}
#heading {
display: flex;
font-size: 18px;
line-height: 1.4em;
flex-flow: column nowrap;
color: white;
padding: 20px;
padding-bottom: 5px;
}
#regularDetails {
align-self: flex-end;
width: 100%;
height: 30px;
display: flex;
/* padding: 10px;
padding-top: 0; */
justify-content: space-between;
margin-bottom: 10px;
padding-left: 22px;
}
#regularDetails div {
width: 50%;
display: flex;
}
#regularDetails :first-child {
font-size: 14px;
font-weight: bold;
color: rgb(182, 182, 182);
}
#regularDetails :last-child {
color: rgb(238, 232, 232);
font-size: 16px;
}
#regularDetails :last-child:hover {
color: white;
cursor: pointer;
}
</style>
<img src="https://wallpaperaccess.com/full/524676.jpg" alt="china wall">
<div class="container">
<div class="card-container">
<img src="https://i.kinja-img.com/gawker-media/image/upload/c_fit,f_auto,g_center,pg_1,q_60,w_965/68517823670148cd47ce73ba4e835dfc.jpg">
<div class="section">
<div id="heading">
Homeowner Shoos Away Feral Driverless Car Rooting Around Garage
</div>
<div id="regularDetails">
<div>33 mins ago</div>
<div>The Onion</div>
</div>
</div>
</div>
</div>
</body>
</html>
Try the above code, Have a nice day