section.hero {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  column-gap: var(--mainpad);
  padding-bottom: 4rem; }
  @media (max-width : 900px) {
    section.hero {
      grid-template-columns: repeat(4, 1fr);
      row-gap: var(--mainpad); } }
  section.hero p {
    grid-column: 1/5; }
    @media (min-width : 900px) {
      section.hero p {
        grid-column: 5/13;
        font-size: var(--fontMedium); } }
#map {
  width: 100%;
  height: 50vw; }
  @media (max-width : 900px) {
    #map {
      height: 100vw; } }
#map .mapboxgl-control-container {
  display: none; }