.city-card{aspect-ratio:3/4;border-radius:var(--r-lg);isolation:isolate;color:var(--cream);box-shadow:var(--shadow-sm);transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out);display:block;position:relative;overflow:hidden;container-type:inline-size}.city-card--lg{aspect-ratio:auto;min-height:100%}.city-card .art{z-index:-2;transition:transform 1.4s var(--ease-out);position:absolute;inset:0}.city-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}.city-card:hover .art{transform:scale(1.06)}.city-card__shade{z-index:-1;background:linear-gradient(#0000 35%,#0f140eb8);position:absolute;inset:0}.city-card__body{gap:.1rem;padding:1.4rem 1.4rem 1.3rem;display:grid;position:absolute;inset:auto 0 0}.city-card__meta{border-radius:var(--r-pill);-webkit-backdrop-filter:blur(8px);font-size:var(--step--2);letter-spacing:.04em;background:#ffffff29;justify-self:start;margin-bottom:.6rem;padding:.3em .75em;font-weight:600}.is-soon .city-card__meta{background:#00000038}.city-card__name{font-family:var(--font-display);font-variation-settings:"SOFT" 60;font-weight:400;font-size:min(var(--step-3), 15cqi);letter-spacing:-.03em;line-height:1}.city-card--lg .city-card__name{font-size:min(var(--step-4), 14cqi)}:lang(th) .city-card__name{letter-spacing:0;line-height:1.3}.city-card__th{font-family:Trirong,serif;font-weight:300;font-size:var(--step-0);opacity:.85}.city-card__go{-webkit-backdrop-filter:blur(8px);width:2.6rem;height:2.6rem;transition:background-color .4s, color .4s, transform .6s var(--ease-spring);background:#ffffff29;border-radius:50%;place-items:center;display:grid;position:absolute;bottom:1.3rem;right:1.2rem}.city-card--sm .city-card__go{top:1rem;bottom:auto;right:1rem}.city-card:hover .city-card__go{background:var(--cream);color:var(--ink);transform:rotate(45deg)}