body[data-color-scheme="light"] {
	--tutorial-content-eyebrow: #6e6e73;
}

body[data-color-scheme="dark"] {
	--tutorial-content-eyebrow: #999;
}

.student-image-banner {
	width: 100%;
	max-width: 2560px;
}

.flex-planning {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 7px;
}

.flex-planning a.button {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex-planning .svg-device {
	margin-right: 7px;
}

.button:hover .svg-device {
	filter: invert(1);
}

body[data-color-scheme="dark"] .button:hover .svg-device {
	filter: brightness(100);
}

.tutorial-content-eyebrow {
	color: var(--tutorial-content-eyebrow) !important;
	/* font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif; */
	font-size: 14px;
	font-weight: 400;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3333733333;
}

h5.tutorial-content-eyebrow + h4 {
	margin-top: 0.2em;
}

.callout,
.callout-classic {
	height: 100%;
	border: none !important;
	box-shadow: 2px 4px 12px #00000010;
	transition: 300ms;
}

.whats-new-callout {
	padding: 1em !important;
}

/* body[data-color-scheme="light"] .callout:hover,
body[data-color-scheme="light"] .callout-classic:hover {
	box-shadow: 2px 4px 16px #00000020;
} */

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

body[data-color-scheme="light"] .callout-classic,
body[data-color-scheme="light"] .bg-classic {
	background-color: #fff !important;
}

body[data-color-scheme="dark"] .callout,
body[data-color-scheme="dark"] .bg-classic {
	background-color: #000 !important;
}

/* body[data-color-scheme="light"] .callout-cert {
	color: #fff !important;
	background: linear-gradient(to top right, #f1645f, #d58626) !important;
}

body[data-color-scheme="dark"] .callout-cert {
	background: linear-gradient(to top right, #5e0b09, #814700) !important;
}

.callout-cert p a {
	color: #fff !important;
} */

.column a:hover {
	text-decoration: none !important;
}

.column a:hover p.link {
	text-decoration: underline;
}

.callout-space-between {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1em;
}

/* ========== Images ========== */
.row-card-profile {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1em;
}

.profile-image {
	width: 75px;
	height: 75px;
	max-width: 75px;
	border-radius: 100px;
	background-size: cover;
	flex: 1 0 auto;
}

.profile-alexander {
	background-image: url("/learn/images/creation-portrait-alexander-large_2x.jpg");
}

.profile-zoey {
	background-image: url("/learn/images/creation-portrait-zoey-large_2x.jpg");
}

/* ========== Icons ========== */
picture {
	display: inherit;
}

.app-icon {
	background-size: 70px 70px;
	width: 70px;
	height: 70px;
	margin-bottom: 14px;
}

.app-icon-large {
	background-size: 96px 96px;
	width: 96px;
	height: 96px;
	margin-bottom: 14px;
}

.swift-playgrounds-icon {
	background-image: url("/assets/elements/icons/swift-playgrounds-mac/swift-playgrounds-mac-96x96_2x.png");
	background-size: 96px 96px;
	width: 96px;
	height: 96px;
}

.xcode-icon {
	background-image: url("/assets/elements/icons/xcode/xcode-96x96_2x.png");
	background-size: 96px 96px;
	width: 96px;
	height: 96px;
}

.swift-student-challenge-icon {
	background-image: url("/learn/images/ssc-logo-code-icon_2x.png");
	background-size: 80px 80px;
	width: 80px;
	height: 80px;
}

.apple-certification-icon {
	background-image: url("/learn/images/apple-cert_2x.png");
	background-repeat: no-repeat;
	background-size: 72px 72px;
	width: 80px;
	height: 80px;
}

.timer-icon {
	margin-right: 0.35294rem;
	height: 0.94118rem;
	width: 0.94118rem;
}

body[data-color-scheme="dark"] .timer-icon {
	fill: #a1a1a6;
}

body[data-color-scheme="light"] .timer-icon {
	fill: unset;
}

.svg-icon {
	fill: var(--colors-svg-icon-fill-light, var(--color-svg-icon));
	transform: scale(1);
	-webkit-transform: scale(1);
	overflow: visible;
}

/* ========== Color Overrides ========== */
body[data-color-scheme="light"] .bg-light {
	background-color: #f5f5f7;
}

/* ========== Grid ========== */
.section-content .row > .column {
	padding: 10px;
}

@media only screen and (max-width: 734px) {
	.section-content .row > .column {
		padding: 0;
		padding-bottom: 1em;
	}
}

#main .section-logo .section-content .row {
	margin-left: auto;
	margin-right: auto;
}

#main section.section {
	padding-top: 4em;
	padding-bottom: 4em;
}

@media only screen and (max-width: 734px) {
	#main section.section {
		padding-top: 3em;
		padding-bottom: 3em;
	}
}

#main section.section-hero {
	padding-top: 3em;
	padding-bottom: 2em;
}

@media only screen and (max-width: 734px) {
	#main section.section-hero {
		padding-top: 3em;
		padding-bottom: 2em;
	}
}

#main section.section-caption {
	padding-top: 1em;
	padding-bottom: 1em;
}

#main section.section-editorial {
	padding-top: 3em;
	padding-bottom: 3em;
}

@media only screen and (max-width: 734px) {
	#main section.section-editorial {
		padding-top: 2em;
		padding-bottom: 2em;
	}
}

#main section.section-plans {
	padding-top: 2em;
	padding-bottom: 2em;
}

#main section.section-editorial,
#main section.section-tutorials,
#main section.section-tools,
#main section.section-plans {
	margin-bottom: 30px;
}

#main section.section-logo {
	padding-top: 4em;
	padding-bottom: 4em;
}

.section-logo .section-content .row {
	margin-left: auto;
	margin-right: auto;
}

.callout.tutorial-callout {
	position: relative;
	min-height: 350px;
	overflow: hidden;
	padding: 1.53529em 8.33333% 2.11765em;
}

@media only screen and (max-width: 734px) {
	.callout.tutorial-callout {
		position: relative;
		min-height: 200px;
	}
}

.tutorial-callout-flex {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
}

.tutorial-callout-flex.tcf-g {
	gap: 0 !important;
}

.callout.tutorial-callout.tcf-g {
	min-height: unset;
}

.tutorial-callout-flex h5 {
	margin-top: 1em;
}

body[data-color-scheme="light"] .callout.theme-dark,
body[data-color-scheme="dark"] .callout.theme-dark {
	background-color: #000;
}

.tutorial-image-orange {
	height: 150px;
	width: auto;
}

.tutorial-image {
	position: absolute;
	top: 35%;
	right: 0%;
	/* width: 85%; */
	width: 71%;
	opacity: 0.9;
	transition: 0.25s;
}

@media only screen and (max-width: 734px) {
	.tutorial-image {
		position: absolute;
		top: unset;
		bottom: -40%;
		/* right: 0%; */
		width: 100%;
	}
}

@media only screen and (max-width: 500px) {
	.tutorial-image {
		position: absolute;
		top: unset;
		bottom: -10%;
		width: 100%;
	}
}

.badge-absolute {
	position: absolute;
	top: 30px;
	left: 30px;
}

.column-flex {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5em;
	padding-right: 4.5em !important;
}

@media only screen and (max-width: 734px) {
	.column-flex {
		padding-right: 0 !important;
	}
}