.forecast-weather-container
	height: 100%
	width: 100%;
	display: none
	flex-direction: column-reverse
	align-items: center
	justify-content: space-around
	opacity: 0
	.forecast-weather
		display: flex
		padding: 50px
		font-size: 1.2rem
		font-family: cursive
		text-align: center
		color: #ccc
		.day
			display: flex
			flex-direction: column
			align-items: center
			flex: 1
			padding: 13px 5px 10px 5px
			margin-right: 20px
			background: rgba(160, 158, 151, 0.5)
			box-shadow: 4px 0 25px 3px rgba(0, 0, 0, 0.1)
			border-radius: 5px
			&:last-child
				margin-right: 0
			span
				margin-bottom: 8px
			.date
				font-size: 1rem
			.city-name
				margin-bottom: 8px
				font-size: 1.4rem
			.condition-text
				margin-top: -9px
	.button-container
		margin-top: 35px
		.btn
			text-align: center
	&.show
		opacity: 1
		transition: opacity .3s
		display: flex

.forecast-weather-container
	height: 100%
	width: 100%;
	display: none
	flex-direction: column-reverse
	align-items: center
	justify-content: space-around
	opacity: 0
	.forecast-weather
		display: grid
		grid-template-columns: repeat(7, 13%)
		grid-column-gap: 15px
		font-size: 1.2rem
		font-family: cursive
		text-align: center
		color: #ccc
		.day
			display: flex
			flex-direction: column
			align-items: center
			padding: 13px 5px 10px 5px
			background: rgba(160, 158, 151, 0.5)
			box-shadow: 4px 0 25px 3px rgba(0, 0, 0, 0.1)
			border-radius: 5px
			&:last-child
				margin-right: 0
			span
				margin-bottom: 8px
			.date
				font-size: 1rem
			.city-name
				margin-bottom: 8px
				font-size: 1.4rem
			.condition-text
				margin-top: -9px
	.button-container
		margin-top: 35px
		.btn
			text-align: center
	&.show
		opacity: 1
		transition: opacity .3s
		display: flex

Add grid to forecast weather
Add grid to forecast weather
