@charset "utf-8";

html,
body{
  min-height:100%;
}

:root{
  --city-container:1100px;
  --city-inline:clamp(12px, 4vw, 18px);
  --city-inline-wide:clamp(14px, 4.5vw, 24px);
  --city-title-gradient:
    linear-gradient(
      180deg,
      #fff4d6 0%,
      #ffe8b0 32%,
      var(--gold) 68%,
      #e2b866 100%
    );
  --city-title-gradient-soft:
    linear-gradient(
      180deg,
      #f5e7c6 0%,
      #ffe8b0 38%,
      var(--gold) 72%,
      #d9b56c 100%
    );
  --city-line-gradient:
    linear-gradient(
      90deg,
      rgba(240,197,111,0) 0%,
      rgba(240,197,111,.75) 18%,
      rgba(255,244,214,.98) 50%,
      rgba(240,197,111,.75) 82%,
      rgba(240,197,111,0) 100%
    );
  --city-shadow-soft:0 10px 22px rgba(0,0,0,.38);
  --city-shadow-panel:0 16px 34px rgba(0,0,0,.42);
  --city-shadow-panel-strong:0 20px 40px rgba(0,0,0,.50);
  --city-text-shadow:
    0 1px 0 rgba(0,0,0,.30),
    0 8px 18px rgba(0,0,0,.40);
  --city-focus-ring:
    0 0 0 3px rgba(240,197,111,.34),
    0 0 0 6px rgba(0,0,0,.42);
}

body.ns-home{
  position:relative;
  padding-top:0;
  background-color:#0e0e0e;
  background-image:
    linear-gradient(
      90deg,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,0) 48%,
      rgba(0,0,0,0) 52%,
      rgba(0,0,0,.92) 100%
    ),
    linear-gradient(180deg, rgba(14,14,14,.5) 0%, rgba(14,14,14,.78) 100%),
    url("../images/textures/stone_seamless.png");
  background-size:100% 100%, 100% 100%, 800px 800px;
  background-position:0 0, 0 0, center;
  background-repeat:no-repeat, no-repeat, repeat;
  background-attachment:scroll, scroll, scroll;
  --ns-container:1100px;
  --ns-container-pad:0px;
}

.ns-city{
  background:
    radial-gradient(900px 440px at 50% 0%, rgba(240,197,111,.10) 0%, rgba(240,197,111,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.08) 22%, rgba(0,0,0,.18) 100%),
    url("../images/backgrounds/bg_city_texture.jpg") repeat center top,
    #0e0e0e;
}

/* =========================
   HERO
   ========================= */

.ns-cityhero{
  position:relative;
  overflow:visible;
  width:100vw;
  margin-left:calc(50% - 50vw);
  min-height:clamp(520px, 150vw, 620px);
  height:auto;
  border-bottom:0;
  background:transparent;
}

.ns-cityhero__media{
  position:absolute;
  top:clamp(58px, 6.5vw, 60px);
  left:0;
  right:0;
  overflow:hidden;
  height:clamp(340px, 50vw, 570px);
  -webkit-mask-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 45%,
      rgba(0,0,0,.85) 55%,
      rgba(0,0,0,.55) 65%,
      rgba(0,0,0,.25) 75%,
      rgba(0,0,0,.10) 85%,
      rgba(0,0,0,.02) 93%,
      rgba(0,0,0,0) 100%
    );
  mask-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 45%,
      rgba(0,0,0,.85) 55%,
      rgba(0,0,0,.55) 65%,
      rgba(0,0,0,.25) 75%,
      rgba(0,0,0,.10) 85%,
      rgba(0,0,0,.02) 93%,
      rgba(0,0,0,0) 100%
    );
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}

.ns-cityhero__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.03) 0%,
      rgba(0,0,0,.04) 28%,
      rgba(0,0,0,.03) 40%,
      rgba(0,0,0,.01) 48%,
      rgba(0,0,0,0) 52%
    );
}

.ns-cityhero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

