@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 900;
  src: url(../resources/fonts/poppins-black-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.poppins-black-italic {
  font-family: "Poppins", serif;
  font-weight: 900;
  font-style: italic;
}

.title {
  text-transform: uppercase;
  font-size: 5rem;
  color: var(--brand, #e33333);
  position: relative;
  height: 5rem;
  line-height: 1.1;
  position: relative;
  visibility: hidden;
  width: -moz-fit-content;
  width: fit-content;
}
.title::before, .title::after {
  visibility: visible;
  content: attr(data-word);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  transition: transform 0.4s;
}
.title::before {
  -webkit-clip-path: polygon(0 50%, 100% 41%, 100% 0%, 0% 0%);
          clip-path: polygon(0 50%, 100% 41%, 100% 0%, 0% 0%);
  will-change: transform;
  transform: translatex(0.11rem);
}
.title::after {
  -webkit-clip-path: polygon(0 53%, 100% 44%, 100% 100%, 0 100%);
          clip-path: polygon(0 53%, 100% 44%, 100% 100%, 0 100%);
  transform: translatex(-0.11rem);
}
.title:hover::before, .title:hover::after {
  transform: translatex(0) translatez(0);
}/*# sourceMappingURL=styles.css.map */