.ha-hover-box { overflow: hidden; }
.ha-hover-box-main { position: relative; overflow: hidden; }
.ha-hover-box-wrapper {
    overflow: hidden;
    align-items: center;
    padding: 50px;
    height: 400px;
    transition: all 0.4s;
    position: relative;
    display: flex;
    width: 100%;
}
.ha-hover-box-wrapper:before {
    position: absolute;
    top: 0; left: 0; z-index: 1;
    width: 100%; height: 100%;
    content: "";
}
.ha-hover-box-wrapper:hover {
    transition-duration: 0.3s;
    transform: scale(1.06);
}
.ha-hover-box-wrapper:hover .ha-hover-box-content {
    opacity: 0;
    transition-delay: 0ms;
    transition-timing-function: cubic-bezier(0.57, 0.21, 0.69, 1);
    transition-duration: 0.1s;
    transition-property: opacity, transform;
    transform: translate(0, 36px);
}
.ha-hover-box-content {
    z-index: 99;
    flex-direction: column;
    text-align: left;
    opacity: 1;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    transition-delay: 0.1s;
    transition-duration: 0.1s;
    transform: translate(0, 0);
}
.ha-hover-sub-title { display: inline-block; margin-bottom: 20px; }
.ha-hover-title { margin: 0 0 10px; font-size: 22px; }
.ha-hover-description { margin: 0; }

.ha-hover-box-wrapper.reverse:hover .ha-hover-box-content {
    opacity: 1;
    transition-delay: 0.1s;
    transform: translate(0, -16px);
}
.ha-hover-box-wrapper.reverse .ha-hover-box-content {
    opacity: 0;
    transition-delay: 0s;
}

.ha-pre--top .ha-hover-sub-title { margin-bottom: 20px; }
.ha-pre--bottom .ha-hover-sub-title { margin-top: 20px; margin-bottom: 0; }