/* WEATHER */

.weather-container {
	display: grid;
	grid-template: 100% / repeat(4, 1fr);
	grid-gap: 1em;
	padding: 1em;
}

@media only screen and (min-width: 70em) {
	.weather-container {
		grid-template: repeat(4, 1fr) / 100%;
	}
}

.weather-container .weather-item {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: relative;
}

.weather-container .weather-item .temperature {
	position: absolute;
	bottom: 10%;
	right: 10%;
	width: 80%;
	text-align: right;
	font-size: var(--font-xl);
}