Converting 1x4 grid to 2x2 when not enough vertical space - css

Question

I have a 1x4 grid that looks like this.
The problem is that when the screen is widened, the buttons sometimes get cut off, and when they don't they're too horizontally stretched.
I would like to adjust the 1x4 grid to become a 2x2 when there's not enough vertical space.
I know this is possible with flex containers, but I'm failing in my attempts to figure out how.
This is my codepen:
https://codepen.io/TheNomadicAspie/pen/ZEKYwWJ
And this is the relevant code:
.multiple-choice {
}
.answer-1 {
grid-rows: 1/2;
display: grid;
grid-template-columns: 20% 80%;
height: 98%;
}
.answer-2 {
grid-rows: 2/3;
display: grid;
grid-template-columns: 20% 80%;
height: 98%;
}
.answer-3 {
grid-rows: 3/4;
display: grid;
grid-template-columns: 20% 80%;
height: 99%;
}
.answer-4 {
grid-rows: 4/5;
display: grid;
grid-template-columns: 20% 80%;
height: 99%;
}
.checkbox {
grid-columns: 1/2;
max-height: 90%;
background-image: url('checkbox_unchecked.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.button-container {
grid-columns: 2/3;
height: %;
padding-left: 5%;
}
.button-container button {
width: 100%;
}
.button {
display: inline-block;
height: 100%;
text-decoration: none;
background: black; /*Button Color*/
color: #f5f5f5;
border-bottom: solid 4px #f5f5f5;
border-radius: 3px;
font-family: hack;
font-size: 1.5rem;
font-size: clamp(1rem, 3vw, 2rem);
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
padding-bottom: 2%;
}
.btn:active {
/*on Click*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px); /*Move down*/
border-color: black; /*disappears*/
}