body[data-color-scheme="light"] #main section h1,
body[data-color-scheme="light"] #main section h2,
body[data-color-scheme="light"] #main section h3 {
	color: #333;
}

.section-hero {
	background: #fff -webkit-linear-gradient(top, #c1e0f6, #fff) top center repeat-x;
	background: #fff linear-gradient(to bottom, #c1e0f6, #fff) top center repeat-x;
}

.section-swift {
	background: #eff6fd;
}

body[data-color-scheme="dark"] .section-swift {
	background: var(--fill-secondary-alt);
}

.grid-box {
	display: grid;
	grid-template-columns: 30% 40% 30%;
	column-gap: 1.5em;
	row-gap: 0.85em;
}

@media (max-width: 1068px) {
	.grid-box {
		grid-template-columns: 60% 40%;
	}
}

@media (max-width: 734px) {
	.grid-box {
		margin-top: 2em !important;
		grid-template-columns: 100%;
	}
}

.code-icon {
	width: 20px;
	height: 20px;
	margin-right: 10px;
}

.section-content .grid-box .row {
	margin-left: 0;
	margin-right: 0;
}

.icon-app {
	margin-bottom: 1em;
	width: 64px;
	height: 64px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.icon-app:not(:first-of-type) {
	margin-left: 0.5em;
}

/*.===== Images ===== */
.lockup-image-container {
	min-height: 443px;
}

.ipad-image-container {
	min-height: 713px;
}

@media only screen and (max-width: 1068px) {
	.lockup-image-container {
		min-height: 312px;
	}

	.ipad-image-container {
		min-height: 503px;
	}
}

@media only screen and (max-width: 734px) {
	.lockup-image-container {
		min-height: 164px;
	}

	.ipad-image-container {
		min-height: 264px;
	}
}

/* ========== Grid ========== */
#main section.section {
	padding-top: 3em;
	padding-bottom: 3em;
}