.projects-reel {
  overflow: hidden;

  button {
    justify-self: start;
    padding: 0;
    border: 0;
    border-bottom: 2px solid currentColor;
    background: none;
    color: var(--blue);
    font: 600 15px var(--f-body);
    cursor: pointer;
  }

  .__reel {
    overflow: hidden;
    margin-top: 2rem;
  }

  .__track {
    display: flex;
    gap: 18px;
    width: max-content;
    animation: projects-run 45s linear infinite;
  }

  figure {
    position: relative;
    flex: none;
    width: 360px;
    height: 280px;
    margin: 0;
    overflow: hidden;
    border-radius: var(--r);
    background: var(--tint);
  }

  picture {
    display: block;
    height: 100%;
  }

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  figcaption {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    padding: 32px 16px 12px;
    color: #fff;
    background: linear-gradient(transparent, rgba(12, 22, 32, .85));
    font-size: 15px;
  }

  &:has(button[aria-pressed="true"]) .__track {
    animation-play-state: paused;
  }

  @media (max-width: 700px) {
    figure {
      width: 280px;
      height: 220px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    button {
      display: none;
    }

    .__reel {
      overflow-x: auto;
    }

    .__track {
      animation: none;
    }

    figure[aria-hidden="true"] {
      display: none;
    }
  }
}

@keyframes projects-run {
  to {
    transform: translateX(calc(-50% - 9px));
  }
}