/* 基础样式定义 */
figure {
  position: relative;
  width: 90%; /* 固定宽度 */
  height: 400px; /* 固定高度 */
  margin: 10px auto;
  overflow: hidden; /* 隐藏超出部分 */
}

/* 图片样式 - 实现中上部定位与比例缩放 */
figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-height: 90%; /* 占据figure高度的70%，可根据需求调整 */
  object-fit: contain; /* 保持比例缩放，不拉伸变形 */
  transition: all 0.5s ease-in-out; /* 图片更换过渡效果 */
}

/* figcaption样式 - 实现中下部定位 */
figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  background-color: rgba(69, 174, 222, 0.7); /* 半透明背景 */
  color: #edf3e7;
  text-align: center;
  transition: all 0.5s ease-in-out; /* 文字区域过渡效果 */
  font-size: 2rem;
   border-radius: 32px 0 32px 0;
}

/* 鼠标悬停效果（可选增强体验） */
figure:hover img {
  transform: scale(1.05); /* 悬停时图片轻微放大 */
}


.ewmCity{ width: 90%; margin: 5px auto; 
          display: flex; flex-wrap: wrap;
          
         align-items: center; justify-content: space-around;
}
 






/* -------------- THE button -------------- */
.ewmCity button {
 margin: 5px;   border: none;
 padding:3px 6px;
/* text */
	text-decoration: 		none;
	font: 					1.6rem 'Droid Sans', sans-serif;
	font-weight: 			bold;
	text-shadow: 			rgba(255,255,255,.5) 0 1px 0;
	-webkit-user-select: 	none;
	-moz-user-select: 		none;
	user-select: 			none;
	
	
/* layout */

	display: 				inline-block;
	position: 				relative;
	
	-webkit-border-radius: 	8px;
	-moz-border-radius: 	8px;
	border-radius: 	8px;
	
/* effects */
	border-top: 		1px solid rgba(255,255,255,0.8);
	border-bottom: 		1px solid rgba(0,0,0,0.1);
 
	 
	transition: 		background .2s ease-in-out;
	
/* color */
	color: 				hsl(210, 88%, 53%) !important;
	background-color: 	#D8BDFC
	
	 
	box-shadow:		 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
						hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
						rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}
 
 



.ewmCity button:hover {
	cursor: pointer;
    	background-color: 	hsl(101, 91%, 54%);
    
}
 
.ewmCity button:active {
	 
	box-shadow: 		inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ 
							rgba(0,0,0,0.4) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

	transform: 			translateY(.2em);
}
 
.ewmCity button:focus {
	outline: none;
	color: rgba(254,255,255,0.9) !important;
	text-shadow: rgba(0,0,0,0.2) 0 1px 2px;
}