How to remove styling if the heght of the screen less than the element height

I have centered the element by the height of the screen using absolute positioning.
However, when the height of the screen is less than the element width, it is cutting the part of the element making its top unreachable. How can I add and remove styling if the height of the screen is less than the height of the element?

https://codepen.io/alena-chuyankova/pen/YzmWYKZ

.wrap {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    background-color: white;
    gap: 1rem;
    width: 45%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    display: flex;
    flex-direction: column;
    padding: 4rem;
    
}

You need to sign in to view this answers