.tester {
  font-size: 40px;
  grid-column: 2/5;
}

main {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

li {
    list-style: none;
}

.filter li::after,
.projects li::after {
  pointer-events: none;
}

.filter {
  grid-column: 1/2;
  font-weight: bold;
  position: sticky;
  top: 6rem;
  align-self: start;
}

.filter li {
    margin: inherit;
    padding: inherit;
  position: relative;
  /*display: inline;*/
  font-weight: normal;
  text-transform:  capitalize;
}

.filter li:has(a.active) {
  text-decoration: underline;
}

.filter li:hover {
text-decoration: underline;
}

.projects {
  grid-column: 2 / 5;
  width: 100%;
  display: block;
}

.projects li {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.projects li:has(a.active)::after {
  width: 0;
}

.projects li:hover:after {
  width: 0;
}

.projects li::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  border-bottom: 1pt solid var(--color-tuatara);
  transition: width 200ms ease-in-out;
}

li:hover {
  /* cursor: none; */
}

dt,
dd {
  /* border-bottom: 1px solid #000; */
  padding-bottom: 1rem;
}

dt {
  font-weight: bold;
  grid-column: 1 / 2;
  text-align: right;
  align-self: start;
  text-transform: uppercase;
}

dd {
    text-transform: capitalize;
    grid-column: 2 / 3;
}

.project-row {
  position: relative;
}

.image-wrapper-desktop {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  transition: opacity var(--transition-fade) ease-in-out;
}

.image-wrapper-phone {
  display: none;
}

.image-wrapper.no-transition {
  transition: none;
}

.project-row.is-hovering .image-wrapper {
  opacity: 1;
}

@media (max-width: 1000px) {

  .projects li::after, 
  .filter li::after {
    border-bottom: 0.5pt solid var(--color-tuatara);
  }



  main {
    display: block;
  }

  li {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: auto;
  }

  dt {
    grid-column: 1/8;
    text-align: left;
    padding-left: 0.5rem;
    border-left: 0.5pt solid var(--color-tuatara);
  }

  dd {
    grid-column: 1/8;
    padding: 0.5rem 0 1rem 0;
    border-top: 0.5pt solid var(--color-tuatara);
  }

  .image-wrapper-desktop {
    display: none;
  }

.image-wrapper-phone {
  display: block;      /* this was missing */
  grid-column: 8/9;
  grid-row: 1/3;
  height: 4rem;
  align-self: start;
}
.image-wrapper-phone img {
  display: block;
  height: 100%;
  width: auto;
}

  .filter {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    position: sticky;
    top: 5rem;
  }
  
  .filter li {
        display: inline;
  }
}