body { background: hsl(0deg 100% 100%); padding: 0; margin: 0; } .payment { --padding: 4px; position: relative; padding: var(--padding); gap: 8px; height: 100vh; height: 100svh; display: grid; grid-template-columns: 1fr; grid-template-rows: 1rem 1rem 1rem 1rem 1rem 1rem; grid-auto-rows: max-content; } .title_wrapper { --padding: 4px; position: relative; padding: var(--padding); border-radius: 8px; gap: 8px; height: 4vh; height: 4svh; display: grid; grid-area: 1/1/span 2/span 1; grid-template-columns: 1fr; grid-template-rows: 1rem 1rem; grid-row-gap: 15px; } .section_wrapper { --padding: 4px; position: relative; padding: var(--padding); gap: 8px; height: 2vh; height: 2svh; display: grid; grid-area: 3/1/span 1/span 2; grid-template-columns: 1fr 5fr; grid-template-rows: 1rem; column-gap: 0px; } .section_wrapper_1 { --padding: 4px; position: relative; padding: var(--padding); gap: 8px; height: 2vh; height: 2svh; display: grid; grid-area: 8/1/span 1/span 1; grid-template-columns: 1fr 5fr; grid-template-rows: 1rem; column-gap: 0px; } .section_header { display: grid; place-content: center; border-radius: 3px; background: hsl(0deg 100% 50%); color: white; font-size: 1.3125rem; font-weight: bold; grid-row-gap: 15px; grid-column-gap: 0px; } .section_line { display: grid; place-content: center; border-radius: 3px; border-top: solid red 3px; background: hsl(0deg 100% 100%); color: white; font-size: 1.3125rem; font-weight: bold; grid-row-gap: 15px; grid-column-gap: 0px; } .payer { --padding: 4px; position: relative; padding: var(--padding); gap: 8px; height: 45vh; height: 45svh; display: grid; grid-area: 4 / 1 / span 6 / span 4; grid-template-columns: 1fr 1.5fr 0.5fr 1.3fr; grid-template-rows: 2rem 2rem 2rem 1rem; grid-row-gap: 15px; } .receiver_1 { --padding: 4px; position: relative; padding: var(--padding); gap: 8px; height: 15vh; height: 15svh; display: grid; grid-area: 9 / 1 / span 2 / span 6; grid-template-columns: 15% 1fr 0.2fr 1fr 0.4fr 1fr; grid-template-rows: 1rem 1rem; grid-row-gap: 35px; } .receiver_2 { --padding: 4px; position: relative; padding: var(--padding); gap: 8px; height: 30vh; height: 30svh; display: grid; grid-area: 11 / 1 / span 5 / span 2; grid-template-columns: 15% 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr; grid-row-gap: 5px; } .child { display: grid1 margin-bottom: 1px; place-content: self-start center; background: hsl(0deg 100% 100%); color: black; font-size: 1.3125rem; /* font-size: 1.3125rem; */ font-weight: bold; } .title { display: grid; place-content: center; background: hsl(0deg 100% 100%); color: black; font-size: 1.3125rem; font-weight: bold; } input, select { font-size: 16px; font-size: max(16px, 1em); font-family: inherit; padding: 0.25em 0.5em; background-color: #fff; border: 2px solid gray; border-radius: 4px; }