.nav__item--underline {
  &::after {
    background-color: var(--color-pastel-green-400);
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    opacity: 0;
    position: absolute;
    transition-duration: 250ms;
    transition-property: width, opacity;
    transition-timing-function: ease-in-out;
    width: 0;
  }

  &.active,
  &:hover {
    &::after {
      opacity: 1;
      width: 100%;
    }
  }
}

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--container-width);
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  width: 100%;
  height: inherit;
  position: static;
}

.button {
  border-radius: var(--border-radius);
  cursor: pointer;
  display: inline-block;
  font-weight: 500;
  line-height: 1;
  font-family: inherit;
  font-size: inherit;
  padding: 0.75rem 1.5rem;
  text-align: center;
  text-decoration: none;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  background-color: transparent;
  border: 1px solid var(--color-downriver-400);
  color: var(--color-downriver-400);
}

.header-underline {
  color: var(--color-white);

  &::after {
    background-color: var(--color-pastel-green-400);
    content: "";
    display: block;
    height: 1px;
    margin-top: var(--baseline);
    width: 6.75rem;
    margin-left: 0px;
    margin-right: auto;
  }
}

.vertical-line-before {
  position: relative;

  &::before {
    background-color: var(--color-pastel-green-400);
    content: "";
    display: block;
    height: 1.5em;
    left: calc((-1 * var(--gutter)) - 1px);
    position: absolute;
    top: 0px;
    width: 1px;
    z-index: 1;
  }
}

.date {
  color: var(--color-pastel-green-400);
}


.background {
  column-gap: var(--gutter);
  display: flex;
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0px;
  user-select: none;
  z-index: -1;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--container-width);
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  width: 100%;
  left: 50%;
  transform: translateX(-50%);

  >div {
    border-left: 1px solid var(--color-iron-300);
    /* display: none; */
    flex: 1 1 0%;
  }
}

.overlay {
  background-color: var(--color-downriver-400);
  content: "";
  height: 100%;
  left: 0px;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0px;
  transition-duration: var(--transition-duration);
  transition-property: opacity;
  transition-timing-function: var(--transition-timing-function);
  width: 100%;
  z-index: 5;
}

.hero-animated {
  z-index: 0;
  background-color: var(--color-downriver-400);
  color: var(--color-white);
  padding-bottom: var(--space-xxl);
  padding-top: var(--space-xxl);
  position: relative;

  >.canvas {
    background-size: cover;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }

  .container {
    user-select: none;
    position: relative;

    >:not(:last-child) {
      margin-bottom: var(--baseline);
    }

    .button {
      border: 1px solid var(--color-white);
      color: var(--color-white);
      z-index: 10;
    }

    a {
      color: var(--color-white);
    }

    @media (min-width: 75rem) {
      >div {
        width: 50%;
      }
    }
  }
}

.summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

a:not(.button) {
  color: var(--color-downriver-400);
  /* text-decoration: underline; */
  /* text-decoration-color: var(--color-pastel-green-400); */

  &:hover {
    text-decoration-color: var(--color-pastel-green-400);
  }
}