#highlights {
  padding-top: 4rem;
  border-top: var(--b-primary);
  border-bottom: var(--b-primary);
  h1 {
    font-size: min(6rem, 100px);
    width: 16ch;
  }
  .content{
    display: flex;
    gap: 4rem;
    .spacer{
      width: 35rem;
      background-color: var(--c-spacer);
      backdrop-filter: blur(5px);
    }
    .blurb p{
      max-width: 25ch;
    }
  }
  ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;

    li {
      width: 33.33%;
      display: flex;
      flex-direction: column;
      padding: 3%;
      list-style: none;
      border-right: 1px dashed var(--c-1);
      border-bottom: 1px dashed var(--c-1);
      box-sizing: border-box;

      &:nth-child(3n){
        border-right: none;
      }
      &:nth-child(n+4){
        border-bottom: none;
      }

      .highlight-icon {
        align-self: flex-end;
      }
      h3 {
        font-family: var(--f-accent);
        font-weight: 400;
        color: var(--c-text-primary);
        text-transform: uppercase;
        em {
          font-style: normal;
          font-weight: 900;
        }
      }
    }
  }
}
