.c6ee15365-8f47-4dab-8bee-2a56a7916c57 { position: absolute; bottom: 0; left: 0; width: 100%; display: grid; grid-template-columns: 240px 1px 1fr; grid-template-rows: 1px 1fr; .separator-h { grid-row: 1; grid-column: 1 / span 3; border-top: 1px solid black; svg { transform: rotate(-90deg); margin-top: -52px; } } .separator-v { grid-row: 2; grid-column: 2; border-right: 1px solid black; svg { margin-left: -32px; } } .receiver { grid-row: 2; grid-column: 1; font-size: 12pt; padding: 1em; h2 { margin: 0; margin-bottom: 0.5em; } h4 { margin-bottom: 0.1em; } } .payer { grid-row: 2; grid-column: 3; display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 2em 1fr; padding: 1em; gap: 1em; width: 100%; h2 { grid-row: 1; grid-column: 1 / 2; margin: 0; } h4 { margin-bottom: 0.1em; } .qr-code { grid-row: 2; grid-column: 1; display: flex; flex-direction: column; justify-content: space-between; .qr-section-img { position: relative; width: 100%; img { width: 100%; } svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; width: 40px; } } .qr-section-info { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; justify-items: center; p, h4 { margin: 0; } } } .payment-details { grid-row: 2; grid-column: 2; font-size: 0.9rem; line-height: 1.4; } } }