:root {
	--sk-cssgrid-column-gutter-inner: 3em;
	--winner-padding: 3em;
}

@media only screen and (max-width: 734px) {
	:root {
		--sk-cssgrid-column-gutter-inner: unset;
		--winner-padding: 1.5em;
	}
}

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

.section.section-asa {
	background: linear-gradient(to bottom, rgb(10, 35, 79), black) no-repeat top !important;
	background-size: 100% 900px !important;
}

.app-section {
	padding-top: 4em;
}

.app-section.divider-top {
	margin-top: 4em;
}

.recognition-app-icon {
	display: flex;
}

h3 {
	margin-bottom: 1.5em;
}

.developer-recognition-item {
	font-size: 14px;
}

.recognition-item.divider-bottom {
	padding-bottom: 4em;
}

.recognition-items.developer .recognition-item:not(:last-child) {
  border: 0;
  padding: 0;
}

/* ========== recognition-item ========== */
.recognition-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
}

@media only screen and (max-width: 734px) {
	.recognition-item {
		/* justify-content: space-between;
		gap: 1em; */
		justify-content: flex-start;
		align-items: flex-start;
		gap: 1em;
		flex-direction: column;
	}
}

.recognition-information {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1.5em;
}

@media only screen and (max-width: 734px) {
	[data-recognition-format="developer"] .recognition-information {
		/* display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1em;
		margin-bottom: 1em; */
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ========== recognition-app-icon ========== */

.recognition-app-icon.apple-watch img,
.recognition-app-icon.applewatch img {
	border-radius: 50%;
}

.recognition-app-icon.visionpro img,
.recognition-app-icon.vision-pro img {
	border-radius: 50%;
}

.recognition-app-icon.apple-tv img,
.recognition-app-icon.appletv img {
	border-radius: 10px;
}

/* .recognition-app-icon.iphone img,
.recognition-app-icon.ipad img,
.recognition-app-icon.arcade img {
	border-radius: 24%;
}

.recognition-app-icon.mac img {
	border-radius: 24%;
}

.recognition-app-icon.apple-tv img,
.recognition-app-icon.appletv img {
	border-radius: 10px;
}

 */

/* ========== Winners ========== */
body[data-color-scheme="light"] section:not(.bg-light) .tile {
	background-color: #f5f5f7 !important;
}

body[data-color-scheme="dark"] section:not(.bg-light) .tile {
	background-color: #141414 !important;
}

.winner-title {
	padding-top: 2em;
	margin-top: 2.5em;
	padding-bottom: 0.7em;
	margin-bottom: 0;
}

@media only screen and (max-width: 734px) {
	.winner-title {
		padding-top: 3em;
		margin-top: 3em;
	}
}

.winner-badge {
	margin-bottom: 2em;
}

.winner-poster {
	width: 100%;
	display: block;
}

.winner-item,
.finalist-content {
	display: flex;
	gap: 1em;
	align-items: center;
}

.winner-section {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

.winners-tile {
	gap: 0 !important;
}

.winners-tile-content {
	padding: var(--winner-padding);
}

.finalists-wrapper {
	padding-left: var(--winner-padding);
}

.finalists-headline {
	margin-bottom: 1.5em;
}

.finalist-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cultural-impact .winners-tile {
	margin-top: 3em;
}

/* ========== Get Button ========== */
body[data-color-scheme="light"] {
	--keyColor: #007aff;
	--keyColor-rgb: 0, 122, 255;
	--body-bold-tall: 600 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
		Arial, sans-serif;
	--systemPrimary-onDark: hsla(0, 0%, 100%, 0.85);
	--systemSecondary-onLight_IC: rgba(0, 0, 0, 0.76);
}

body[data-color-scheme="dark"] {
	--keyColor: #007aff;
	--keyColor-rgb: 0, 122, 255;
	--systemPrimary-onDark: hsla(0, 0%, 100%, 0.85);
	--systemSecondary-onLight_IC: rgba(0, 0, 0, 0.76);
}

.button-container.svelte-3i89sk {
	-webkit-margin-start: auto;
	-moz-margin-start: auto;
	margin-inline-start: auto;
	-webkit-margin-end: var(--margin-inline-end, 0);
	-moz-margin-end: var(--margin-inline-end, 0);
	flex-shrink: 0;
	margin-inline-end: var(--margin-inline-end, 0);
	mix-blend-mode: var(--button-blend-mode);
}

.get-button {
	border-radius: 1000px;
	display: inline-block;
	/* font: var(--get-button-font, var(--body-bold-tall)); */
	font-weight: bold;
	padding: 7px 16px;
	transition: background-color 0.14s ease-out;
	word-break: keep-all;
}

.get-button:hover {
	text-decoration: none;
	transition: background-color 0.21s ease-out;
}

.get-button:active {
	transition: background-color 0.14s ease-out;
}

.get-button.gray {
	--alpha-multiplier: 1;
	background-color: rgba(var(--keyColor-rgb), calc(var(--alpha-multiplier) * 0.1));
	color: var(--keyColor);
}

.get-button.gray:hover {
	background-color: rgba(var(--keyColor-rgb), calc(var(--alpha-multiplier) * 0.13));
	transition: background-color 0.21s ease-out;
}

.get-button.gray:active {
	background-color: rgba(var(--keyColor-rgb), calc(var(--alpha-multiplier) * 0.07));
	transition: background-color 0.14s ease-out;
}

@media (prefers-color-scheme: dark) {
	.get-button.gray {
		--alpha-multiplier: 1.33;
	}
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
	.get-button.gray {
		background: #fff;
	}
}

.get-button.blue {
	background-color: var(--keyColor);
	color: var(--systemPrimary-onDark);
}

.get-button.blue:hover {
	background-color: color-mix(in srgb, var(--keyColor), #000 3%);
}

.get-button.blue:active {
	background-color: color-mix(in srgb, var(--keyColor), #000 6%);
}

.get-button.transparent {
	background-color: rgba(255, 255, 255, 0.25);
}

.get-button.transparent:hover {
	background-color: rgba(255, 255, 255, 0.15);
}

.get-button.transparent:active {
	background-color: rgba(255, 255, 255, 0.2);
}

.get-button.dark-gray {
	background-color: var(--systemSecondary-onLight_IC);
	color: var(--systemPrimary-onDark);
}

.get-button.dark-gray:hover {
	background-color: rgb(from var(--systemSecondary-onLight_IC) r g b/.9);
	transition: background-color 0.21s ease-out;
}

.get-button.dark-gray:active {
	background-color: rgb(from var(--systemSecondary-onLight_IC) r g b/.66);
	transition: background-color 0.14s ease-out;
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
	.get-button.dark-gray {
		background: #fff;
	}
}

@media only screen and (max-width: 734px) {
	.get-button {
		display: none;
	}
}

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

/* @media only screen and (max-width: 1068px) {} */

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