: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-fill: #000;
	--bg-fill-invert: #fff;
	--card-border-color: #222;
	/* --bg-lighter: #666; */
}

.bg-light {
		background: #efefef;
		background: radial-gradient(circle,  rgba(190, 167, 216, 1) 0%,rgba(212, 171, 204, 1) 15%, rgba(231, 177, 160, 1) 25%, rgba(238, 207, 125, 1) 40%, rgba(158, 184, 142, 1) 55%, rgba(147, 217, 225, 1) 70%, rgba(216, 232, 249) 85%);
}
body[data-color-scheme="dark"] main.bg-light {
	background: #010101;
	background: radial-gradient(circle, rgba(95, 49, 147, 0.75) 0%,rgba(128, 43, 91, 0.75) 15%, rgba(207, 82, 41, 0.75) 25%, rgba(219, 156, 22, 0.75) 40%, rgba(34, 120, 71, 0.75) 55%, rgba(19, 116, 189, 0.75) 70%, rgba(12, 24, 61, 0.75) 85%);
}

body[data-color-scheme="dark"] .divider-top,
.theme-dark .divider-top {
	border-color: #ddd;
}

.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;
}

.card-media {
	overflow: hidden;
	max-height: 175px;
}
@media only screen and (max-width: 1068px) {
	.card-media {
		max-height: 188px;
	}
}
@media only screen and (max-width: 734px) {
	.card-media {
		max-height: 361px;
	}
}

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

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

/* ========== 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;
}


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

@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;
}

body[data-color-scheme="dark"] {
	--bg-light-override: #161617;
	--bg-fill: #000;
}

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

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

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

#main section.section {
	padding-top: 4em;
	padding-bottom: 4em;
}
#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: 734px) {
	#main section.section {
		padding-top: 3em;
		padding-bottom: 3em;
	}
	#main section .section-content .row {
		margin-left: 0;
		margin-right: 0;
	}
	#main section .section-content .row > .column {
		padding: 0;
	}
}