@import "@/styles/variables";
@import "@/styles/mixins";

.banner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 64px;
  background-size: 100% 100%;
  height: 32.5rem;

  .container {
    margin: 0 auto;
    padding: 6.25rem 1rem;
    max-width: 46rem;
    text-align: center;
    z-index: 2;

    h1 {
      @include h1();
      color: $white;
    }

    h5 {
      @include h5();
      color: $white;
      font-weight: normal;
      padding: 1rem 0 2rem 0;
      opacity: 0.8;
      white-space: pre-line;
    }

    .content {
      > a {
        margin-right: 1rem;
      }

      @media screen and (max-width: $mobile) {
        > a {
          margin-bottom: 1rem;
        }
      }
    }
  }
}