html {
  scroll-behavior: auto;
}

:target {
  scroll-margin-top: 0;
}

@keyframes buddy-list-enter {
  from {
    opacity: 0;
    transform: translateX(var(--sp-100)) scale(0.98);
  }
}

@keyframes buddy-list-exit {
  to {
    opacity: 0;
    transform: translateX(calc(-1 * var(--sp-100))) scale(0.98);
  }
}

::view-transition-old(buddy-list) {
  animation: buddy-list-exit calc(2 * var(--anime-time)) var(--anime-func) forwards;
}

::view-transition-new(buddy-list) {
  animation: buddy-list-enter calc(2 * var(--anime-time)) var(--anime-func) forwards;
}

.buddy-list {
  container: buddy-list / inline-size;

  header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--sp-16);
    flex-wrap: wrap;
    margin-block-end: var(--sp-40);

    h2 {
      margin-block-end: 0;
    }
  }

  .member-list {
    view-transition-name: buddy-list;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--sp-20);

    @container (inline-size < 64rem) {
      view-transition-name: none;
    }

    @container (inline-size < 40.625rem) {
      grid-template-columns: repeat(2, 1fr);
    }

    @container (inline-size < 25rem) {
      grid-template-columns: 1fr;
    }

    li > button {
      border: none;
      background-color: transparent;
      text-align: left;
      margin-inline-start: auto;
    }
  }
}

.successful-alumni {
  h2 {
    margin-block: 0;
    padding-block: var(--sp-40);
    border-block-start: var(--border);
  }

  .three-column-list {
    margin-block-start: 0;
    
    li {
      grid-template-areas: "left left left . center center center center . right right right";
      &:hover {
        button {
          background-color: var(--main);
        }
      }
      button {
        grid-area: right;
        align-self: end;
        border-radius: 0;
        margin-inline-start: auto;
        background-color: var(--main-tint-30);
      }
    }
  }
}