body[data-color-scheme="light"] {
	--fpo-color: #dde3e7;
	--outer-card-color: #f5f5f7;
	--inner-card-color: #fff;
	--color-callout-border: #fafafa;
}

body[data-color-scheme="dark"] {
	--fpo-color: #4c4c4c;
	--outer-card-color: #050505;
	--inner-card-color: unset;
	--color-callout-border: #333336;
}

body[data-color-scheme="dark"] section.theme-light {
	background-color: #fff !important;
	color: #000 !important;
}

body[data-color-scheme="dark"] section.theme-light .typography-headline {
	color: #000 !important;
}

body[data-color-scheme="dark"] section.theme-light .violator {
	border-color: #bf4800 !important;
	color: #bf4800 !important;
}

body[data-color-scheme="dark"] .bg-white,
.bg-white,
.bg-white h1 {
	background-color: #f5f5f7 !important;
	color: #1d1d1f !important;
}

body[data-color-scheme="dark"] .bg-light-theme-dark {
	background-color: var(--fill-secondary-alt);
}
body[data-color-scheme="dark"] .dark-gradient {
	background: linear-gradient(to bottom, var(--dark) 0%, var(--fill-gray-secondary-alt) 100%);
}

/* HERO IMAGE */
.hero-img-container {
	width: 80%;
	margin: 0 auto;
	padding-bottom: 4em;
}

@media only screen and (max-width: 1068px) {
	.hero-img-container {
		width: 90%;
		margin: 0 auto;
		padding-bottom: 4em;
	}
}

@media only screen and (max-width: 735px) {
	.hero-img-container {
		padding-bottom: 3em;
	}
}

.hero-aspect {
	--hero-width: 1960;
	--hero-height: 1116;
	position: relative;
	height: 0;
	padding-top: calc(var(--hero-height) / var(--hero-width) * 100%);
}

.hero-aspect img {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 100%;
	height: auto;
}

.hero-rounded {
	border-radius: 18px;
}

@media only screen and (max-width: 1068px) {
	.hero-rounded {
		border-radius: 0;
	}
}

.hero-border {
	border: 1px solid #eeeeee;
}

body[data-color-scheme="dark"] .hero-border {
	border: 1px solid #333;
}

@media only screen and (max-width: 735px) {
	.hero-border {
		border: none !important;
	}
}

/* FIGURE IMAGE */
.figure-img-container {
	width: 100%;
	margin: 0 auto;
}

.figure-small-width {
	max-width: 852px;
}

.figure-aspect {
	/* 2000 × 1000 */
	--figure-width: 2000;
	--figure-height: 1000;
	position: relative;
	height: 0;
	padding-top: calc(var(--figure-height) / var(--figure-width) * 100%);
}

.figure-aspect-devkit {
	/* Apple Vision Pro */
	/* 1704 × 700*/
	--figure-width: 1704;
	--figure-height: 700;
}
.figure-aspect-labs-b {
	/* 1960 × 1102 */
	--figure-width: 1960;
	--figure-height: 1102;
}

.figure-aspect-labs {
	/* 1960 × 1307 */
	--figure-width: 1960;
	--figure-height: 1307;
}

.figure-aspect img {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 100%;
	height: auto;
}

#main section.section.section-article {
	margin-top: 3em;
}

.article-image {
	border-radius: 18px;
}

@media only screen and (max-width: 735px) {
	.article-image {
		border-radius: 10px;
	}
}

.section-article.bg-light {
	background-color: #e5eaf4;
}

@media only screen and (max-width: 735px) {
	.padding-top-mobile {
		padding-top: 1.5em !important;
	}
}

.flex-article {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 2em;
}

@media only screen and (max-width: 735px) {
	.flex-article {
		display: flex;
		flex-direction: column;
		gap: 0em;
		align-items: flex-start;
	}
}

.icon-border {
	border: 1px solid #e8e8e8;
}

.sf-icon {
	margin-top: 3em;
	/* margin-bottom: 0.4em; */
}

.wwa-icon {
	margin-top: 0.3em;
}

.wwa-icon-left {
	margin-left: 7px;
}

@media only screen and (max-width: 735px) {
	.topic-icon,
	.wwa-icon {
		margin-bottom: 0.5em;
	}

	.wwa-icon-left {
		margin-left: 0;
	}
}

