Res. Testimonials Grid with animations - BG Color, Blur, Keyframes -JS

Hey everyone! I hope all of you are doing great. I have finished this challenge and I really want to know your thoughts on this.

while I was working on this I faced one issue described below. Kindly explain the cause of why it's happening like this -why all 3 pseudo-elements are taking too much height even though I have declared line-height: 1 and tried all flex alignment properties but still it's taking too much space vertically? please explain the cause of why it's happening thank you

📷 click here for image please

.card__paragraph::before {
content: "\201C";
position: absolute;
left: -0.8rem;
font-size: 2rem;
line-height: 1;
font-family: sans-serif;
opacity: 0.5;
border: 2px solid red;
}

.card__paragraph::after {
position: absolute;
content: "\201D";
font-size: 2rem;
line-height: 1;
font-family: sans-serif;
opacity: 0.5;
border: 2px solid red;
}

.card-1::after {
position: absolute;
content: "\201D";
font-size: 28rem;
line-height: 1;
font-family: sans-serif;
top: -3.5rem;
right: 1rem;
opacity: 0.3;
z-index: 5;
border: 2px solid red;
}