.dialogue {
display: grid;
grid-template-columns: 125px 1fr;
grid-template-areas: "icon name"
"icon text";
grid-gap: 0 10px;
width: 50em;
max-width: 100%;
align-content: center;
margin: 1em 0;
}
.dialogue-icon {
grid-area: icon;
}
.dialogue-name {
grid-area: name;
}
.dialogue-text {
grid-area: text;
padding: 0.5em 1em;
background: var(--color-surface-2);
border: 1px solid var(--color-surface-3);
border-radius: var(--border-radius--medium);
}