.box-glance {
  --sheet-padding: 4rem;

  display: flex;
  margin-right: var(--negative-page-padding);
  font-size: var(--font-size-small);
  color: var(--color-tertiary);
  text-transform: uppercase;
  line-height: 1.5;
  font-weight: 600;
  position: relative;

  &::after {
    filter: var(--colorize-purple);
    content: '';
    height: 1.5em;
    background: url("/assets/wavy-black-b89bbf77.svg") repeat-x center / auto 0.5em;
    background-blend-mode: difference;
    flex-grow: 1;
  }

  @media (min-width: 40em) {
    flex-direction: row-reverse;
    justify-content: flex-end;
    padding: 0.5em 0;
    margin: 0 0 0 calc(-1 * var(--sheet-padding));
    font-size: var(--font-size-x-small);
    font-weight: normal;

    /* Note: in plain CSS, pseudo-elements must be styled within media queries, not the other way around */
    &::after {
      flex-grow: 0;
      width: 4.3em;
      margin-right: 0.5em;
    }
  }

  &:first-child,
  &:last-child {
    display: none;
  }
}

.box-glance__label { padding-right: 0.5em; }

.box-glance--feedbox {
  display: none;

  @media (max-width: 39.95em) { padding: 0.5em 0; }

  @media (min-width: 40em) {
    margin-top: calc(-1 * var(--base-space));
    margin-left: calc(-1 * var(--page-padding));
    padding-bottom: var(--base-space);
  }
}

article.posting:last-of-type + .box-glance {
  display: none;
}