.ns-cityhero__overlay{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:clamp(520px, 150vw, 620px);
  padding:0 clamp(12px, 4vw, 14px) clamp(12px, 4vw, 14px);
}

.ns-cityhero__panel{
  width:min(760px, 100%);
  margin:0 auto;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  transform:translateY(clamp(88px, 18vw, 148px));
}

.ns-cityhero__icon,
.ns-cityanchors__icon{
  background:var(--city-title-gradient);
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

.ns-cityhero__icon{
  display:block;
  width:clamp(78px, 11vw, 110px);
  height:clamp(78px, 11vw, 110px);
  margin:0 auto 0;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.46)) drop-shadow(0 7px 14px rgba(0,0,0,.34));
}

.ns-cityhero__ttl,
.ns-cityanchors__txt,
.ns-citysection__ttl,
.ns-citycard__ttl{
  background:var(--city-title-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.ns-cityhero__ttl{
  position:relative;
  margin:0 0 clamp(14px, 2.8vw, 20px);
  text-align:center;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:700;
  font-size:clamp(32px, 8.6vw, 42px);
  line-height:1.04;
  letter-spacing:.04em;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.42)) drop-shadow(0 7px 14px rgba(0,0,0,.30));
}

.ns-cityhero__ttl::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  transform:translateX(-50%);
  width:90%;
  height:1px;
  background:
    linear-gradient(
      90deg,
      rgba(240,197,111,0) 0%,
      rgba(240,197,111,.96) 18%,
      rgba(255,244,214,1) 50%,
      rgba(240,197,111,.96) 82%,
      rgba(240,197,111,0) 100%
    );
}

.ns-cityhero__sub{
  margin:0 0 clamp(14px, 2.4vw, 22px);
  text-align:center;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:600;
  font-size:clamp(20px, 4.6vw, 24px);
  line-height:1.4;
  letter-spacing:.04em;
  background:var(--city-title-gradient-soft);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.40)) drop-shadow(0 8px 15px rgba(0,0,0,.30));
}

.ns-cityhero__txt{
  width:min(760px, 100%);
  margin:0 auto;
  text-align:center;
  font-family:"Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:clamp(14px, 3.7vw, 15px);
  line-height:1.85;
  letter-spacing:.01em;
  color:rgba(255,255,255,.92);
  text-shadow:var(--city-text-shadow);
}

/* =========================
   HERO ICONS
   ========================= */

.ns-city--san_sebastian .ns-cityhero__icon{
  -webkit-mask-image:url("../images/icons/icon-crab.svg");
  mask-image:url("../images/icons/icon-crab.svg");
}

.ns-city--hondarribia .ns-cityhero__icon{
  -webkit-mask-image:url("../images/icons/icon-ferry.svg");
  mask-image:url("../images/icons/icon-ferry.svg");
}

.ns-city--guetaria .ns-cityhero__icon{
  -webkit-mask-image:url("../images/icons/icon-whale.svg");
  mask-image:url("../images/icons/icon-whale.svg");
}

.ns-city--bilbao .ns-cityhero__icon{
  -webkit-mask-image:url("../images/icons/icon-wolf.svg");
  mask-image:url("../images/icons/icon-wolf.svg");
}

.ns-city--guernica .ns-cityhero__icon{
  -webkit-mask-image:url("../images/icons/icon-oak.svg");
  mask-image:url("../images/icons/icon-oak.svg");
}

.ns-city--castro .ns-cityhero__icon{
  -webkit-mask-image:url("../images/icons/icon-lighthouse.svg");
  mask-image:url("../images/icons/icon-lighthouse.svg");
}

.ns-city--vitoria .ns-cityhero__icon{
  -webkit-mask-image:url("../images/icons/icon-deer.svg");
  mask-image:url("../images/icons/icon-deer.svg");
}

.ns-city--laguardia .ns-cityhero__icon{
  -webkit-mask-image:url("../images/icons/icon-grapes.svg");
  mask-image:url("../images/icons/icon-grapes.svg");
}

