.paths-feature {
  display: grid;
  margin-top: var(--space-large);
  pointer-events: none;
  position: relative;
}

.paths-feature__link {
  margin-inline: auto;
  position: relative;
  width: min(100%, 14em);
}

.paths-feature__link .path {
  z-index: 1;
}

.paths-feature__link .path:before {
  background: var(--color-paper);
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0.5em 1.4em 0 rgba(var(--rgb-black), 0.05),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05)
  ;
  border-radius: 0.2em;
  content: '';
  inset: 0;
  overflow: hidden;
  pointer-events: auto;
  position: absolute;
  transform: rotate(-3deg);
}

.paths-feature__link .path .path__visual {
  padding: 1.875em 2.125em 0.75em 2.125em;
}

.paths-feature__link .path .path__svg svg {
  height: 12.75em;
}

.paths-feature__link .path .path__svg svg path {
  stroke-dasharray: 1 12;
  stroke-width: 5.375;
}

.paths-feature__link .path .path__point:first-child {
  margin-left: -0.9875em;
  margin-top: 1.075em;
}

.paths-feature__link .path .path__point:first-child:before {
  background-color: transparent;
}

.paths-feature__link .path .path__point:before {
  background-color: var(--color-paper);
  background-size: 1.1em auto;
  height: 1.5em;
  width: 1.5em;
}

.paths-feature__link .path .path__footer {
  margin: 0 0 1.375em 0;
}

.paths-feature__link .path .path__footer:before {
  height: 2.2em;
  margin: 0;
  width: 2.2em;
}

.paths-feature__link:before,
.paths-feature__link:after {
  background: var(--color-paper);
  border-radius: 0.2em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0 0.1em 0.02em rgba(var(--rgb-black), 0.05)
  ;
  content: '';
  inset: 0;
  overflow: hidden;
  position: absolute;
}

.paths-feature__link:before {
  transform: rotate(5deg) scale(0.94) translate(0.125em, -0.3em);
}

.paths-feature__link:after {
  transform: rotate(-10deg) scale(0.95) translate(-0.125em, 0.625em);
}

.paths-feature__label {
  background: var(--color-yellow);
  color: var(--color-black);
  font-family: 'Sharpie', Sans-Serif;
  font-size: var(--font-size-xx-small);
  font-variant-ligatures: none;
  font-weight: 400;
  left: 0;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.3em 0.5em 0.4em 0.5em;
  pointer-events: auto;
  position: absolute;
  text-transform: uppercase;
  top: 0;
  transform: rotate(-5deg) translate(-1.45em, -0.75em);
  white-space: nowrap;
  z-index: 2;
}



@media(hover: hover) {

  .paths-feature__link .path:before {
    outline: 0.1em solid transparent;
    outline-offset: 0.24em;
    transition:
      outline-color var(--transition-slow),
      outline-offset var(--transition-slow)
    ;
  }

  .paths-feature__link:before,
  .paths-feature__link:after {
    transition:
      filter var(--transition-slow),
      opacity var(--transition-slow),
      transform var(--transition-slow)
    ;
    will-change: transform;
  }

  .paths-feature__link:focus .path:before,
  .paths-feature__link:hover .path:before {
    outline-color: var(--color-black);
    outline-offset: 0.12em;
  }

  .paths-feature__link:focus:before,
  .paths-feature__link:focus:after,
  .paths-feature__link:hover:before,
  .paths-feature__link:hover:after {
    filter: blur(0.25em);
    opacity: 0.8;
  }

  .paths-feature__link:focus:before,
  .paths-feature__link:hover:before {
    transform: rotate(7deg) scale(0.94) translate(1.125em, -0.1em);
  }

  .paths-feature__link:focus:after,
  .paths-feature__link:hover:after {
    transform: rotate(-12deg) scale(0.95) translate(-1.125em, 0.825em);
  }

}



@media(min-width: 48em) {

  .paths-feature {
    height: 100%;
    margin-top: 0;
    overflow-x: clip;
    padding-left: 3em;
    position: absolute;
    right: calc(-1 * var(--space-medium));
  }

  .paths-feature__link {
    margin-inline: initial;
    position: relative;
    transform: translate(1.25em, -3em);
    width: auto;
  }

  .paths-feature__link .path:before {
    transform: rotate(-5deg);
  }

  .paths-feature__link:before {
    transform: rotate(-16deg) translate(-0.125em, 0.875em);
  }

  .paths-feature__link:after {
    transform: rotate(-11deg) translate(-0.125em, 0.5em);
  }

  .paths-feature__label {
    transform: rotate(-5deg) translate(-1.85em, -0.925em);
  }

}



@media(min-width: 48em) and (hover: hover) {

  .paths-feature__link:focus:before,
  .paths-feature__link:hover:before {
    transform: rotate(-21deg) translate(-0.375em, 1.125em);
  }

  .paths-feature__link:focus:after,
  .paths-feature__link:hover:after {
    transform: rotate(-13deg) translate(-0.25em, 0.625em);
  }

}



@media(min-width: 64em) {

  .paths-feature {
    right: calc(-1 * var(--space-neutral));
  }

}