I would like to have a grid .wrapper div that has 3 .card divs within it utilizing subgrid with 2 sections within each .card div. These sections should line up because of subgrid, which is why I need to use grid for the parent div. However, I need to make this responsive similar to flexbox but with subgrid. I am aware flexbox would solve this problem, however I really want subgrid so the cards line up on each line. I also have a .most-popular div that I would like to stay on top of the grid, however this is not required if it breaks everything else. If A, B, and C were the rows and B was the .most-popular div, then here is what I want it to look like:
A B C for screens that are wide enough
B B
A C for screens that are medium sized
B
A
C for screens that are too small
I would prefer to not use media queries.
CSS:

.list-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    grid-template-rows: auto auto;
}

.list-grid>.card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
}

.list-grid>.card>div:nth-child(1) {
    border-width: 0px;
    border-bottom: 2px solid;
    border-image: var(--secondary-accent-border-gradient) 1;
    border-bottom-width: 2px;
    border-style: solid;
    padding-bottom: 10px;
    border-top-width: 0px;
}

.most-popular {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    border: 2px solid var(--secondary-accent-hover);
    border-radius: 5px;
    background-color: var(--primary-accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 70%;
    min-width: fit-content;
    position: absolute;
}

.most-popular>h3 {
    color: var(--accent-text-color);
}

.account-plan-desc-list {
    width: 90%;
    margin-inline: auto;
}

HTML:

<div class="center-content" style="margin-top: 20px; margin-bottom: 35px;">
    <div class="list-grid center-content" style="width: 80%; height: 100%;">
        <div class="card">
            <div>
                <h1 class="card-title">Savings</h1>
                <div class="account-plan-desc-list">
                    <p class="check-mark">Good interest rate (4.20% per month)</p>
                    <p class="x-mark">Low § maximum (§150,000)</p>
                    <p class="x-mark">Only one account allowed</p>
                    <p class="x-mark">Not free</p>
                </div>
            </div>
            <div>
                <h2><span class="descriptor">from </span>§50.00<span class="descriptor">/account</span>
                </h2>
                <button class="btn fill-area-horiz" id="addToProfileSavings" style="margin-top: 10px;">
                    <h1><i class="fa-solid fa-plus"></i> Add to Profile</h1>
                </button>
            </div>
        </div>

        <div class="card" style="position: relative;">
            <div>
                <div class="center-content">
                    <div class="most-popular">
                        <h3><span class="nowrap"><i class="fa-solid fa-star"></i> MOST</span> <span
                                class="nowrap">POPULAR <i class="fa-solid fa-star"></i></span></h3>
                    </div>
                </div>
                <h1 class="card-title">Checking</h1>
                <div class="account-plan-desc-list">
                    <p class="check-mark">Collect an interest each month (<span class="descriptor">from
                        </span>0.03%<span class="descriptor">/month</span>)</p>
                    <p class="check-mark">Decent § maximum (§250,000)</p>
                    <p class="check-mark">Free</p>
                    <p class="x-mark">Only one account allowed</p>
                </div>
            </div>
            <div>
                <h2>Free</h2>
                <button class="btn fill-area-horiz" id="addToProfileChecking" style="margin-top: 10px;">
                    <h1><i class="fa-solid fa-plus"></i> Add to Profile</h1>
                </button>
            </div>
        </div>

        <div class="card">
            <div>
                <h1 class="card-title">Expanded Checking</h1>
                <div class="account-plan-desc-list">
                    <p class="check-mark">Collect an interest each month (<span class="descriptor">from
                        </span>0.04%<span class="descriptor">/month</span>)</p>
                    <p class="check-mark">As many accounts as you would like</p>
                    <p class="check-mark">Very large § maximum (§1,000,000)</p>
                    <p class="x-mark">Not free</p>
                </div>
            </div>
            <div>
                <h2><span class="descriptor">from </span>§10,000.00<span class="descriptor">/account</span>
                </h2>
                <button class="btn fill-area-horiz" id="addToProfileExChecking" style="margin-top: 10px;">
                    <h1><i class="fa-solid fa-plus"></i> Add to Profile</h1>
                </button>
            </div>
        </div>
    </div>
</div>

I tried using grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));. This worked, but when a .card div wrapped to the next line it made a huge gap to the right of it. I want that to instead fill all of the remaining space on its row if there are no other .card divs there.