.ns-city--santiago .ns-cityhero__icon{
  -webkit-mask-image:url("../images/icons/icon-james.svg");
  mask-image:url("../images/icons/icon-james.svg");
}

.ns-city--cambados .ns-cityhero__icon{
  -webkit-mask-image:url("../images/icons/icon-castle-wine.svg");
  mask-image:url("../images/icons/icon-castle-wine.svg");
}

.ns-city--combarro .ns-cityhero__icon{
  -webkit-mask-image:url("../images/icons/icon-granary.svg");
  mask-image:url("../images/icons/icon-granary.svg");
}

.ns-city--coruna .ns-cityhero__icon{
  -webkit-mask-image:url("../images/icons/icon-hercules.svg");
  mask-image:url("../images/icons/icon-hercules.svg");
}

.ns-city--betanzos .ns-cityhero__icon{
  -webkit-mask-image:url("../images/icons/icon-bridge.svg");
  mask-image:url("../images/icons/icon-bridge.svg");
}

.ns-city--orense .ns-cityhero__icon{
  -webkit-mask-image:url("../images/icons/icon-whirl.svg");
  mask-image:url("../images/icons/icon-whirl.svg");
}

.ns-city--lugo .ns-cityhero__icon{
  -webkit-mask-image:url("../images/icons/icon-tower.svg");
  mask-image:url("../images/icons/icon-tower.svg");
}

.ns-city--allariz .ns-cityhero__icon{
  -webkit-mask-image:url("../images/icons/icon-bridge.svg");
  mask-image:url("../images/icons/icon-bridge.svg");
}

/* =========================
   HERO QUICK LINKS
   ========================= */

.ns-cityanchors{
  position:relative;
  z-index:5;
  isolation:isolate;
  margin-top:clamp(10px, 2vw, 20px);
  padding:clamp(20px, 6vw, 26px) 0 10px;
  background:transparent;
}

.ns-cityanchors__inner{
  position:relative;
  z-index:6;
  width:min(100%, 340px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:start;
  justify-items:center;
  justify-content:center;
  column-gap:clamp(16px, 6vw, 32px);
  row-gap:clamp(12px, 2vw, 18px);
}

.ns-cityanchors__item{
  position:relative;
  z-index:7;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:100%;
  max-width:110px;
  padding:8px 6px;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  opacity:.96;
  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    filter .28s cubic-bezier(.22,.61,.36,1),
    opacity .28s cubic-bezier(.22,.61,.36,1);
}

.ns-cityanchors__icon{
  display:block;
  width:clamp(42px, 11vw, 46px);
  height:clamp(42px, 11vw, 46px);
  pointer-events:none;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.42)) drop-shadow(0 7px 14px rgba(0,0,0,.30));
}

.ns-cityanchors__icon--walk{
  -webkit-mask-image:url("../images/icons/icon-walk.svg");
  mask-image:url("../images/icons/icon-walk.svg");
}

.ns-cityanchors__icon--taste{
  -webkit-mask-image:url("../images/icons/icon-taste.svg");
  mask-image:url("../images/icons/icon-taste.svg");
}

.ns-cityanchors__icon--feel{
  -webkit-mask-image:url("../images/icons/icon-feel.svg");
  mask-image:url("../images/icons/icon-feel.svg");
}

.ns-cityanchors__txt{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:700;
  font-size:clamp(17px, 4.4vw, 20px);
  line-height:1.2;
  letter-spacing:.04em;
  pointer-events:none;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.38)) drop-shadow(0 7px 14px rgba(0,0,0,.28));
}

/* =========================
   SPOTS / SECTIONS
   ========================= */

.ns-cityspots{
  padding:clamp(36px, 8vw, 44px) 0 24px;
  background:transparent;
}

.ns-cityspots__stack{
  display:flex;
  flex-direction:column;
  gap:clamp(24px, 6vw, 28px);
}

.ns-citysection{
  display:flex;
  flex-direction:column;
  gap:14px;
  scroll-margin-top:115px;
}

