:root {
	--tile-custom-gap: 1em;
}

body[data-color-scheme="light"] {
	--theme-black: #1d1d1f;
	--color-primary: #fff;
	--main-bg: #f5f5f7;
	--color-border: #ddd;
}

body[data-color-scheme="dark"] {
	--theme-black: #1d1d1f;
	--color-primary: #000;
	--main-bg: #161616;
	--color-border: #333;
}

:root {
	--theme-black: #1d1d1f;
	--color-primary: #fff;
	--main-bg: #f5f5f7;

	--tile-border-radius: 18px;
	--tile-padding: 60px;
	--tile-min-height-full: 470px;
	--tile-min-height-half: 370px;
	--tile-min-height-half-min: 270px;
	--tile-min-height-half-min-med: 450px;
	--tile-min-height-half-min-large: 550px;

	--grid-gutter: 20px;
	--large-spacing: 4em;

	--color-helper-1: lightblue;
	--color-helper-1: lightgreen;
}

@media only screen and (max-width: 1068px) {
	:root {
		--tile-min-height-full: 470px;
		--tile-min-height-half: 470px;
		--tile-min-height-half-min: 270px;
		--tile-min-height-half-min-med: 450px;
		--tile-min-height-half-min-large: 500px;

		--tile-padding-vertical: 48px;
		--tile-padding-horizontal: 30px;
		--tile-padding: var(--tile-padding-vertical) var(--tile-padding-horizontal);
		/* --tile-min-height-full: 0px;
		--tile-min-height-half: 0px; */
	}
}

@media only screen and (max-width: 734px) {
	:root {
		--tile-min-height-full: 420px;
		--tile-min-height-half: 420px;
		--tile-min-height-half-min-large: 450px;
		--tile-min-height-tall-small: 515px;
	}
}

.theme-black {
	background-color: var(--theme-black) !important;
	color: #f5f5f7;
}

.font-blue {
	color: var(--theme-blue) !important;
}

.font-green {
	color: var(--theme-green) !important;
}

.ribbon-black {
	color: #fff;
	background-color: black;
}

.callout-basic {
	display: flex;
	background: var(--color-primary);
	gap: 1.5em;
	justify-content: center;
	padding: var(--tile-padding) !important;
	border: none;
}

@media only screen and (max-width: 734px) {
	.callout-basic {
		flex-direction: column;
	}
}


.hero-app-store {
	max-width: 750px;
}

.section-hero {
	background-color: #d5e7f8;
	color: rgb(29, 29, 31) !important;
}

body[data-color-scheme="dark"].theme-dark .section-hero,
body[data-color-scheme="dark"].theme-dark .section-hero h1,
body[data-color-scheme="dark"].theme-dark .section-hero p {
	background-color: #d5e7f8;
	color: rgb(29, 29, 31);
}

.sc-gallery__item {
	/* min-height: 500px; */
	min-height: 400px;
}

.sf-icon {
	height: 100%;
	display: inline-flex;
	height: 100%;
	justify-content: center;
	transform: scale(1.2);
	color: #00a5f0;
}

.sf-tile-icon {
	font-size: 52px;
	margin-bottom: 0.5em;
	color: var(--bg-fill-invert);
}

.article-text-wrapper img {
	margin: 1em 0;
	border-radius: 8px;
}




/* grid */

.grid-place-center {
	display: grid;
	place-items: center;
}

.grid-container + .grid-container {
	margin-top: var(--grid-gutter);
}

.grid-container {
	display: grid;
	grid-template-columns: repeat(2, 2fr);
	grid-gap: var(--grid-gutter);
	width: 100%;
	margin: auto;
	box-sizing: border-box;
}

.grid-item-awards.full {
	min-height: var(--tile-min-height-full);
	grid-column: span 2;
}

.flex-space-between {
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
	align-items: center;
}

.grid-item-awards {
	position: relative;
	box-sizing: border-box;
	border-radius: var(--tile-border-radius);
	background-color: var(--color-primary);
	overflow: hidden;
	padding: var(--tile-padding);
}

.text-item {
	padding: var(--tile-padding);
}


/* flex */
.grid-item-awards.full .flex-content {
	display: flex;
	height: 100%;
}

@media only screen and (max-width: 734px) {
	.grid-item-awards.full .flex-content {
		flex-direction: column;
	}

	.grid-item-awards.full .flex-content.fc-custom {
		justify-content: flex-start;
	}
}

.flex-nowrap {
	flex-wrap: nowrap;
}
.flex-50 {
	flex-basis: 50%;
}
.flex-no-overflow {
	overflow: hidden;
}

@media only screen and (max-width: 734px) {
	.flex-100 {
		flex-basis: 100%;
	}
	.flex-50 {
		flex-basis: 100%;
	}
	.flex-no-overflow {
		overflow: initial;
	}
}

.section-content#awards {
	margin-bottom: 24px;
}

.fill-asa {
	background-image: url("/app-store/getting-featured/images/fill-asa-large_2x.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

@media only screen and (max-width: 1068px) {
	.fill-asa {
		background-image: url("/app-store/getting-featured/images/fill-asa-medium_2x.jpg");
	}
}

@media only screen and (max-width: 734px) {
	.fill-asa {
		background-image: url("/app-store/getting-featured/images/fill-asa-small_2x.jpg");
	}
}

@media only screen and (max-width: 734px) {
	.fill-asa,
	.fill-ada {
		min-height: 500px !important;
	}
}
/* utilities */

@media only screen and (min-width: 1068px) {
	.no-padding-right-large {
		padding-right: 0 !important;
	}
	.no-padding-left-large {
		padding-left: 0 !important;
	}
	.no-padding-top-large {
		padding-top: 0 !important;
	}
	.no-padding-bottom-large {
		padding-bottom: 0 !important;
	}
}

.helperbg {
	background-color: var(--color-helper-1) !important;
}

.helperbg2 {
	background-color: var(--color-helper-2) !important;
}

.lighter-bright {
	color: #999;
}

.lighter-opacity {
	opacity: 0.7;
}

.lighter-opacity-2 {
	opacity: 0.3;
}

.white-link {
	text-decoration: underline;
	color: #fff !important;
}

@media only screen and (max-width: 734px) {
	.padding-mobile {
		padding: 3em !important;
	}
	.no-padding-left-mobile {
		padding-left: 0 !important;
	}
}

.ul-spacing-small li {
	margin-bottom: 0.5em;
}

@media only screen and (max-width: 734px) {
	.small-no-horizontal-margin {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}