Help setting equal summary block height

I am trying to create a summary block where all the sections are the same height. I've gotten that to work, but on large screens, there's a ton of space at the bottom. Is there a better way to do this? 

I also set the code not to apply on mobile, but if you shrink a browser window down, it will wrap, which I'd prefer not to happen.

Website is: https://pedl.tech/home-1

Password: PEDL

@media only screen and (min-width:650px){ .summary-item{height:16vh;}}

Sometimes the white background also hangs below the borders, but not always. I'm wondering if there's a better way to achieve this look generally.

Page Url doesn't work. Can you check it again?

Apologies, @tuanphan. I made some changes since then. It's just https://pedl.tech (no password).

First, remove this CSS code

#block-yui_3_17_2_1_1709589146043_109093 {
    font-weight: 600;
    background: #fff;
}

Next, use this CSS code

#block-yui_3_17_2_1_1709589146043_109093 .summary-item {
    background-color: #fff;
    font-weight: 600;
}

Wonderful! Do you know if there's a way to get rid of the extra white space at the bottom on large screens? If not, I'll just deal with it. 

On 3/15/2024 at 8:07 AM, Ottan said:

Wonderful! Do you know if there's a way to get rid of the extra white space at the bottom on large screens? If not, I'll just deal with it. 

You can use some code like this under, to adjust it on large screen.

@media screen and (min-width:2500px) {
    #block-yui_3_17_2_1_1709589146043_109093 .summary-item {
        height: 11vh !important;
    }
}