body { background: hsl(0deg 100% 100%); padding: 0; margin: 0; } .payment { --padding: 4px; position: relative; padding: var(--padding); border: 1px solid hsl(210deg 10% 40%); border-radius: 8px; gap: 8px; height: 100vh; height: 100svh; display: grid; grid-template-columns: 1fr; grid-template-rows: 1rem 1fr; grid-row-gap: 15px; } .title_wrapper { --padding: 4px; position: relative; padding: var(--padding); border-radius: 8px; gap: 8px; height: 4vh; height: 4svh; display: grid; grid-area: 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); border-radius: 8px; gap: 8px; height: 2vh; height: 2svh; display: grid; 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); border: 1px solid hsl(210deg 10% 40%); border-radius: 8px; gap: 8px; height: 100vh; height: 100svh; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1rem 1rem 1rem 1rem; grid-row-gap: 15px; } .child { display: grid; margin-bottom: 1px; place-content: self-start center; border-radius: 3px; background: hsl(0deg 100% 100%); color: black; font-size: 1.3125rem; font-weight: bold; } .title { display: grid; place-content: center; border-radius: 3px; background: hsl(0deg 100% 100%); color: black; font-size: 1.3125rem; font-weight: bold; }