@import url(../templates/services.css);
@import url(../templates/inovations.css);

.banner_post {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 3.375rem 5.25rem;
  gap: 10px;

  width: 100%;
  height: 34.5rem;

  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    var(--banner-bg-post);

  background-repeat: no-repeat;
  background-size: cover;

  color: var(--gray-100);

  & h1 {
    font-size: 2.75rem;

    max-width: 52rem;
    margin: 0 auto;
  }
}

article {
  padding: 3.75rem 0 7.125rem;

  & p {
    color: var(--gray-500);

    & + p {
      margin-top: 1.5rem;
    }
  }
}

@media (max-width: 768px) {
  article {
    padding: 3.75rem 0 3.75rem;
  }
}

@media (max-width: 500px) {
  .banner_post {
    padding-inline: 1.25rem;

    & h1 {
      font-size: 2rem;
    }
  }
  .buttons {
    flex-direction: column;
  }
}