/* ========== Resource Grid  ========== */
.section-overview-videos .resource-grid {
	display: grid;
	grid-template-columns: repeat(2, 2fr);
	/* grid-gap: 20px; */
	column-gap: 3em;
	row-gap: 2em;
	width: 100%;
	box-sizing: border-box;
	margin-top: 3em;
}

.section-overview-videos .resource-grid-item {
	height: auto;
	cursor: pointer !important;
	text-decoration: none !important;
}

/* @media only screen and (max-width: 735px) {
	.section-overview-videos .resource-grid {
		grid-template-columns: repeat(2, 2fr);
	}

	.section-overview-videos .resource-grid-item {
		grid-column: 1/2;
	}
} */

/* Prevents content jumping */
.image-wrapper {
	position: relative;
	height: 0;
	padding-top: calc(282 / 500 * 100%);
}

.section-overview-videos .resource-grid-item img {
	border-radius: 8px;
	position: absolute;
	top: 0;
	left: 0;
	max-width: 100%;
	height: auto;
}

.section-overview-videos a.resource-grid-item {
	color: unset;
}

.section-overview-videos a.resource-grid-item:hover {
	text-decoration: none !important;
}

.section-overview-videos .resource-grid-item h4 {
	color: unset;
	font-size: 1em;
	margin-top: 1.2em;
	cursor: pointer !important;
}

.section-overview-videos .resource-grid-item h4:hover {
	text-decoration: none;
}

.tile-labs img {
	/* position: absolute;
	height: 210px;
	right: 34px;
	bottom: 0; */
	max-height: 210px;
}

.tile-labs .tile-labs-paragraph {
	margin-bottom: 4em;
}

@media only screen and (max-width: 735px) {
	.tile-labs .tile-labs-paragraph {
		margin-bottom: 2em;
	}
}

.column-flex {
	display: flex;
	align-items: flex-end;
}

@media only screen and (max-width: 735px) {
	.mobile-icon-nudge-left {
		margin-left: -5px;
	}
}

.callout {
	background-color: #e4edff;
	border: 1px solid #93c0ed;
}
body[data-color-scheme="dark"] .callout {
	background-color: #1b2332;
	border-color: #36445f;
}

/* ========== What's new ========== */
.section-content.callout-new {
	padding: 3em 0;
}

@media only screen and (max-width: 735px) {
	.section-content.callout-new {
		padding: 2em 1.5em;
	}
}

.callout-new {
	padding-top: 2em !important;
	padding-bottom: 2em !important;
	background-color: #f1f5fa;
}

/* body[data-color-scheme="light"] .callout-new {
	border: 1px solid #f1f5fa;
} */

body[data-color-scheme="dark"] .callout-new {
	background-color: var(----fill-tertiary) !important;
}

.callout-new h2 {
	display: flex;
	align-items: center;
}

body[data-color-scheme="dark"] .callout-title {
	color: #fff;
}

.whats-new-icon {
	width: 32px;
}

/* ========== Grid  ========== */
#main section.section {
	padding-top: 4em;
	padding-bottom: 4em;
}
#main section.section.section-banner {
	padding-top: 1em;
	padding-bottom: 1em;
}
#main section.section.section-resources {
	padding-top: 4em;
	padding-bottom: 4em;
}
#main section.section-apps .section-content .row > .column > .row {
	margin-top: 3em;
}
/* #main section.section.section-resources:last-of-type {
	padding-top: 2em;
	padding-bottom: 2em;
} */
#main section .section-content .row {
	margin-left: 0;
	margin-right: 0;
}
#main section .section-content .row > .column {
	padding: 0;
}

@media only screen and (max-width: 1068px) {
	#main section .section-content .row {
		margin-left: 0;
		margin-right: 0;
	}
	#main section .section-content .row > .column {
		padding: 0;
	}
}

@media only screen and (max-width: 735px) {
	#main section.section {
		padding-top: 3em;
		padding-bottom: 3em;
	}
	#main section.section.section-resources {
		padding-top: 2em;
		padding-bottom: 2em;
	}
	/* #main section.section.section-resources:last-of-type {
		padding-top: 2em;
		padding-bottom: 2em;
	} */
	#main section .section-content .row {
		margin-left: 0;
		margin-right: 0;
	}
	#main section .section-content .row > .column {
		padding: 0;
	}
}