.mapa {
  width: 100vw;
  padding: 0.5rem 0;
  background: linear-gradient(#fefefe, #585656);
}

.mapa-conteudo {
  width: 100vw;
  margin: 0;
}

.iframe {
  height: 300px;
}

.titulo-principal-mapa {
  text-align: center;
  font-size: 2em;
  margin: 1rem 1em;
  clear: left;
  color: rgba(0, 0, 0, 0.3);
}

.titulo-observacao-mapa {
  text-align: center;
  font-size: 2em;
  margin: 1rem 1em;
  clear: left;
  color: rgba(250, 0, 0, 0.5);
}

.mapa p {
  text-align: center;
  margin: 0 0 2em;
}

@media screen and (max-width: 1024px) {
  .mapa {
    width: 100vw;
  }

  .mapa-conteudo {
    width: 100vw;
  }

  .mapa p {
    width: 90vw;
    padding: 5px;
    margin: 3vw;
  }

  .titulo-principal-mapa {
    text-align: center;
    font-size: 2em;
    margin: 1rem 1em;
    clear: left;
    color: rgba(0, 0, 0, 0.3);
  }

  .titulo-observacao-mapa {
    text-align: center;
    font-size: 2em;
    margin: 1rem 1em;
    clear: left;
    color: rgba(250, 0, 0, 0.5);
  }
}

@media screen and (max-width: 768px) {
  .mapa {
    width: 100vw;
  }

  .mapa-conteudo {
    width: 100vw;
  }

  .mapa p {
    width: 90vw;
    padding: 5px;
    margin: 3vw;
  }

  .titulo-principal-mapa {
        font-size: 2em;
  }

  .titulo-observacao-mapa {
    font-size: 2em;
  }

}

@media screen and (max-width: 480px) {
  .mapa {
    width: 98vw;
  }

  .mapa-conteudo {
    width: 100vw;
  }

  .mapa p {
    width: 90vw;
    padding: 5px;
    margin: 3vw;
  }

  .titulo-principal-mapa {
        font-size: 2em;
  }

  .titulo-observacao-mapa {
    font-size: 1.5em;
  }

}

@media screen and (max-width: 320px) {
  .mapa {
    width: 98vw;
  }

  .mapa-conteudo {
    width: 100vw;
  }

  .mapa p {
    width: 90vw;
    padding: 5px;
    margin: 3vw;
  }

  .titulo-principal-mapa {
        font-size: 2em;
  }

  .titulo-observacao-mapa {
    font-size: 1.5em;
  }

}