@media (max-width: 700px) {
  .skills-section {
    min-height: auto;
    padding: 88px 0 76px;
  }

  .skills-heading {
    display: block;
    padding: 0 19px;
  }

  .skills-kicker {
    margin-bottom: 22px;
    font-size: 8px;
  }

  .skills-heading h2 {
    max-width: 500px;
    font-size: clamp(46px, 13.5vw, 66px);
  }

  .skills-heading-aside {
    display: grid;
    align-items: end;
    margin-top: 32px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
  }

  .skills-heading-aside > p {
    max-width: 310px;
    font-size: 12px;
    line-height: 1.65;
  }

  .motion-toggle {
    margin-top: 0;
    padding: 10px;
  }

  .motion-toggle > [data-motion-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    clip-path: inset(50%);
  }

  .skills-rail {
    margin-top: 52px;
  }

  .skills-rail::before,
  .skills-rail::after {
    width: 19px;
  }

  .skills-track {
    --skill-gap: 12px;

    padding-right: 19px;
    padding-left: 19px;
    gap: var(--skill-gap);
  }

  .skill-poster {
    width: min(82vw, 350px);
    height: min(119vw, 490px);
    min-height: 420px;
    border-radius: 14px;
  }

  .skill-poster-top {
    top: 17px;
    right: 17px;
    left: 17px;
  }

  .skill-poster-content {
    right: 21px;
    bottom: 24px;
    left: 21px;
  }

  .skill-poster-content h3 {
    font-size: clamp(32px, 10vw, 40px);
  }

  .skills-rail-meta {
    padding: 18px 19px 0;
    font-size: 7px;
  }
}