.highlight-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--sp-20);
  margin-block-start: var(--sp-40);

  li {
    position: relative;
    place-content: end;
    overflow: clip;
    aspect-ratio: 1 / 1;
    max-width: var(--sp-447);
    border-radius: var(--sp-8);
    width: 100%;

    &:has(a:hover) img {
      transform: scale(1.05);
    }

    img {
      border-radius: var(--sp-8);
      position: absolute;
      top: 0;
      z-index: -1;
      transition: transform var(--anime-time) var(--anime-func);
      height: 100%;
      object-fit: cover;
    }

    a {
      background: rgba(0, 0, 0, 0.48);
      backdrop-filter: blur(var(--sp-8));
      color: var(--white);
      margin-inline: var(--sp-8);
      margin-block-end: var(--sp-8);
      transition: backdrop-filter var(--anime-time) var(--anime-func);

      @media (hover: hover) {
        &:hover {
          backdrop-filter: blur(var(--sp-100));
        }
      }
    }
  }
}