.dialog-bubble {
	display: grid;
	grid-template: 3em 1fr / 3em 1fr;
	grid-template-areas:
		"icon name"
		"empty bubble";
	align-items: center;
	column-gap: 1em;
	margin: 1em 0;

	&>:first-child {
		grid-area: icon;
		background-color: var(--box);
		border-radius: .3em;
		overflow: hidden;
		width: 100%;
		height: 100%;
		user-select: none;

		&>img {
			width: 100%;
			height: auto;
		}
	}

	&>:nth-child(2) {
		grid-area: name;
		font-weight: bold;
		font-size: var(--font-size-h4);

		&>a {
			color: var(--c);
			text-decoration: none;
		}
	}

	&>:last-child {
		grid-area: bubble;
		background-color: var(--bg);
		border: .3em solid var(--c);
		padding: .5em 1em;
		border-radius: 1em;
		border-top-left-radius: 0;
	}
}

@media only screen and (max-width: 480px) {
	.dialog-bubble {
		grid-template-areas:
			"icon name"
			"bubble bubble";
	}
}