PortaFront/src/components/titulo.vue

<template>
  <div class="divMaster">
    <div class="row">
      <div class="col-10 offset-1 bor d-flex justify-content-center">
        <div class="bgAzul">
          <p class="text-white pTitulo">{{ title }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["title"]
};
</script>

<style>
.bor {
  border: none !important;
  border-bottom: 5px solid #1b3d70 !important;
}
.bgAzul {
  background-color: #1b3d70;
  width: 40%;

  border-top-right-radius: 20px 20px !important;
  border-top-left-radius: 20px 20px !important;
}
.pTitulo {
  margin: 0;
  font-size: 30px;
}

@media screen and (max-width: 450px) {
  .pTitulo {
    font-size: 20px;
    padding: 0px 3px;
  }
  .bgAzul {
    width: 60%;
  }
}
</style>