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

.bg-blue {
	background-color: #eef4fa;
}

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

.device-image {
	margin-top: 2em;
}
.screen-hero {
	background-image: url("/xcode/images/screen-hero-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-hero {
		background-image: url("/xcode/images/screen-hero-large_2x.jpg");
	}
}

.screen-only {
	display: block;
	position: relative;
	margin-bottom: 1.5em;
	width: 438px;
	height: 274px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
}
.screen-tabs {   
	background-image: url("/xcode/images/screen-tabs-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-tabs {
		background-image: url("/xcode/images/screen-tabs-medium_2x.jpg");
	}
}
.screen-fonts {   
	background-image: url("/xcode/images/screen-fonts-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-fonts {
		background-image: url("/xcode/images/screen-fonts-medium_2x.jpg");
	}
}
.screen-completion {   
	background-image: url("/xcode/images/screen-code-complete-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-completion {
		background-image: url("/xcode/images/screen-code-complete-medium_2x.jpg");
	}
}
.screen-organizer {   
	background-image: url("/xcode/images/screen-organizer-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-corganizer {
		background-image: url("/xcode/images/screen-corganizer-medium_2x.jpg");
	}
}

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

.icon-xcode {
	margin-bottom: 1.5em;
	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");
	}
}

.icon-xcode-project {
	margin-bottom: 1.5em;
	width: 96px;
	height: 96px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("/assets/elements/icons/xcode12-project/xcode-12-project-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-project {
		background-image: url("/assets/elements/icons/xcode12-project/xcode-12-project-96x96_2x.png");
	}
}

.row-features .screen-only {
	margin-top: 4em;
}
.row-headline + .row-features .screen-only {
	margin-top: 0;
}

@media only screen and (max-width: 1068px) {
	.screen-hero {
		background-image: url("/xcode/images/screen-hero-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-hero {
			background-image: url("/xcode/images/screen-hero-medium_2x.jpg");
		}
	}
	.screen-swiftui {
		background-image: url("/xcode/images/screen-hero-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-swiftui {
			background-image: url("/xcode/images/screen-hero-medium_2x.jpg");
		}
	}
	.screen-only {
		width: 288px;
		height: 180px;
	}
	.screen-tabs {  
		background-image: url("/xcode/images/screen-tabs-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) {
		.screen-tabs {
			background-image: url("/xcode/images/screen-tabs-small_2x.jpg");
		}
	}
	.screen-fonts {  
		background-image: url("/xcode/images/screen-fonts-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) {
		.screen-fonts {
			background-image: url("/xcode/images/screen-fonts-small_2x.jpg");
		}
	}
	.screen-completion {  
		background-image: url("/xcode/images/screen-code-complete-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) {
		.screen-completion {
			background-image: url("/xcode/images/screen-code-complete-small_2x.jpg");
		}
	}
	.screen-organizer {  
		background-image: url("/xcode/images/screen-organizer-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) {
		.screen-organizer {
			background-image: url("/xcode/images/screen-organizer-small_2x.jpg");
		}
	}
}


@media only screen and (max-width: 735px) {
	.section-more .row-features .column:last-of-type h4 {
		margin-top: 1.6em;
	}
	.screen-hero {
		background-image: url("/xcode/images/screen-hero-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) {
		.screen-hero {
			background-image: url("/xcode/images/screen-hero-small_2x.jpg");
		}
	}
	.screen-swiftui {
		background-image: url("/xcode/images/screen-hero-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) {
		.screen-swiftui {
			background-image: url("/xcode/images/screen-hero-small_2x.jpg");
		}
	}
	.row-headline + .row-features .screen-only {
		margin-top: 4em;
	}
	.row-headline + .row-features .column:first-of-type .screen-only {
		margin-top: 0;
	}
	.section-more .row.typography-subbody > .column:not(:first-of-type) p,
	.section-project .row.row-features .column:not(:first-of-type) h3 {
		margin-top: 1.6em;
	}
}

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


/* ========== Grid ========== */
#main section.section.section-resources {
	padding-bottom: 0;
}
#main section.section-hero .section-content .row.row-headline {
	margin-top: 4em;
	margin-bottom: 4em;
}
#main section.section-more .section-content .row.row-headline,
#main section.section-project .section-content .row.row-headline {
	margin-bottom: 4em;
}
#main section .section-content .row.row-features .column.large-6:first-of-type {
	padding-right: 3em;
}
#main section .section-content .row.row-features .column.large-6:last-of-type {
	padding-left: 3em;
}


@media only screen and (max-width: 1068px) {
	#main section.section-more .section-content .row.row-headline,
	#main section.section-project .section-content .row.row-headline {
		margin-bottom: 3em;
	}
}

@media only screen and (max-width: 735px) {
	#main section.section {
		padding-top: 4em;
		padding-bottom: 4em;
	}
	#main section .section-content .row > .column {
		padding: 0;
	}
	#main section .section-content .row.row-features .column.large-6:first-of-type {
		padding-right: 0;
	}
	#main section .section-content .row.row-features .column.large-6:last-of-type {
		padding-left: 0;
	}
}