:root{
  --luxa-burgundy:#612234;
  --luxa-burgundy-deep:#4f1928;
  --luxa-cream:#f5efe4;
  --luxa-gold:#c7a66b;
  --luxa-ink:#241b1d;
  --luxa-white:#fffaf2;
}

.luxa-italy{
  width:100%;
  margin:90px auto;
  color:var(--luxa-ink);
}

.luxa-italy__intro{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:40px;
  align-items:start;
  margin-bottom:38px;
}

.luxa-italy__intro h2{
  margin:0 0 12px;
}

.luxa-italy__intro .lead{
  max-width:720px;
}

.luxa-italy__frame{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(300px,.85fr);
  min-height:620px;
  overflow:hidden;
  border-radius:34px;
  background:var(--luxa-cream);
  box-shadow:0 20px 60px rgba(37,16,22,.12);
}

.luxa-italy__map-panel{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:620px;
  padding:42px 48px;
  color:var(--luxa-gold);

  background:
    radial-gradient(
      circle at 42% 43%,
      rgba(255,255,255,.04),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      var(--luxa-burgundy-deep),
      var(--luxa-burgundy)
    );
}

.luxa-italy__svg{
  width:min(100%,560px);
  height:auto;
  overflow:visible;
}

.luxa-italy__outline{
  fill:none;
  stroke:currentColor;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.luxa-italy__point{
  cursor:pointer;
  outline:none;
}

.luxa-italy__point circle:first-child{
  fill:var(--luxa-white);
  stroke:var(--luxa-gold);
  stroke-width:2;
  vector-effect:non-scaling-stroke;
  transition:.2s ease;
}

.luxa-italy__point circle:last-child{
  fill:none;
  stroke:rgba(255,250,242,.32);
  stroke-width:1;
  opacity:0;
  vector-effect:non-scaling-stroke;
  transition:.2s ease;
}

.luxa-italy__point:hover circle:first-child,
.luxa-italy__point:focus circle:first-child,
.luxa-italy__point[aria-pressed="true"] circle:first-child{
  r:10;
  fill:var(--luxa-gold);
}

.luxa-italy__point[aria-pressed="true"] circle:last-child{
  opacity:1;
  r:18;
}

.luxa-italy__label{
  position:absolute;
  left:30px;
  bottom:24px;

  font-family:Manrope,sans-serif;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;

  color:rgba(255,250,242,.65);
}

.luxa-italy__card{
  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:58px 48px;

  background:var(--luxa-cream);
}

.luxa-italy__eyebrow{
  margin:0 0 18px;

  font-family:Manrope,sans-serif;
  font-size:10px;
  line-height:1.3;
  letter-spacing:.16em;
  text-transform:uppercase;

  color:#9c835c;
}

.luxa-italy__title{
  margin:0 0 22px;

  font-family:"Cormorant Garamond",serif;
  font-size:clamp(40px,4vw,60px);
  line-height:.95;
  font-weight:400;
}

.luxa-italy__copy{
  margin:0;
  max-width:34ch;

  font-family:Manrope,sans-serif;
  font-size:15px;
  line-height:1.75;

  color:#504747;
}

.luxa-italy__tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;

  margin:0 0 26px;
  padding:25px 0 22px;

  border-bottom:1px solid rgba(96,70,60,.15);

  list-style:none;
}

.luxa-italy__tags li{
  margin:0;
  padding:0;

  font-family:Manrope,sans-serif;
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:#7c5f4b;
}

.luxa-italy__strap{
  margin:0 0 28px;

  font-family:"Cormorant Garamond",serif;
  font-size:clamp(27px,2.4vw,40px);
  line-height:1.05;
  font-weight:400;
}

.luxa-italy__cta{
  align-self:flex-start;

  font-family:Manrope,sans-serif;
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;

  color:#61482e;
  text-decoration:none;

  transition:transform .2s ease;
}

.luxa-italy__cta:hover{
  transform:translateX(4px);
}

@media (max-width:820px){

  .luxa-italy{
    margin:60px auto;
  }

  .luxa-italy__intro{
    grid-template-columns:1fr;
    gap:8px;
    margin-bottom:28px;
  }

  .luxa-italy__frame{
    grid-template-columns:1fr;
    border-radius:26px;
  }

  .luxa-italy__map-panel{
    min-height:460px;
    padding:30px 30px 48px;
  }

  .luxa-italy__svg{
    width:min(100%,430px);
  }

  .luxa-italy__card{
    padding:40px 30px 44px;
  }
}