I am creating a calculator using HTML and CSS, and I’m having trouble with the responsive design. I want the buttons of the calculator to look similar at a height of 620 pixels as they do in a width range of 500 to 1024 pixels. However, the values in the media query are not working as expected.

@media screen and (min-width: 500px), screen and (max-width: 1024px), screen and (max-height: 620px) {

  .btns {
    grid-area: btns;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto auto auto auto;
  }

  .button {
    font-size: 16px;
    text-align: center;
    border: 1px solid #E6E6E6;
  }

}

I’ve tried adjusting the media query to target both width and height conditions, but it doesn’t seem to work as intended. The buttons do not appear as they should at a height of 620 pixels, even though they look fine in the width range of 500 to 1024 pixels.

How can I modify my media query or CSS to ensure that the calculator buttons appear correctly at a height of 620 pixels, similar to how they appear within a width range of 500 to 1024 pixels?