.header {
  position: relative;
}

.header figure {
  margin: var(--small-margin) 0;
}

.header pre {
  font-size: calc(1rem + 6.885vw);
}

.header .date {
  position: absolute;
  bottom: -0.2em;
  left: 0;
  background-color: var(--background);
  padding-right: 1.2em;
  padding-top: 0.9em;
  border-top-right-radius: 0.45em;
  font-weight: 700;
}

.header .date::after {
  content: "\2198";
  font-weight: 700;
  font-size: var(--small-font-size);
  margin-left: 1em;
}

.roleAndCollabs {
  display: flex;
  margin: var(--tiny-margin) 0 var(--big-margin);
  grid-column: 2;
}

.roleAndCollabs::before {
  content: "\2192";
  font-weight: 700;
  font-size: var(--small-font-size);
  padding-top: 0.1em;
  margin-right: 4em;
}

.roleAndCollabs p {
  font-size: var(--small-font-size);
}

.main section .roleAndCollabs + * {
  margin-top: 0 !important;
}

.categories {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--small-font-size);
  gap: var(--tiny-margin);
}

* + .categories,
.categories + * {
  margin-top: var(--big-margin);
}

@media screen and (min-width: 1366px) {
  .header {
    grid-column: 1 / span 5;
    grid-row: span 4;
  }

  .header figure {
    margin: 0;
  }

  .header .date {
    position: relative;
    top: 0;
    background-color: var(--background);
    padding: 0;
    border-bottom-right-radius: 0;
  }

  .header .date::after {
    display: flex;
    padding-left: 9.15em;
    margin: var(--tiny-margin) 0 var(--small-margin);
  }

  .header pre {
    font-size: var(--subtitle);
  }

  .roleAndCollabs {
    grid-column: 8 / span 13;
  }

  .content-text.article,
  .projects,
  .categories {
    grid-column: 9 / span 14 !important;
  }
}

@media screen and (min-width: 1920px) {
  .header pre {
    font-size: calc(1rem + 2.9vw);
  }
}