.block-styled-link {
  overflow: hidden;
  position: relative;
  width: fit-content
}

.block-styled-link a {
  position: relative;
  text-decoration: none;
  overflow: hidden;
  font-size: 22px;
  letter-spacing: 0.2px;
}

/* .block-styled-link {
  text-align: left;
} */
/* .block-styled-link.aligncenter {
  text-align: center;
} */
  
.block-styled-link a::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: #18272F;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.block-styled-link a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: #18272F;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(100%);
  transition: transform .3s ease-in-out;
}
  
/* .block-styled-link a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
} */
.block-styled-link a:hover::before {
  animation: text-main-slide-out .8s cubic-bezier(.5,0,0,1) forwards;
}

.block-styled-link a:hover::after {
  animation: text-main-slide-in .8s cubic-bezier(.5,0,0,1) forwards;
}

@keyframes text-main-slide-in {
  55% {
    transform:translateX(100%)
  }
  to {
    transform:translateX(100%)
  }
}

@keyframes text-main-slide-out {
  45% {
    transform:translateX(-100%)
  }
  to {
    transform:translateX(0)
  }
}