.city-attractions{padding:48px 0 50px;border-top:1px solid #cbd7ce}
.city-attractions .section-head{align-items:end}
.city-attractions-all{display:inline-flex;align-items:center;gap:5px;color:#336b4c;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap}
.city-attractions-all svg{width:16px;height:16px;transition:transform .2s}
.city-attractions-all:hover svg{transform:translate(2px,-2px)}
.city-attractions-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.city-attraction{min-width:0;min-height:245px;display:flex;flex-direction:column;padding:20px 20px 18px;border:1px solid #ccd9cf;border-radius:5px;background:#f4f7f1;text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.city-attraction:first-child{background:#284b40;color:#f4f7ee;border-color:#284b40}
.city-attraction:nth-child(3){background:#e8eef0;border-color:#cfdbdc}
.city-attraction:nth-child(4){background:#f0ece4;border-color:#ded8ca}
.city-attraction:hover{transform:translateY(-4px);box-shadow:0 12px 23px #284b4020;border-color:#78a58a}
.city-attraction:focus-visible,.city-attractions-all:focus-visible{outline:2px solid #2f7652;outline-offset:3px}
.city-attraction-top{display:flex;justify-content:space-between;align-items:start;min-height:32px}
.city-attraction-top svg{width:19px;height:19px;color:#648771}
.city-attraction:first-child .city-attraction-top svg{color:#d7e6d5}
.city-attraction-number{font-size:27px;line-height:1;font-weight:700;color:#9caf9f}
.city-attraction:first-child .city-attraction-number{color:#afcbbc}
.city-attraction-type{margin-top:18px;font-size:11px;font-weight:700;color:#698573}
.city-attraction:first-child .city-attraction-type{color:#bcd5c6}
.city-attraction strong{display:block;margin:8px 0 10px;font-size:21px;line-height:1.35;overflow-wrap:anywhere}
.city-attraction-intro{font-size:12px;line-height:1.75;color:#63796a;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.city-attraction:first-child .city-attraction-intro{color:#d0e0d5}
.city-attraction-foot{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px;font-size:11px;font-weight:700;color:#3f7756}
.city-attraction-foot svg{width:15px;height:15px}
.city-attraction:first-child .city-attraction-foot{color:#c9e5d1}
.city-attractions-note{margin:14px 0 0;color:#718476;font-size:11px;line-height:1.6}
@media(max-width:950px){.city-attractions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.city-attractions{padding:38px 0}.city-attractions .section-head{align-items:start;gap:8px}.city-attractions-all{font-size:11px}.city-attractions-grid{gap:8px}.city-attraction{min-height:215px;padding:15px}.city-attraction strong{font-size:18px}.city-attraction-intro{font-size:11px;-webkit-line-clamp:2}}
@media(max-width:390px){.city-attractions-grid{grid-template-columns:1fr}.city-attraction{min-height:170px}.city-attraction-intro{-webkit-line-clamp:2}}
@media(prefers-reduced-motion:reduce){.city-attraction,.city-attractions-all svg{transition:none}}

.city-attractions .section-head{flex-wrap:wrap;gap:12px}
.city-attractions-all{font-size:15px;color:#24623f}
.city-attraction-type{font-size:12px;color:#486d54}
.city-attraction-intro{font-size:14px;color:#405e4a;line-height:1.65}
.city-attraction-foot{font-size:12px}
.city-attractions-note{font-size:12px;color:#4d6956}
@media(max-width:580px){.city-attractions-all{font-size:13px}.city-attraction-intro{font-size:12px}.city-attraction-type{font-size:12px}.city-attraction-foot{font-size:11px}}