header {
  align-items: center;
  color: rgb(112, 57, 26);
  display: flex;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  gap: 1em;
  justify-content: center;
  margin: 0 auto;
  padding: 0.5em 0;
  text-align: center;

  &.planner-header {
    background: rgb(255, 249, 239);
    position: sticky;
    width: 100%;
    z-index: 200;
    top: 0;

    h1 {
      width: 10ch;
    }
  }

  .next,
  .previous {
    color: rgb(193, 178, 170);
    font-size: 2rem;
    text-decoration: none;
  }

  .previous {
    transform: rotateY(-180deg);
  }
}