body[data-color-scheme="dark"] .icon-bw {
	filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%)
		hue-rotate(219deg) brightness(103%) contrast(101%);
}

body[data-color-scheme="light"] .icon-bw {
	filter: brightness(0) saturate(100%);
}

.hero-image {
	max-width: 2560px;
}

.section-hero-image,
.section-hero-image picture {
	display: flex;
}

/* ========== Developer Center Card Overrides  ========== */
body[data-color-scheme="light"] .section-dc.bg-light {
	background-color: #f5f5f7;
}

.tile-links {
	margin-top: 1em;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	flex-grow: 1;
}

.tile-links a {
	width: fit-content;
}

.dc-card-1 {
	background-image: url("/events/developer-centers/images/dc-bengaluru_2x.jpg");
}

.dc-card-2 {
	background-image: url("/events/developer-centers/images/dc-cupertino_2x.jpg");
}

.dc-card-3 {
	background-image: url("/events/developer-centers/images/dc-shanghai_2x.jpg");
}

.dc-card-4 {
	background-image: url("/events/developer-centers/images/dc-singapore_2x.jpg");
}

/* ========== Developers Card Overrides  ========== */
.section-developers .tile {
	--developer-card-background: #f5f5f7;
	background-color: var(--developer-card-background);
}

body[data-color-scheme="dark"] .section-developers .tile {
	--developer-card-background: #141414;
}

.more-from-developer .tile__description .tile__p {
	margin-top: 5px;
}

.more-from-developer .tile__description .tile__link {
	margin-top: 5px;
	width: fit-content;
}

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

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

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

#main section.section.section-dc,
#main section.section.section-t {
	padding-top: 5em;
	padding-bottom: 5em;
}

#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.section-hero {
		padding-bottom: 2em;
	}

	#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.section-hero {
		padding-bottom: 2em;
	}

	#main section .section-content .row {
		margin-left: 0;
		margin-right: 0;
	}
	#main section .section-content .row > .column {
		padding: 0;
	}
}