#main section.section.section-banner {
	margin: 0;
	padding: 1em 0;
	color: #fff;
	background-color: #0071E3;
	font-size: 14px;
}
#main section.section.section-banner a {
	color: #fff;
}
@media only screen and (max-width: 735px) {
	#main section.section.section-banner {
		padding: 0;
	}
}

.section-hero figure + h3.typography-headline-body {
	margin-top: 2em;
}

.topic-wrap {
	margin-top: 4em;
	width: 280px;
	height: 206px;
}

.icon-app-clips {
	margin-bottom: 1em;
	width: 96px;
	height: 96px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/assets/elements/icons/app-clips/app-clips-96x96.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
	.icon-app-clips {
		background-image: url("/assets/elements/icons/app-clips/app-clips-96x96_2x.png");
	}
}

.hero-lockup {
	margin-top: 2em;
	margin-bottom: 4em;
	width: 980px;
	height: 572px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center 0;
	background-image: url("/app-clips/images/hero-lockup-large.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
	.hero-lockup {
		background-image: url("/app-clips/images/hero-lockup-large_2x.png");
	}
}

.device-wrap {
	display: inline-block;
	margin: 2em 0 0;
	padding: 0 20px 20px;
	height: 280px;
	background-color: #fafafa;
	border: 1px solid #d6d6d6;
	border-radius: 0.5em;
	overflow: hidden;
}
.device-wrap .device-full-app {
	margin-top: -308px;
}
.screen-full-app {
	background-image: url("/app-clips/images/screen-get-full-app-large.jpg");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
	.screen-full-app {
		background-image: url("/app-clips/images/screen-get-full-app-large_2x.jpg");
	}
}

.icon-xcode {
	margin-bottom: 1em;
	width: 96px;
	height: 96px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/assets/elements/icons/xcode-12/xcode-12-96x96.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
	.icon-xcode {
		background-image: url("/assets/elements/icons/xcode-12/xcode-12-96x96_2x.png");
	}
}

.apple-pay-button {
	margin-top: 1em;
	width: 212px;
	height: 38px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/app-clips/images/apple-pay-button.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
	.apple-pay-button {
		background-image: url("/app-clips/images/apple-pay-button_2x.png");
	}
}

.siwa-button {
	margin-top: 1em;
	width: 212px;
	height: 38px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/app-clips/images/siwa-button.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
	.siwa-button {
		background-image: url("/app-clips/images/siwa-button_2x.png");
	}
}

.icon-discover {
	margin-bottom: 1em;
	width: 64px;
	height: 64px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.icon-nfc {
	background-image: url("/app-clips/images/icon-nfc.svg");
}
.icon-qr {
	background-image: url("/app-clips/images/icon-qr.svg");
}
.icon-safari {
	background-image: url("/app-clips/images/icon-safari.svg");
}
.icon-messages {
	background-image: url("/app-clips/images/icon-messages.svg");
}
.icon-maps {
	background-image: url("/app-clips/images/icon-maps.svg");
}
.icon-recently {
	background-image: url("/app-clips/images/icon-recently-used.svg");
}


@media only screen and (max-width: 1068px) {
	.hero-lockup {
		width: 692px;
		height: 404px;
		background-size: 100% 100%;
		background-image: url("/app-clips/images/hero-lockup-medium.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
		.hero-lockup {
			background-image: url("/app-clips/images/hero-lockup-medium_2x.png");
		}
	}
	.device-wrap {
		height: 215px;
	}
	.device-wrap .device-full-app {
		margin-top: -232px;
	}
	.screen-full-app {
		background-image: url("/app-clips/images/screen-get-full-app-medium.jpg");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
		.screen-full-app {
			background-image: url("/app-clips/images/screen-get-full-app-medium_2x.jpg");
		}
	}
	.screen-full-app {
		background-image: url("/app-clips/images/screen-get-full-app-medium.jpg");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
		.screen-full-app {
			background-image: url("/app-clips/images/screen-get-full-app-medium_2x.jpg");
		}
	}
	.screen-create-ml {
		background-image: url("/app-clips/create-ml/images/screen-preview-medium.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
		.screen-create-ml {
			background-image: url("/app-clips/create-ml/images/screen-preview-medium_2x.png");
		}
	}
	.screen-core-ml {
		background-image: url("/app-clips/core-ml/images/screen-training-medium.jpg");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
		.screen-core-ml {
			background-image: url("/app-clips/core-ml/images/screen-training-medium_2x.jpg");
		}
	}
}

@media only screen and (max-width: 735px) {
	.topic-wrap {
		margin-top: 2em;
		width: auto;
		height: auto;
	}
	.icon-app-clip-codes {
		margin-bottom: 1em;
	}
	.hero-lockup {
		margin-top: 0;
		margin-bottom: 2em;
		width: 320px;
		height: 187px;
		background-size: 100% 100%;
		background-image: url("/app-clips/images/hero-lockup-small.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
		.hero-lockup {
			background-image: url("/app-clips/images/hero-lockup-small_2x.png");
		}
	}
	.device-wrap {
		margin-bottom: 1em;
	}
	.example-app-clip {
		margin-bottom: 1.6em;
	}
	.screen-create-ml {
		background-image: url("/app-clips/create-ml/images/screen-preview-small.png");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
		.screen-create-ml {
			background-image: url("/app-clips/create-ml/images/screen-preview-small_2x.png");
		}
	}
	.screen-core-ml {
		background-image: url("/app-clips/core-ml/images/screen-training-medium.jpg");
	}
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), only screen and (min-resolution: 144dpi) {
		.screen-core-ml {
			background-image: url("/app-clips/core-ml/images/screen-training-medium_2x.jpg");
		}
	}
}

@media only screen and (max-width: 320px) {
	.hero-lockup {
		width: 280px;
		height: 164px;
	}
}


/* ========== Grid ========== */
#main section.section.section-resources {
	padding-bottom: 0;
}