.card { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(150px, 210px); gap: var(--mantine-spacing-md); align-items: start; padding: var(--mantine-spacing-lg); border-radius: var(--mantine-radius-lg); color: inherit; text-decoration: none; } .card:hover { border-color: var(--mantine-color-blue-4); background: var(--mantine-color-blue-0); } .card:focus-visible { outline: 2px solid var(--mantine-color-blue-6); outline-offset: 3px; } .identity { min-width: 0; overflow-wrap: anywhere; } .quote { text-align: right; font-variant-numeric: tabular-nums; } @media (max-width: 40em) { .card { grid-template-columns: auto minmax(0, 1fr); padding: var(--mantine-spacing-md); } .quote { grid-column: 2; text-align: left; } }