@use '../mixins';
@use 'sections';

.page-header {
  @include mixins.responsive-container;

  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-16);

  img {
    width: 20rem;
  }

  .byline {
    @include mixins.patterned-shadow(var(--spacing-08));

    background-color: var(--foreground-2);
    color: var(--background-1);
    font-weight: bold;
    padding: var(--spacing-16);
  }
}

.page-footer {
  @include mixins.responsive-container;

  padding: var(--spacing-16);

  @media (max-width: mixins.$medium-breakpoint) {
    text-align: center;
  }
}