html,
body {
	overflow-x: clip;
}

.shell,
.dotsmaker-page {
	max-width: 100%;
}

@media (max-width: 800px) {
	.masthead {
		gap: 10px;
	}

	.brand {
		flex: 1;
		min-width: 0;
	}

	.brand > span:last-child {
		display: block;
		overflow: hidden;
		min-width: 0;
	}

	.brand b {
		overflow: hidden;
		font-size: 18px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.brand small {
		display: none;
	}

	.brand-mark {
		flex: 0 0 40px;
		width: 40px;
		height: 40px;
	}

	.header-actions {
		flex: 0 0 auto;
	}
}

@media (max-width: 768px) {
	.dm-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.dm-hero > div,
	.dm-newsletter form,
	.dm-weather {
		min-width: 0;
	}

	.dm-hero h1 {
		overflow-wrap: anywhere;
	}
}