@use "mixins";

.page-header {
  --anchor-color: #000;
  --anchor-hover: #fff;

  background: linear-gradient(to right, #5bc2e7, #b7cf81);
  height: 256px;
  display: flex;
  gap: 8px;
  flex-direction: column;
  justify-content: center;

  @media (max-width: mixins.$breakpoint) {
    height: 50vh;

    .subtitle {
      flex-direction: column;
    }
  }

  h1 {
    border-bottom: 2px dotted;
    padding-left: 64px;
  }

  .subtitle {
    display: flex;
    gap: 16px;
    margin-left: 64px;
  }
}