Single price grid component using Html Css

I m not sure about the strategy i used to set the sizes in the body and in the item to made them responsive. Is there a better way?

body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }

.main-header { min-height: 80vh; width: 50%; margin: 0 auto; display: grid; grid-template-areas: "title title" "price info"; grid-template-rows: 45% 55%; grid-template-columns: 50% 50%; }