i am trying to create a website for personal use but facing some issue that button doesnot stick at bottom of the grid and top image which is a class under “card-” doesn’t stay at its position fixed. i know i can use media query for that but seeking a better solution. I have read all the question related to my question but none fixes the issue.

i tried the following code and expecting a better solution so that i can learn as well.

<div class="content-b">
                <div class="card-a">
                    <img src="https://static.vecteezy.com/system/resources/thumbnails/011/412/771/small/abstract-vector-background-bg-purple-blue-pink-gradient-dots-pattern-curve-lines-photo.jpg" class="image" alt="bg">
                    <div class="top-image">
                        <span><img src="https://img.freepik.com/premium-psd/color-wing-png-isolated-transparent-background_1034016-9965.jpg"></span>
                        <h2>Lorem ipsum dolor sit</h2>
                    </div>
                    <div class="card_content">
                        <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa iste omnis possimus unde nemo beatae quidem eum. Fugiat, beatae eius debitis sequi quos maxime inventore deserunt possimus delectus accusantium esse.</p>
                        <button type="button" onclick="location.href='academics.html'" >See more</button>
                    </div>
                </div>
<div class="card-b">
                    <img src="https://static.vecteezy.com/system/resources/thumbnails/011/412/771/small/abstract-vector-background-bg-purple-blue-pink-gradient-dots-pattern-curve-lines-photo.jpg" class="image" alt="bg">
                    <div class="top-image">
                        <span><img src="https://img.freepik.com/premium-psd/color-wing-png-isolated-transparent-background_1034016-9965.jpg"></span>
                        <h2>Lorem ipsum dolor sit</h2>
                    </div>
                    <div class="card_content">
                        <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa iste omnis possimus unde nemo beatae quidem eum. Fugiat, beatae eius debitis sequi quos maxime inventore deserunt possimus delectus accusantium esse.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa iste omnis possimus unde nemo beatae quidem eum. Fugiat, beatae eius debitis sequi quos maxime inventore deserunt possimus delectus accusantium esse.</p>
                        <button type="button" onclick="location.href='academics.html'" >See more</button>
                    </div>
                </div>
</div>

:root{
    --primary-color: #00605f;
    --secondary-color: #017479;
    --text-dark:#0f172a;
    --text-light:#94a3b8;
    --white:#ffffff;
    --hover-color:#E5E4E2;
    --max-width: 1400px;
}
.content-b{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:"card-a card-b card-c";
    gap: 1rem;
}
.card-a{
    grid-area: card-a;
    box-shadow: 2px 2px 20px rgba(0,0,0,.7);
    background:var(--white);
    display: flex;
    flex-direction: column;
    position: relative;
}
.card-b{
    grid-area: card-b;
    box-shadow: 2px 2px 20px rgba(0,0,0,.7);
    background:var(--white);
    display: flex;
    flex-direction: column;
    position: relative;
}
.card-c{
    grid-area: card-c;
    box-shadow: 2px 2px 20px rgba(0,0,0,.7);
    background:var(--white);
    display: flex;
    flex-direction: column;
    position: relative;
}
.content-b img{
    width: 100%;
    height: 15rem;
    object-fit: cover;
    opacity: .35;
    -moz-opacity:0.35;
  -khtml-opacity: 0.35;
}
.top-image {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
  text-align:center;
}
.top-image span{
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
.top-image span > img{
    position:absolute;
    opacity: 1;
  width:2rem;
  height: 2em;
}
.top-image h2{
    text-transform: uppercase;
    font-size: 2rem;
    text-align: center;
}
.card_content{
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.card_content h4{
    margin-bottom: .5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}
.card_content p{
    margin-bottom: 1rem;
    font-size: .9rem;
    line-height: 1.5rem;
    color: var(--text-light);
}
.card_content button{
    padding: .5rem 1rem;
    outline: none;
    border: none;
    font-weight: 500;
    color: var(--white);
    background-color: var(--primary-color);
    cursor:pointer;
    bottom: 0;
    font-size: .8rem;
    width: 40%;
}
.card_content .btn:hover,.card_content .btn:focus{
    background: var(--secondary-color);
}