/* Suvia city guides: existing white type over a black card gradient. */
.sx-city-gallery{width:90%;max-width:1200px;margin:64px auto 80px;min-width:0}
.sx-city-gallery .sx-blog-post-gallery-heading{max-width:760px;margin-left:auto;margin-right:auto}
.sx-city-gallery .sx-blog-post-gallery-heading h2{font-family:inherit;font-size:28px;font-weight:700;line-height:1.3;letter-spacing:-.025em;color:#1d1d1f;overflow-wrap:anywhere}
.sx-city-gallery-window{position:relative;overflow:hidden;border-radius:24px}
.sx-city-gallery .sx-city-track{display:flex;gap:24px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:0;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:0 0 2px;margin:0;width:100%;max-width:100%;outline-offset:-3px}
.sx-city-track::-webkit-scrollbar{display:none}
.sx-city-gallery .sx-city-card{flex:0 0 46%;height:430px;min-height:0;border-radius:24px;scroll-snap-align:start;scroll-snap-stop:normal;transform:none;box-shadow:none;background:#202020;position:relative;isolation:isolate;display:flex;align-items:flex-end;overflow:hidden;color:#fff;text-decoration:none;min-width:0}
.sx-city-gallery .sx-city-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .35s ease}
.sx-city-gallery .sx-blog-post-gallery-shade{background:linear-gradient(180deg,transparent 16%,#0002 32%,#000b 65%,#000 100%)}
.sx-city-card-copy{padding:30px;display:flex;flex-direction:column;gap:14px;width:100%;min-width:0}
.sx-city-card-copy strong{color:#fff;font-size:25px;line-height:1.4;font-weight:700;letter-spacing:-.015em;overflow-wrap:anywhere}
.sx-city-card-description{font-size:16px;line-height:1.65;color:#f1f1f3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.sx-city-gallery--restaurants .sx-city-card{flex-basis:28%;height:470px}
.sx-city-gallery--restaurants .sx-city-card-copy{padding:26px}
.sx-city-gallery--restaurants .sx-city-card-copy strong{font-size:25px}
.sx-city-gallery--restaurants .sx-city-card-description{font-size:15px;-webkit-line-clamp:2}
.sx-city-arrow{position:absolute;top:44%;z-index:2;width:48px;height:48px;border:0;border-radius:50%;background:#fff;color:#1d1d1f;font-size:38px;line-height:1;display:grid;place-items:center;box-shadow:0 3px 16px #0003;cursor:pointer;padding:0 0 4px;transition:opacity .2s}
.sx-city-prev{left:14px}.sx-city-next{right:14px}.sx-city-arrow:disabled{opacity:0;pointer-events:none}
.sx-city-gallery .sx-city-card:focus-visible{outline:3px solid #0071e3;outline-offset:-5px}.sx-city-arrow:focus-visible{outline:3px solid #0071e3;outline-offset:-4px}
@media(hover:hover){.sx-city-card:hover>img{transform:scale(1.035)}}
@media(max-width:800px){.sx-city-gallery{margin:44px auto 54px}.sx-city-gallery .sx-city-card{flex-basis:78%;height:430px}.sx-city-gallery--restaurants .sx-city-card{flex-basis:42%;height:440px}.sx-city-card-copy{padding:24px}.sx-city-gallery .sx-city-track{gap:18px}}
@media(max-width:520px){.sx-city-gallery .sx-city-card{flex-basis:88%;height:420px;border-radius:24px}.sx-city-gallery--restaurants .sx-city-card{flex-basis:78%;height:430px}.sx-city-gallery--restaurants .sx-city-card-copy{padding:24px}.sx-city-arrow{width:40px;height:40px;font-size:32px}.sx-city-prev{left:8px}.sx-city-next{right:8px}.sx-city-card-description{font-size:15px}}
@media(prefers-reduced-motion:reduce){.sx-city-gallery *{scroll-behavior:auto!important;transition:none!important}}

@media(max-width:600px){.sx-city-gallery .sx-blog-post-gallery-heading h2{font-size:24px}.sx-city-card-copy strong,.sx-city-gallery--restaurants .sx-city-card-copy strong{font-size:23px}}

/* City guides: match the site body scale on phones. */
@media(max-width:600px){.sx-blog-story:has(.sx-city-gallery) .sx-blog-section p{font-size:16px;line-height:1.7}.sx-blog-story:has(.sx-city-gallery) .sx-blog-lead{font-size:18px;line-height:1.65}}

/* Align the first card with the article; let the inset scroll away. */
.sx-city-gallery{width:100%;max-width:none}
.sx-city-gallery .sx-blog-post-gallery-heading{width:90%}
.sx-city-gallery-window{margin-left:0;border-radius:0}
.sx-city-gallery .sx-city-track{padding:0 24px 2px max(5%,calc((100% - 760px)/2));scroll-padding-inline:max(5%,calc((100% - 760px)/2)) 24px}
@media(max-width:600px){.sx-city-gallery .sx-city-track{padding-right:20px;scroll-padding-right:20px}}

/* Keep four dining cards wide enough to pass the left viewport edge. */
@media(min-width:801px){.sx-city-gallery--restaurants .sx-city-card{flex-basis:max(320px,25vw)}}

/* Fit exactly three dining cards on wide screens; retain scrolling at smaller widths. */
@media(min-width:1200px){
  .sx-city-gallery--restaurants .sx-city-track:has(> .sx-city-card:nth-child(3):last-child) > .sx-city-card{flex-basis:calc((100% - 48px)/3);height:auto;aspect-ratio:36/47}
}