@use "./main";

@mixin main() {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;

  @include main.title;
}

@mixin subtitle() {
  font-weight: 300;
  margin: 1rem 0 2.25rem;
  font-size: var(--font-size-h3);

  @media (min-width: 992px) {
    width: 828px;
  }
}

@mixin title() {
  @media (min-width: 992px) {
    font-size: calc(var(--font-size-h1) + 1rem);
    line-height: calc(var(--line-height-h1) + 1.45rem);
  }
}

@mixin hero() {
  padding-bottom: 2.75rem;
}
