:root {
	--text_light: #fff;
	--text_med: #53627c;
	--text_dark: #1e2432;
	--red: #ff1e42;
	--darkred: #c3112d;
	--orange: #ff8c00;
}

.ajax-section {
	position: absolute;
	top: 0;
}

.ajax-section .container {}

.ajax-section .cities {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.ajax-section .city {
	background-color: rgb(0, 0, 0);
	/* Fallback color */
	background-color: rgba(0, 0, 0, 0.4);
	/* Black w/opacity/see-through */
	color: var(--text_light);
	font-weight: bold;
	border: 3px solid #f1f1f1;
	position: relative;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 10px;
	width: 180px;
}

.ajax-section figcaption {
	font-size: 1rem;
	margin-top: 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ajax-section .city-temp {
	font-size: 3rem;
	font-weight: bold;
	color: var(--text_light);
}

.ajax-section .city sup {
	font-size: 0.5em;
}

.ajax-section .city-name {
	font-size: 1rem;
}

.ajax-section .city-name sup {
	padding: 0.2em 0.6em;
	border-radius: 30px;
	color: var(--text_light);
	background: var(--orange);
}

.ajax-section .city-icon {
	filter: invert(100%);
	width: 75px;
	height: 75px;
}

@media screen and (max-width: 1000px) {
	body {
		padding: 30px;
	}
	.ajax-section .cities {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 700px) {
	.heading, .ajax-section .city-temp {
		font-size: 3rem;
	}
	.ajax-section {
		margin-top: 20px;
	}
	.ajax-section .cities {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 500px) {
	body {
		padding: 15px;
	}
	.ajax-section .cities {
		grid-template-columns: repeat(1, 1fr);
	}
}