.bg-grad-up {
	background: linear-gradient(to bottom, #ffffff 0%, #d5e4f3 90%);
}

.bg-grad-down {
	background: linear-gradient(to top, #ffffff 0%, #d5e4f3 90%);
}

.bg-alt {
	background-color: #f5f5f7;
}

body[data-color-scheme="light"] .bg-light-blue {
	background: #d5e4f3;
}

.device-hero {
	margin-top: 2em;
}

.hig-icon {
	max-width: 250px;
	margin-bottom: 1.5em;
}

.hero-image {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.screen-only {
	display: block;
	position: relative;
	margin-top: 4em;
	margin-bottom: 1.5em;
	width: 438px;
	height: auto;
}

.callout {
	margin-top: 2em;
}

.icon-sf-symbols {
	margin: 2em auto 1em;
}

.router-icon.router-icon-design {
	height: 64px;
	width: 64px;
}

@media only screen and (max-width: 734px) {
	.section-resources figure {
		margin-top: 3em;
	}
}

@media only screen and (max-width: 320px) {
	.device-hero {
		margin-left: -28px;
	}
}

.section-video a {
	text-decoration: none;
	color: inherit;
}

.thumbnail {
	aspect-ratio: 16/9;
	margin-bottom: 1em;
	min-height: 200px;
}

.center-grid-item {
	justify-self: center;
	align-self: center;
	text-align: center;
}