.ns-citysection__head{
  display:flex;
  align-items:center;
  gap:10px;
}

.ns-citysection__line{
  flex:1 1 auto;
  height:1px;
  background:
    linear-gradient(
      90deg,
      rgba(240,197,111,0) 0%,
      rgba(240,197,111,.62) 34%,
      rgba(255,244,214,.96) 50%,
      rgba(240,197,111,.62) 66%,
      rgba(240,197,111,0) 100%
    );
}

.ns-citysection__ttl{
  flex:0 0 auto;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:700;
  font-size:clamp(26px, 6.4vw, 30px);
  line-height:1.1;
  letter-spacing:.04em;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.42)) drop-shadow(0 7px 14px rgba(0,0,0,.30));
}

.ns-citysection__sub{
  font-family:"Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:clamp(12px, 3.3vw, 13px);
  line-height:1.8;
  letter-spacing:.02em;
  text-align:center;
  color:rgba(255,255,255,.86);
  text-shadow:
    0 1px 0 rgba(0,0,0,.26),
    0 7px 14px rgba(0,0,0,.32);
}

.ns-cityspots__featured,
.ns-cityspots__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(14px, 1.8vw, 18px);
}

/* =========================
   CITY CARD
   ========================= */

.ns-citycard{
  position:relative;
  min-height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:clamp(16px, 2vw, 18px) clamp(16px, 2vw, 18px) clamp(18px, 2.2vw, 20px);
  background:
    radial-gradient(680px 240px at 15% 0%, rgba(240,197,111,.06) 0%, rgba(240,197,111,0) 58%),
    url("../images/backgrounds/bg_city_texture.jpg") repeat center center,
    linear-gradient(180deg, rgba(18,13,11,.92) 0%, rgba(10,8,7,.98) 100%);
  border:1px solid rgba(240,197,111,.42);
  box-shadow:
    0 16px 34px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    box-shadow .28s cubic-bezier(.22,.61,.36,1),
    border-color .28s cubic-bezier(.22,.61,.36,1);
}

.ns-citycard::before{
  content:"";
  position:absolute;
  inset:8px;
  pointer-events:none;
  border:1px solid rgba(240,197,111,.28);
  box-shadow:inset 0 0 0 1px rgba(255,244,214,.04);
}

.ns-citycard__body{
  display:contents;
}

.ns-citycard__thumb{
  order:2;
  width:100%;
  aspect-ratio:3 / 2;
  overflow:hidden;
  margin-top:0;
  border:1px solid rgba(240,197,111,.22);
  box-shadow:
    0 10px 20px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.ns-citycard__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}

.ns-citycard__ttl{
  order:1;
  position:relative;
  margin-top:-6px;
  margin-bottom:10px;
  padding-top:2px;
  text-align:center;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:700;
  font-size:clamp(22px, 5.6vw, 26px);
  line-height:1.2;
  letter-spacing:.04em;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.38)) drop-shadow(0 7px 14px rgba(0,0,0,.28));
}

.ns-citycard__ttl::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-7px;
  transform:translateX(-50%);
  width:95%;
  height:1px;
  background:var(--city-line-gradient);
  opacity:.96;
}

.ns-citycard__txt{
  order:3;
  padding:12px 2px 0;
  text-align:center;
  font-family:"Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:clamp(14px, 3.8vw, 15px);
  line-height:1.8;
  letter-spacing:.01em;
  color:rgba(255,255,255,.90);
  text-shadow:var(--city-text-shadow);
}

.ns-citycard--featured{
  padding:clamp(16px, 2vw, 18px) clamp(16px, 2vw, 18px) clamp(20px, 2.4vw, 22px);
}

.ns-citycard--featured .ns-citycard__thumb{
  aspect-ratio:3 / 2;
}

.ns-citycard--featured .ns-citycard__ttl{
  font-size:clamp(22px, 5.4vw, 26px);
}

.ns-citysection[aria-label="Gastronomic Experiences"] .ns-citycard{
  padding-top:0;
}

