#elk-grove {
	background: url('https://mediaim.expedia.com/destination/2/60c19414af9f738df4edbf0a314222c7.jpg')
		center no-repeat;
	background-size: cover;
}

#citrus-heights {
	background: url('https://www.citrusheights.net/ImageRepository/Document?documentID=19292')
		center no-repeat;
	background-size: cover;
}

#antelope {
	background: url('https://assets.simpleviewinc.com/simpleview/image/upload/crm/palmdaleca/AV-Mall_9E9CDD8D-CD1D-28C0-88948EED1C9719EB-9e9cdb0cad61c3a_9e9ce18a-b445-5bcf-9051ff782ae8039d.jpg')
		center no-repeat;
	background-size: cover;
}

#carmichael {
	background: url('https://upload.wikimedia.org/wikipedia/commons/7/7a/Hagan_Park_Rancho_Cordova_83_-_panoramio.jpg')
		center no-repeat;
	background-size: cover;
}

#el-dorado-hills {
	background: url('https://images.squarespace-cdn.com/content/v1/5c1423c7620b852fdfa302ae/1726597476192-SCEXPBWASH8A2JRK4VAV/5207+Breese+Cir+-48.jpg')
		center no-repeat;
	background-size: cover;
}

#sacramento {
	background: url('https://tzassets.bestwestern.com/wp-content/uploads/2023/04/05195706/Cover-photo-sourced-by-Sabrina-GettyImages-187559989-scaled.jpg')
		top no-repeat;
	background-size: cover;
}

#rancho-cordova {
	background: url('https://images.squarespace-cdn.com/content/v1/5a90bfb51137a6fdeeb6c6d2/1677178711558-X5DJLDEU90LDZWG9Y83H/Anatolia_4356+%281%29.jpg')
		center no-repeat;
	background-size: cover;
}

#roseville {
	background: url('https://images.locable.com/eyJidWNrZXQiOiJpbXBhY3QtcHJvZHVjdGlvbiIsImtleSI6Il9vcmlnaW5hbHMvMzIxMjU2ZjItZjcyZi00NGZiLTk0NmQtMDc1MzQ5ZGQwNDZjL0Rvd250b3duLVJvc2V2aWxsZS1IaWdoLVRlY2guanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjoxOTIwfSwidG9Gb3JtYXQiOiJ3ZWJwIiwid2VicCI6eyJsb3NsZXNzIjp0cnVlLCJxdWFsaXR5Ijo4MCwiZm9yY2UiOnRydWV9fX0=')
		center no-repeat;
	background-size: cover;
}

#north-highlands {
	background: url('https://www.compass.com/m/377e20cf2039842da2fc478c8310f025bccb9819_img_33_262cb/origin.webp')
		center no-repeat;
	background-size: cover;
}

#folsom {
	background: url('https://drupal-prod.visitcalifornia.com/sites/default/files/styles/fluid_1920/public/2021-01/VC-Folsom-Rainbow-Bridge-gty-504668876-RF-1280x640.jpg.webp?itok=pR7F0ILq')
		center no-repeat;
	background-size: cover;
}

#fair-oaks {
	background: url('https://images.squarespace-cdn.com/content/v1/5e4ef702d4614748c87e4a35/1585023960378-YC1SKE3D3EW7P3TDQRN0/city+picture+-+fair+oaks+california+property+management+company+ca+property+managers')
		center no-repeat;
	background-size: cover;
}

#granite-bay {
	background: url('https://www.invitedclubs.com/globalassets/granite-bay-golf-club/_images/photoshelter-2023/granite_bay_golf_dji_0069_1920_1200.jpg?format=webp')
		center no-repeat;
	background-size: cover;
}

#rocklin {
	background: url('https://upload.wikimedia.org/wikipedia/commons/5/5c/Rocklin%2C_California_-_Amtrak_station_and_Chamber_of_Commerce_building.jpg')
		center no-repeat;
	background-size: cover;
}

#gold-river {
	background: url('https://www.compass.com/m/1522928b376c8998a37526b67f903adf7faa711e_img_0_da4ef/origin.jpg')
		center no-repeat;
	background-size: cover;
}

#areas_info {
	margin: 30px 0;
}

.areas_info {
	display: flex;
	justify-content: space-between;
	align-items: start;
	gap: 20px;
}

.areas_info_content {
	max-width: 70%;
	width: 100%;
	flex: 0 0 70%;
}

.weather {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 12px;
	border-left: 2px solid black;
	max-width: 30%;
	width: 100%;
	flex: 0 0 30%;
}

.city_logo {
	width: 200px;
	margin: 0 auto;
}

.weather_title {
	text-transform: uppercase;
	font-size: 22px;
	margin: 20px 0 8px 16px;
}

.weather_title::after {
	content: '';
	display: block;
	width: 50%;
	height: 5px;
	margin-left: -16px;
	background: #d70301;
	border-radius: 150px;
	margin-top: 4px;
}

.weather_info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 68px;
	font-weight: 100;
	margin: 0 auto;
	img {
		width: 150px;
	}
}

.city_info {
	max-width: 250px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: start;
	gap: 12px;
	padding: 0 12px;
	a {
		text-align: right;
		color: rgb(0, 149, 194);
		font-size: 12px;
		margin: 0 0 0 110px;
	}
}

.city_data {
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: start;
	gap: 12px;
	padding: 0 12px;
	a {
		transition: all 0.3s ease-in-out;
		color: rgb(0, 149, 194);
		&:hover {
			color: #d70301;
			text-decoration: underline;
			text-underline-offset: 4px;
		}
	}
}

.city_info_el {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid black;
	padding: 4px 0;
}

.areas_info_supertitle {
	font-size: 36px;
}

.areas_info_title {
	margin: 12px 0;
	font-size: 36px;
	font-weight: 900;
}

.areas_info_subtitle {
	font-size: 22px;
}

.areas_info_text {
	margin: 20px 0;
	font-size: 18px;
	p {
		margin: 8px 0;
	}
}

#areas_map {
	margin: 30px 0;
}

#area_rest {
	margin: 100px 0;
}

.area_rest_title {
	text-transform: uppercase;
	font-size: 22px;
	font-weight: bold;
}

.area_rest_title::after {
	content: '';
	display: block;
	width: 10%;
	height: 5px;
	background: #d70301;
	border-radius: 150px;
	margin-top: 4px;
}

.area_info {
	margin: 30px 0;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	align-items: center;
	gap: 24px;
}

.area_info_reverse {
	flex-direction: row-reverse;
}

.area_gallery {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(3, 110px);
	img {
		width: 110px;
		height: 110px;
		object-fit: cover;
	}
}

.area_description {
	font-size: 16px;
}

.area_establishments {
	margin: 40px 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.area_establishment {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	max-width: 23%;
	flex: 0 0 23%;
	&:hover {
		.establishment_content {
			.establishment_address {
				color: #d70301;
				text-decoration: underline;
				text-underline-offset: 4px;
			}
		}
	}
}

.establishment_title {
	font-size: 18px;
	font-weight: 700;
	color: #000;
}

.establishment_content {
	display: flex;
	align-items: center;
	gap: 12px;
	img {
		width: 85px;
		height: 85px;
		object-fit: cover;
	}
	.establishment_address {
		transition: all 0.3s ease-in-out;
		font-size: 18px;
		color: #000;
	}
}