h2 {
  font-weight: bold;
}

#freshness {
  padding: 1em 0;
}

#freshness .grid {
  display: grid;
  grid-template-columns: fit-content(50%) min-content auto;
  width: fit-content;

  /* do this instead of grid gap so we can use
   * borders/backgrounds for rows */
  span {
    padding: 0.3em 0;
    border-bottom: 1px solid var(--line-color);

    &:nth-child(3n+1),
    &:nth-child(3n+2) {
      padding-right: 0.5em;
    }

    &:nth-child(3n+2),
    &:nth-child(3n+3) {
      padding-left: 0.5em;
    }
  }

  .th {
    font-size: small;
    font-weight: bold;
    border-bottom: 1px solid navy;
  }
}

#birthdays {
  display: flex;
  flex-direction: column;
  padding: 1em 0;
  width: fit-content;

  h2 {
    width: 100%;
  }

  #birthday-sections {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em;
  }

  .datelist {
    flex: 1;
    display: grid;
    grid-template-columns: fit-content min-content;
    column-gap: 0.5em;
    row-gap: 0.3em;

    h3 {
      grid-column: span 2;
      font-weight: bold;
      font-size: small;
    }
  }
}