.ns-citysection[aria-label="Gastronomic Experiences"] .ns-citycard::before{
  display:none;
}

.ns-citysection[aria-label="Gastronomic Experiences"] .ns-citycard__thumb{
  order:1;
  width:calc(100% + 36px);
  margin-top:0;
  margin-left:-18px;
  margin-right:-18px;
  border-top:0;
  border-left:0;
  border-right:0;
}

.ns-citysection[aria-label="Gastronomic Experiences"] .ns-citycard__ttl{
  order:2;
  margin-top:14px;
  margin-bottom:0;
  padding-top:0;
}

.ns-citysection[aria-label="Gastronomic Experiences"] .ns-citycard__txt{
  order:3;
  padding:16px 2px 0;
}

/* =========================
   INTERACTION / ACCESSIBILITY
   ========================= */

.ns-cityanchors__item:hover,
.ns-cityanchors__item:focus-visible{
  transform:translateY(-3px);
  opacity:1;
  filter:
    drop-shadow(0 0 4px rgba(240,197,111,.18))
    drop-shadow(0 8px 16px rgba(0,0,0,.34));
}

.ns-citycard:hover,
.ns-citycard:focus-within{
  transform:translateY(-3px);
  border-color:rgba(240,197,111,.60);
  box-shadow:
    0 20px 40px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.ns-citycard:hover .ns-citycard__thumb img,
.ns-citycard:focus-within .ns-citycard__thumb img{
  transform:scale(1.035);
}

.ns-cityanchors__item:focus-visible,
.ns-citycard:focus-visible,
.ns-citycard a:focus-visible{
  outline:none;
  box-shadow:var(--city-focus-ring);
}

.ns-cityanchors__item{
  border-radius:2px;
}

.ns-citycard{
  border-radius:2px;
}

/* =========================
   BREAKPOINTS
   ========================= */

@media (min-width: 768px){
  .ns-cityhero{
    min-height:clamp(600px, 88vw, 700px);
  }

  .ns-cityhero__overlay{
    min-height:clamp(600px, 88vw, 700px);
    padding:0 clamp(16px, 3vw, 20px) clamp(16px, 2.6vw, 20px);
  }

  .ns-cityhero__icon{
    width:clamp(90px, 12vw, 130px);
    height:clamp(90px, 12vw, 130px);
  }

  .ns-cityhero__ttl{
    font-size:clamp(40px, 5.4vw, 52px);
    margin-bottom:clamp(10px, 1.8vw, 14px);
  }

  .ns-cityhero__sub{
    font-size:clamp(22px, 3vw, 28px);
    line-height:1.4;
    margin-bottom:clamp(12px, 1.8vw, 16px);
  }

  .ns-cityhero__txt{
    font-size:clamp(14px, 1.9vw, 15px);
    line-height:1.9;
  }

  .ns-cityanchors{
    margin-top:clamp(-72px, -8vw, -40px);
    padding:clamp(24px, 3.6vw, 30px) 0 clamp(10px, 2vw, 14px);
  }

  .ns-cityanchors__inner{
    width:min(620px, 100%);
    column-gap:clamp(16px, 3vw, 22px);
  }

  .ns-cityanchors__icon{
    width:clamp(48px, 6vw, 52px);
    height:clamp(48px, 6vw, 52px);
  }

  .ns-cityanchors__txt{
    font-size:clamp(20px, 2.8vw, 24px);
  }

  .ns-citysection__head{
    gap:clamp(10px, 1.8vw, 12px);
  }

  .ns-citysection__ttl{
    font-size:clamp(32px, 4vw, 38px);
    letter-spacing:.06em;
  }

  .ns-citysection__sub{
    font-size:clamp(13px, 1.6vw, 14px);
    line-height:1.85;
  }

  .ns-cityspots__featured,
  .ns-cityspots__grid{
    grid-template-columns:1fr;
  }
}

@media (min-width: 1024px){
  .ns-cityhero{
    min-height:clamp(560px, 78vw, 820px);
  }

  .ns-cityhero__overlay{
    min-height:clamp(560px, 78vw, 820px);
    padding:0 clamp(14px, 3vw, 24px);
  }

  .ns-cityhero__icon{
    width:clamp(110px, 9vw, 150px);
    height:clamp(110px, 9vw, 150px);
  }

  .ns-cityhero__ttl{
    font-size:clamp(52px, 6vw, 68px);
    line-height:1.02;
    margin-bottom:clamp(16px, 2.6vw, 24px);
  }

  .ns-cityhero__sub{
    font-size:clamp(24px, 2.9vw, 30px);
    line-height:1.35;
    margin-bottom:clamp(14px, 2.4vw, 22px);
  }

  .ns-cityhero__txt{
    font-size:clamp(15px, 1.45vw, 16px);
    line-height:clamp(1.8, 1.2vw, 2);
  }

  .ns-cityanchors{
    margin-top:clamp(-40px, -4vw, -20px);
    padding:clamp(24px, 4vw, 34px) 0 clamp(10px, 2.4vw, 18px);
  }

  .ns-cityanchors__inner{
    width:min(760px, 100%);
    column-gap:clamp(14px, 3.2vw, 34px);
    row-gap:clamp(12px, 2vw, 18px);
  }

  .ns-cityanchors__item{
    gap:clamp(8px, 1.6vw, 12px);
  }

  .ns-cityanchors__icon{
    width:clamp(46px, 6vw, 64px);
    height:clamp(46px, 6vw, 64px);
  }

  .ns-cityanchors__txt{
    font-size:clamp(22px, 2.8vw, 28px);
    letter-spacing:.04em;
  }

  .ns-cityspots{
    padding:clamp(72px, 7vw, 108px) 0 clamp(24px, 3.8vw, 34px);
  }

  .ns-cityspots__stack{
    gap:clamp(28px, 4.2vw, 42px);
  }

  .ns-citysection{
    gap:clamp(14px, 2vw, 18px);
    scroll-margin-top:clamp(108px, 12vw, 130px);
  }

  .ns-citysection__head{
    gap:clamp(10px, 2vw, 18px);
  }

  .ns-citysection__ttl{
    font-size:clamp(34px, 3.8vw, 46px);
    letter-spacing:.06em;
  }

  .ns-citysection__sub{
    font-size:clamp(12px, 1.4vw, 16px);
    line-height:clamp(1.8, 1vw, 1.9);
  }

  .ns-cityspots__featured{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:clamp(14px, 2vw, 20px);
  }

  .ns-cityspots__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:clamp(14px, 1.8vw, 18px);
  }

  .ns-citycard__ttl{
    font-size:clamp(26px, 2.8vw, 34px);
    margin-bottom:clamp(10px, 1.8vw, 16px);
  }

  .ns-citycard__txt{
    font-size:clamp(15px, 1.45vw, 16px);
    line-height:1.8;
    padding:clamp(12px, 1.8vw, 16px) 2px 0;
  }

  .ns-citycard--featured .ns-citycard__ttl{
    font-size:clamp(26px, 2.8vw, 34px);
  }

  .ns-citysection[aria-label="Gastronomic Experiences"] .ns-citycard__thumb{
    width:calc(100% + 36px);
    margin-left:-18px;
    margin-right:-18px;
  }

  .ns-citysection[aria-label="Gastronomic Experiences"] .ns-citycard__ttl{
    margin-top:7px;
  }
}

@media (min-width: 1440px){
  .ns-cityhero__panel{
    width:min(800px, 100%);
  }

  .ns-cityhero__icon{
    width:150px;
    height:150px;
  }

  .ns-cityhero__ttl{
    font-size:72px;
  }

  .ns-cityhero__txt{
    width:min(800px, 100%);
    font-size:16px;
  }

  .ns-cityanchors__inner{
    width:min(820px, 100%);
  }

  .ns-citysection__ttl{
    font-size:46px;
  }

  .ns-citycard__txt{
    font-size:16px;
  }
}