:root {
  --stripe-angle: -45deg;
  --stripe: linear-gradient(
      var(--stripe-angle),
      rgb(0 0 0 / 0) 25%,
      #ccc 25%,
      #ccc 50%,
      rgb(0 0 0 / 0) 50%,
      rgb(0 0 0 / 0) 75%,
      #ccc 75%,
      #ccc
    )
    repeat center / 0.25rem 0.25rem;
  --polygon: polygon(0 20%, 50% 0, 100% 20%, 100% 100%, 0% 100%);
}

.nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 10;
  translate: -50%;
  width: 100%;
  font-size: 0.75rem;
  color: var(--white);

  ul {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  li {
    position: relative;

    &:nth-of-type(1) {
      span {
        background: black;
      }

      a::before {
        mix-blend-mode: lighten;
        opacity: 0.2;
      }

      img {
        top: -0.8rem;
      }
    }
    &:nth-of-type(2) {
      span {
        background: var(--green);
      }

      img {
        top: -2rem;
      }
    }
    &:nth-of-type(3) {
      span {
        background: var(--red);
      }

      img {
        top: -1.25rem;
      }
    }

    a {
      display: block;
      position: relative;
      &::before {
        content: "";
        background: var(--stripe);
        width: 100%;
        height: 100%;
        clip-path: var(--polygon);
        position: absolute;
        inset: 0;
        z-index: 1;
        mix-blend-mode: color-burn;
      }
    }

    span {
      display: block;
      clip-path: var(--polygon);
      padding-block: 2rem 0.5rem;
      text-align: center;
      font-weight: bold;
      border: 1px solid var(--black);
      border-bottom: none;
    }

    img {
      position: absolute;
      left: 50%;
      translate: -50%;
      width: 4rem;
      z-index: 1;
    }
  }
}

@media (min-width: 1280px) {
  :root {
    --stripe-angle: 45deg;
  }

  .nav {
    position: fixed;
    top: 0;
    left: calc(50% - 37.45rem);
    font-size: 0.875rem;
    width: auto !important;
    translate: none;

    ul {
      display: block;
    }

    li {
      a::before {
        clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
      }

      span {
        writing-mode: vertical-rl;
        padding: 0 1rem;
        clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
      }

      img {
        width: 2rem;
        translate: -50%s;
      }

      &:nth-of-type(1) {
        a::before {
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
        }

        span {
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
          padding-top: 3rem;
          height: 13rem;
        }

        img {
          top: 4.5rem;
        }
      }
      &:nth-of-type(2) {
        translate: 0 -1.5rem;

        span {
          padding-top: 2.5rem;
          height: 15rem;
        }

        img {
          top: 2.5rem;
        }
      }
      &:nth-of-type(3) {
        translate: 0 -3rem;

        span {
          padding-top: 2rem;
          height: 15rem;
        }

        img {
          top: 3rem;
        }
      }
    }
  }
}