@media(max-width:1000px) and (min-width:761px) {
  .workspace {
    grid-template-columns:minmax(0,1fr) 360px
  }
  .map-intro {
    padding:16px
  }
  .map-intro h1 {
    font-size:21px
  }
  .map-legend {
    max-width:230px;
    gap:8px
  }
  .coordinate-note {
    max-width:230px
  }
}

@media(max-width:760px) {
  .map-region {
    height:calc(100% - 142px)
  }
  .map-intro {
    top:14px;
    left:14px;
    padding:12px 16px;
    max-width:calc(100% - 28px)
  }
  .map-intro h1 {
    font-size:17px;
    margin-top:4px
  }
  .map-intro h1 br {
    display:none
  }
  .map-intro .eyebrow {
    display:none
  }
  .map-intro p {
    margin-top:4px;
    font-size:12px
  }
  .map-controls {
    right:14px;
    bottom:93px;
    gap:6px
  }
  .map-legend {
    left:12px;
    bottom:40px;
    right:12px;
    gap:10px;
    padding:10px 12px;
    font-size:11px;
    max-width:335px
  }
  .coordinate-note {
    bottom:19px;
    left:14px;
    font-size:10px;
    max-width:calc(100% - 28px)
  }
  .map-message {
    top:105px;
    left:14px;
    right:14px
  }
  .map-pin {
    font-size:11px
  }
}

@media(max-width:760px) {
  .sheet-expanded .map-region {
    height:35%
  }
  .sheet-expanded .map-intro,.sheet-expanded .map-legend,.sheet-expanded .coordinate-note {
    display:none
  }
  .sheet-expanded .map-controls {
    bottom:30px
  }
  .sheet-expanded #zoom-in,.sheet-expanded #zoom-out {
    display:none
  }
}