.banner {
  align-items: center;
  background: color-mix(in srgb, black 50%, transparent 50%) url('../images/banner-principal.webp') no-repeat center 17% / cover;
  background-blend-mode: multiply;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 40vh;
  padding: 5rem 1rem;

  & :is(h1, h2) {
    color: white;
    font-size: clamp(3rem, calc(9vw - 3px), 5rem);
    letter-spacing: 2px;
    line-height: 3.5rem;
    margin-bottom: 2.5rem;
    text-align: center;
  }

  & p {
    color: white;
    font-size: clamp(1.5rem, calc(3.5vw + 1px), 2.2rem);
    text-align: center;
  }
}

@media (max-width: 768px) {
  .banner {
    & :is(h1, h2) {
      line-height: 3rem;
      margin-bottom: 1rem;
    }
  }
}