:root {
	--sk-tile-padding: 2em 2.5em;
	--tile-custom-gap: 1em;
}

@media only screen and (max-width: 1068px) {
	:root {
		--sk-tile-padding: 2em 1.5em;
	}
}

body[data-color-scheme="light"] {
	--bg-light-override: #f5f5f7;
	--bg-fill: #fff;
	--bg-fill-invert: #000;
	--card-border-color: #d8d8d8;
	/* --bg-lighter: #999; */
}

body[data-color-scheme="dark"] {
	--bg-light-override: #161617;
	--bg-fill: #000;
	--bg-fill-invert: #fff;
	--card-border-color: #222;
	/* --bg-lighter: #666; */
}

.bg-light {
	background-color: var(--bg-light-override);
}

.bg-fill {
	background-color: var(--bg-fill);
}

.bg-fill .tile {
	background-color: var(--bg-light-override);
}

.sf-icon {
	height: 100% !important;
	display: inline-flex !important;
	height: 100%;
	justify-content: center;
	transform: scale(1.2);
	color: #00a5f0;
	padding: 0.5em;
	font-size: 96px !important;
}

.card-icon {
	display: inline-flex;
	/* height: 100%; */
	justify-content: center !important;
	padding: 0.5em;
	text-align: center;
	margin: 0 auto;
	max-width: 192px !important;
}

.thumbnail {
	aspect-ratio: 16/9;
	margin-bottom: 1em;
}

a.video-link,
a.video-link h5,
a.video-link h5:hover,
a.video-link:hover h5 {
	text-decoration: none !important;
	color: var(--bg-fill-invert) !important;
}

a.video-link h5,
a.video-link h4 {
	color: #86868b;
}

body[data-color-scheme="dark"] a.video-link h5,
body[data-color-scheme="dark"] a.video-link h4 {
	color: #6e6e73;
}

/* ========== New Design ========== */

.tile-new-design {
	background-image: url("/design/images/sol/feature-new-design_2x.jpg");
}

body[data-color-scheme="light"] .tile-new-design button {
	filter: brightness(0.8);
}

body[data-color-scheme="dark"] .tile-new-design .tile-category.lighter {
	color: #818181;
}

body[data-color-scheme="dark"] .tile-new-design .typography-card-headline {
	color: rgb(29, 29, 31);
}

/* ========== Whats new + Pathways ========== */

.tile-whats-new {
	background: linear-gradient(to bottom right, #a9def7, #e7f1ff);
}

body[data-color-scheme="dark"] .tile-whats-new {
	background: linear-gradient(to bottom right, #1a4a63, #2c3e50);
}

.whats-new-icon {
	width: 150px !important;
	justify-content: center;
	align-self: center !important;
	padding-bottom: 1.5em;
}

.tile-pathways {
	background: linear-gradient(to bottom, #0055c7 0%, #0071e3 100%);
}

/* ========== Meet with Apple ========== */

.de-event-copy {
	margin-top: 1.5em;
}

.de-event-copy:first-of-type {
	margin-top: 0;
}

.tile-mwa {
	background-image: url("/ios/images/mwa-tile-bg_2x.jpg");
	min-height: 400px;
	border: 1px solid var(--card-border-color);
}

@media only screen and (max-width: 1068px) {
	.tile-mwa {
		min-height: 320px;
	}
}

@media only screen and (max-width: 734px) {
	.tile-mwa {
		min-height: 400px;
	}
}

.tile-mwa .tile-content {
	height: 100%;
}

.tile-mwa .place-self-center {
	place-self: center;
}

.tile-mwa .tile-content .grid {
	place-content: center;
}

@media only screen and (max-width: 734px) {
	.tile-mwa .tile-content .grid {
		place-content: flex-start;
		text-align: center;
	}
}

/* ========== Type ========== */
.tile-category {
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 1.33337;
	font-weight: 700;
	letter-spacing: -0.01em;
	/* text-transform: uppercase; */
}

/* ========== Explore platforms ========== */

.explore-platforms-grid {
	display: grid;
	gap: 1.5rem;
	place-items: center;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

@media only screen and (max-width: 1068px) {
	.explore-platforms-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.explore-platforms-grid > :nth-child(7) {
		grid-column: 1 / -1;
		justify-self: center;
	}
}

@media only screen and (max-width: 734px) {
	.explore-platforms-grid {
		grid-template-columns: repeat(1, 1fr);
	}
}

.epg-icon-container {
	color: var(--color-fill-blue);
	font-size: 65px;
}

/* ========== Grid ========== */
section.section {
	padding-top: 4em;
	padding-bottom: 4em;
}

/* ========== Light + Dark mode images  ========== */

img.dark-image,
img.light-image {
	display: none;
}

body[data-color-scheme="dark"] img.dark-image,
body[data-color-scheme="light"] img.light-image {
	display: block;
}

body[data-color-scheme="dark"] img.light-image,
body[data-color-scheme="light"] img.dark-image {
	display: none;
}