.text-center {
  text-align: center;
}

.underline-title {
  position: relative;
  padding-bottom: 15px !important;
  white-space: nowrap;

  &.text-center {
    &::after {
      left: 50%;
      transform: translateX(-50%);
    }
  }

  &::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    display: block;
    width: 2em;
    height: 2px;
    background-color: var(--primary-color);
  }
}

.fill-parent {
  width: 100%;
  height: 100%;
}

.cover-parent {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.hover-hl {
  overflow: visible;

  .hover-hl-content {
    position: absolute;
    top: 0;
    left: 0;
  }

  .hover-hl-hidden {
    opacity: 0;
    transition: 0.3s;
  }

  &::before {
    content: "";
    display: block;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.3s;
    background-color: var(--primary-color);
    z-index: 100;
  }

  &:hover {
    &::before {
      transform: translate(16px, 16px);
      opacity: 0.8;
    }

    .hover-hl-content {
      z-index: 101;
    }

    .hover-hl-hidden {
      opacity: 1;
    }
  }
}