div.url-previews {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	overflow-x: auto;

	> div.url-preview {
		margin: 0.5rem 0;
		border-radius: 0.5rem;
		background-color: var(--url-preview-background-color);
		border: 1px solid var(--url-preview-background-color);
		display: grid;
		flex-shrink: 0;

		grid-template:
			"title"       auto
			"description" auto
			"media"       auto
			/ 1fr;

		div.title {
			grid-area: title;
			margin: 0.5rem 0.5rem 0;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-weight: bold;
		}

		div.description {
			grid-area: description;
			margin: 0 0.5rem 0.5rem;
			display: -webkit-box;
			overflow: hidden;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			color: var(--semisecondary-text-color);
		}

		> div.media-container {
			grid-area: media;
			border-radius: 0 0 .5rem .5rem;
			background-color: var(--background-color);
		}

		&.inline {
			grid-template:
				"media title"       auto
				"media description" auto
				/ auto auto;
			width: 100%;
			max-width: 20rem;

			> div.inline-media-wrapper {
				grid-area: media;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: var(--background-color);
				border-radius: .5rem 0 0 .5rem;
				padding: .5rem;
			}
		}
	}
}