.name-area {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  margin-right: 1em;
}

.mugshot {
  margin-left: 1em;
  padding: 2px;
  border-radius: 50%;
  box-shadow: 0 4px 4px var(--color-default-shadow);
  background-color: var(--color-container-background);
}

.content-area {
  .column {
    grid-column: span 4;
  }
}

.personal-area {
  .column {
    grid-column: 3 / span 8;
  }
}

.experience {
  margin-bottom: 16px;

  .role {
    font-weight: bold;
  }

  .timespan {
    color: var(--color-secondary-foreground);
  }
}

.name-area {
  margin-bottom: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;

  &::before {
    display: block;
    content: '';
    position: absolute;
    /* stylelint-disable length-zero-no-unit */
    top: calc(0px - var(--height-margin-page-header));
    /* stylelint-enable */
    left: 0;
    right: 0;
    height: 50%;
    z-index: -1;
    background: var(--color-primary-a-10) linear-gradient(to bottom, var(--color-primary-a-10), var(--color-primary-a-07));
    pointer-events: none;
  }
}

.text {
  margin-right: 1em;
}

.mugshot {
  margin-left: 1em;
  padding: 2px;
  border-radius: 50%;
  box-shadow: 0 4px 4px var(--color-default-shadow);
  background-color: var(--color-container-background);
}

.content-area {
  .column {
    grid-column: span 4;
  }
}

.personal-area {
  .column {
    grid-column: 3 / span 8;
  }
}

.experience {
  margin-bottom: 16px;

  .role {
    font-weight: bold;
  }

  .timespan {
    color: var(--color-secondary-foreground);
  }
}

Add header colour to about page
Add header colour to about page
