.city-list {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.list-container {
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

	.list-container h2 {
		font-size: 1.4rem;
		color: #e74c3c;
		margin-bottom: 15px;
		padding-bottom: 10px;
		border-bottom: 2px solid #eee;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		background-image: linear-gradient(to right, #178cde, #00ffe4 50%, #178cde);
	}

.list-container ul {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	gap: 12px;
	margin-top: 20px;
}

.list-container li {
	padding: 5px;
	border-radius: 5px;
	transition: background 0.3s;

}



@media (max-width: 480px) {
	body {
		padding: 10px;
	}

	.header h1 {
		font-size: 1.4rem;
	}

	list-container h2 {
		font-size: 1.2rem;
	}


	.list-container ul {
		grid-template-columns: repeat(4, 1fr);
	}
}