.mp { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed; } .mp th { font: 400 11px var(--mono); text-transform: uppercase; color: var(--slate); text-align: left; } .mp input { width: 100%; box-sizing: border-box; padding: 8px; border-radius: 10px; border: 1px solid var(--ash); font: 14px var(--sans); } @media (max-width: 640px) { .mp thead { display: none; } .mp tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 10px; } .mp th[scope=row] { grid-column: 1 / -1; } } @media print { body * { visibility: hidden; } .mp, .mp * { visibility: visible; } .mp { position: absolute; top: 0; left: 0; } }