Vintage label maker psuedo-typeface

<label-maker>
  <span class="word">Live</span>
  <span class="word">the</span>
  <span class="word">life</span>
  <span class="word">you</span>
  <span class="word">imagined</span>
</label-maker>

@font-face {
  font-family: Quicksand;
  src: url("./Quicksand-Light.ttf");
  font-weight: 300;
}

body {
  min-height: 100dvh;
  margin: 0;
  padding-inline: 0.1rem;

  display: grid;
  place-items: center;

  background-color: hsl(55, 90%, 60%);
}

label-maker {
  max-width: 1000px;

  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-size: 6.25rem;

  letter-spacing: 0.5rem;
  text-transform: uppercase;

  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;

  .word {
    --bg-color: hsl(80, 60%, 3%);

    padding: 1rem 1.5rem;
    margin-block-end: 0.25rem;

    background-color: var(--bg-color);
    color: hsl(168, 9%, 99%);

    text-shadow: 0px -1px 2px var(--bg-color), 0px 1px 1px hsl(168, 9%, 79%),
      -2px 1px 1px hsl(168, 9%, 79%), 2px -1px 1px hsl(168, 9%, 89%),
      -2px 1px 1px hsl(168, 9%, 69%), 4px 1px 2px var(--bg-color),
      5px 1px 2px hsl(168, 9%, 79%);

    box-shadow: 0 2px hsl(80, 60%, 3%, 0.5), 1px 2px hsl(80, 60%, 3%, 0.5),
      0 0 2px hsl(80, 60%, 13%, 0.3), 0 0 4px hsl(80, 60%, 13%, 0.2);
  }

  .word:nth-child(1) {
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 5% 100%);
  }

  .word:nth-child(3) {
    clip-path: polygon(3% 4%, 98% 0, 100% 100%, 0 100%);
  }

  .word:nth-of-type(5) {
    padding-inline: 1rem 1.25rem;
    clip-path: polygon(0 0, 94% 0, 100% 100%, 0% 100%);
  }
}

@media screen and (max-width: 500px) {
  label-maker {
    max-width: 300px;
    gap: 0.5rem;

    font-size: 2.5rem;
  }
}

@media screen and (min-width: 501px) and (max-width: 900px) {
  label-maker {
    max-width: 750px;
    gap: 0.5rem;

    font-size: 5rem;
  }
}