.site-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 40%); align-items: center; gap: 7vw; }
.map-card { position: relative; overflow: hidden; margin: 0; border: 1px solid #354154; background: #eaf0f5; box-shadow: 22px 22px 0 #111a3a; }
.map-card img { display: block; width: 100%; height: auto; }.map-card .map-illustration { aspect-ratio: 9 / 6.8; }.map-link { position: absolute; inset: 0; z-index: 1; }.map-action { position: absolute; top: 15px; right: 15px; z-index: 4; padding: 10px 12px; background: #fff; color: #111a3a; font: 800 10px Manrope,Arial,sans-serif; text-decoration: none; }.map-action b { margin-left: 8px; color: #e81724; font-size: 15px; }.map-caption { position: absolute; right: 15px; bottom: 15px; z-index: 3; display: grid; gap: 4px; padding: 10px 12px; background: #111a3a; color: #fff; font: 9px "DM Mono", monospace; letter-spacing: .08em; }.map-caption span { color: #f21c2d; }.map-caption b { font-size: 9px; font-weight: 500; }
.map-card .ocazia-pin { position: absolute; z-index: 2; top: 50%; left: 50%; width: 58px; height: 58px; padding: 5px; transform: translate(-50%,-50%); border: 2px solid #f21c2d; border-radius: 50%; background: #fff; object-fit: contain; box-shadow: 0 0 0 8px rgba(17,26,58,.18); }.map-location { position: absolute; z-index: 3; top: calc(50% + 36px); left: 50%; transform: translateX(-50%); padding: 7px 12px; background: #111a3a; color: #fff; font: 800 11px Manrope,Arial,sans-serif; letter-spacing: .12em; box-shadow: 5px 5px 0 #f21c2d; }
@media (max-width: 900px) { .site-intro { grid-template-columns: 1fr; gap: 45px; }.map-card { max-width: 600px; width: 100%; } } @media (max-width: 680px) { .site-intro { gap: 35px; }.map-card { box-shadow: 12px 12px 0 #111a3a; } }