.banner {
  background-image: linear-gradient(
      var(--banner-deg),
      var(--banner-color-one),
      var(--banner-color-two)
    ),
    url(../../assets/prefeitura.jpg);
  height: 55vh;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  background-attachment: fixed;
  background-position-x: center;
}

.banner h2 {
  color: #fff;
  font-size: 40px;
  font-weight: 600;
  text-shadow: 0px 0px 30px #000000;
}

.banner h2 span {
  color: var(--secondary);
}

.banner button {
  margin-top: 50px;
  cursor: pointer;
  background: var(--secondary);
  padding: 10px 15px;
  border-radius: 4px;
  outline: none;
  border: none;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: bold;
  color: var(--primary);
}

.banner button:hover {
  filter: brightness(0.8);
}

@media (max-width: 600px) {
  .banner {
    text-align: center;
    height: calc(100vh - 81px);
  }

  .banner button {
    width: 90%;
  }
}