.bg-gradient {
	background: linear-gradient(to bottom, #fafafa 50%, #ffffff 100%);
}

.bg-rounded {
	background-color: #fafafa;
	border-radius: 1em;
}

.bg-rounded.theme-dark {
	background-color: #000;
}

.row-flex {
	display: flex;
}

.column-flex-center {
	align-self: center;
}

.center-wrap-right {
	display: table-cell;
	height: 494px;
	vertical-align: middle;
}

.center-wrap-left {
	display: table-cell;
	height: 494px;
	vertical-align: middle;
	padding-right: 30px
}

.device-wrap {
	margin-top: 2em;
	height: 460px;
	overflow: hidden;
}

.lockup-wrap {
	width: 283px;
	margin-left: 46px;
}

@media only screen and (max-width: 1068px) {
	.center-wrap-right, {
	.center-wrap-left {
		height: 385px;
	}
	.device-wrap {
		height: 350px;
	}
	.lockup-wrap {
		width: 212px;
		margin-left: 18px;
	}
}

@media only screen and (max-width: 734px) {
	.row-flex {
		display: block;
		text-align: center;
	}
	.center-wrap-right,
	.center-wrap-left {
		display: block;
		height: auto;
		padding: 0 2em 1em;
		text-align: center;
	}
	.device-wrap {
		margin: 2em auto 0;
		height: auto;
	}
	.device-wrap .device-iphone-16-pro-titanium-container,
	.large-push-7 .device-wrap .device-iphone-16-pro-titanium-container {
		margin: 0 auto;
	}
	.lockup-wrap {
		width: 280px;
		margin: 2em auto 0;
	}
}

@media only screen and (max-width: 414px) {
	.center-wrap {
		padding: 0 1em 1em;
	}
}

/* ===== Images ===== */
.icon-wallet {
	width: 64px;
	height: 64px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/assets/elements/icons/wallet/wallet-64x64.png");
}

.lockup-hero {
	margin: 0 auto;
	width: 408px;
	height: 549px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/wallet/images/lockup-hero-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) {
	.lockup-hero {
		background-image: url("/wallet/images/lockup-hero-large_2x.png");
	}
}

.lockup-apple-pay {
	width: 653px;
	height: 365px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/wallet/images/lockup-apple-pay-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) {
	.lockup-apple-pay {
		background-image: url("/wallet/images/lockup-apple-pay-large_2x.jpg");
	}
}

.screen-boarding {
	background-image: url("/wallet/images/screen-boarding-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-boarding {
		background-image: url("/wallet/images/screen-boarding-large_2x.jpg");
	}
}

.screen-coupon {
	background-image: url("/wallet/images/screen-coupon-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-coupon {
		background-image: url("/wallet/images/screen-coupon-large_2x.jpg");
	}
}

.screen-event {
	background-image: url("/wallet/images/screen-event-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-event {
		background-image: url("/wallet/images/screen-event-large_2x.jpg");
	}
}

.screen-generic {
	background-image: url("/wallet/images/screen-generic-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-generic {
		background-image: url("/wallet/images/screen-generic-large_2x.jpg");
	}
}

.screen-store-card {
	background-image: url("/wallet/images/screen-store-card-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-store-card {
		background-image: url("/wallet/images/screen-store-card-large_2x.jpg");
	}
}

.screen-notification {
	background-image: url("/wallet/images/screen-notification-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-notification {
		background-image: url("/wallet/images/screen-notification-large_2x.jpg");
	}
}

.screen-badge {
	background-image: url("/wallet/images/screen-badge-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-badge {
		background-image: url("/wallet/images/screen-badge-large_2x.jpg");
	}
}

.device-badge.device-medium-for-small {
	width: 283px;
	height: 314px;
}
.device-badge.device-medium-for-small .device-hardware {
	width: 283px;
	height: 314px;
	background-size: 283px 566px;
	background-position: center bottom;
}
.device-badge.device-medium-for-small .screen-badge {
	top: 0;
	width: 246px;
	height: 295px;
	background-size: 246px 532px;
	background-position: center bottom;
	background-image: url("/wallet/images/screen-badge-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) {
	.device-badge.device-large-for-medium .screen-badge {
		background-image: url("/wallet/images/screen-badge-large_2x.jpg");
	}
}

.router-icon-document {
	margin-bottom: 1em;
	width: 64px;
	height: 64px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-url: img("/assets/elements/icons/wwdr-unified/document.svg");
}

@media only screen and (max-width: 1068px) {
	.lockup-hero {
		width: 346px;
		height: 466px;
	}
	.lockup-apple-pay {
		width: 461px;
		height: 257px;
		background-image: url("/wallet/images/lockup-apple-pay-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) {
		.lockup-apple-pay {
			background-image: url("/wallet/images/lockup-apple-pay-medium_2x.jpg");
		}
	}
	.screen-boarding {
		background-image: url("/wallet/images/screen-boarding-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-boarding {
			background-image: url("/wallet/images/screen-boarding-medium_2x.jpg");
		}
	}

	.screen-coupon {
		background-image: url("/wallet/images/screen-coupon-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-coupon {
			background-image: url("/wallet/images/screen-coupon-medium_2x.jpg");
		}
	}

	.screen-event {
		background-image: url("/wallet/images/screen-event-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-event {
			background-image: url("/wallet/images/screen-event-medium_2x.jpg");
		}
	}

	.screen-generic {
		background-image: url("/wallet/images/screen-generic-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-pgeneric {
			background-image: url("/wallet/images/screen-generic-medium_2x.jpg");
		}
	}

	.screen-store-card {
		background-image: url("/wallet/images/screen-store-card-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-pstore-card {
			background-image: url("/wallet/images/screen-store-card-medium_2x.jpg");
		}
	}

	.screen-notification {
		background-image: url("/wallet/images/screen-notification-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-notification {
			background-image: url("/wallet/images/screen-notification-medium_2x.jpg");
		}
	}
	.device-badge.device-medium-for-small {
		width: 212px;
		height: 239px;
	}
	.device-badge.device-medium-for-small .device-hardware {
		top: 0;
		width: 212px;
		height: 239px;
		background-size: 212px 425px;
		background-position: center bottom;
	}
	.device-badge.device-medium-for-small .screen-badge {
		width: 185px;
		height: 225px;
		background-size: 185px 399px;
		background-position: center bottom;
		background-image: url("/wallet/images/screen-badge-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) {
		.device-badge.device-medium-for-small .screen-badge {
			background-image: url("/wallet/images/screen-badge-medium_2x.jpg");
		}
	}
}

@media only screen and (max-width: 734px) {
	.icon-wallet {
		margin-right: auto;
		margin-left: auto;
	}
	.lockup-hero {
		width: 288px;
		height: 388px;
		background-image: url("/wallet/images/lockup-hero-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) {
		.lockup-hero {
			background-image: url("/wallet/images/lockup-hero-medium_2x.png");
		}
	}
	.lockup-apple-pay {
		margin: 2em auto 0;
		width: 300px;
		height: 170px;
		background-image: url("/wallet/images/lockup-apple-pay-small.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) {
		.lockup-apple-pay {
			background-image: url("/wallet/images/lockup-apple-pay-small_2x.jpg");
		}
	}
}

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

/* ========== Grid ========== */
#main section.section.section-boarding {
	padding-top: 0;
	padding-bottom: 2em;
}
#main section.section.section-coupon,
#main section.section.section-event,
#main section.section.section-store-card,
#main section.section.section-generic {
	padding-top: 2em;
	padding-bottom: 2em;
}
#main section.section.section-notification {
	padding-top: 2em;
	padding-bottom: 0;
}

@media only screen and (max-width: 734px) {
	#main section.section.section-boarding {
		padding-top: 0;
		padding-bottom: 1em;
	}
	#main section.section.section-coupon,
	#main section.section.section-event,
	#main section.section.section-store-card,
	#main section.section.section-generic {
		padding-top: 1em;
		padding-bottom: 1em;
	}
	#main section.section.section-notification {
		padding-top: 1em;
		padding-bottom: 0;
	}
}

/* === DARK MODE === */
html body#wallet:not([data-color-scheme="light"]) .bg-gradient {
	background: linear-gradient(
		to top,
		var(--dark) 0%,
		var(--fill-gray-quaternary) 100%
	);
}
body[data-color-scheme="dark"] .bg-rounded {
	background-color: var(--fill-secondary-alt);
}
body[data-color-scheme="dark"] .bg-rounded.theme-dark {
	background-color: var(--fill-secondary-alt);
}
body[data-color-scheme="dark"] .section-passkit img {
	filter: invert(1);
}