.rivax-promo-box-widget {
    width: 100%;
}

.rivax-promo-box {
    margin: 0 auto;
    max-width: 100%;
    position: relative;
    display: flex;
    overflow: hidden;
    border-radius: var(--soft-radius);
}

.rivax-promo-box .image-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    transition: 0.35s;
    border-radius: inherit;
}

.rivax-promo-box .image-wrapper::before {
    content: '';
    position: absolute;
    transition: inherit;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: transparent;
}

.rivax-promo-box .image-wrapper::after {
    content: '';
    position: absolute;
    transition: inherit;
    left: 30px;
    top: 30px;
    right: 30px;
    bottom: 30px;
    border-radius: inherit;
    z-index: 2;
}

.rivax-promo-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: inherit;
    transform: scale(1.15);
}

.rivax-promo-box .content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 3;
    padding: 40px;
    transition: 0.35s;
}

.rivax-promo-box a {
    z-index: 10;
}

.rivax-promo-box .promo-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    transition: inherit;
    margin: 0;
}

.rivax-promo-box p {
    color: #ffffff;
    transition: inherit;
    margin: 0;
}

/*--- Lily ---*/

.rivax-promo-box.effect-lily:hover img {
    transform-origin: left;
}

.rivax-promo-box.effect-lily .image-wrapper::before {
    background: #3c43536e;
}

.rivax-promo-box.effect-lily:hover .image-wrapper::before {
    opacity: 0;
}

.rivax-promo-box.effect-lily .content-wrapper {
    top: auto;
}

.rivax-promo-box.effect-lily p {
    opacity: 0;
    margin-bottom: -30px;
    transition: 0.25s opacity, 0.35s;
}

.rivax-promo-box.effect-lily:hover .promo-title {
    transform: translateY(-30px);
}

.rivax-promo-box.effect-lily:hover p {
    transform: translateY(-30px);
    opacity: 1;
    transition-delay: 0.05s;
}

/*--- Sadie ---*/

.rivax-promo-box.effect-sadie .content-wrapper {
    justify-content: center;
    text-align: center;
}

.rivax-promo-box.effect-sadie p {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: inherit;
    padding-bottom: 4px;
    opacity: 0;
    transform: translateY(10px);
}

.rivax-promo-box.effect-sadie:hover .promo-title {
    transform: translateY(-40px);
}

.rivax-promo-box.effect-sadie:hover p {
    transform: translateY(0);
    opacity: 1;
}

.rivax-promo-box.effect-sadie .image-wrapper::before {
    background: linear-gradient(to bottom, #484c6100 0%, #484c61cc 50%);
    opacity: 0;
    transform: scaleY(0.5);
    transform-origin: bottom;
}

.rivax-promo-box.effect-sadie:hover .image-wrapper::before {
    transform: scaleY(1);
    opacity: 1;
}

/*--- Layla ---*/

.rivax-promo-box.effect-layla:hover img {
    transform-origin: left;
}

.rivax-promo-box.effect-layla .image-wrapper::before {
    background: #3c43536e;
}

.rivax-promo-box.effect-layla .content-wrapper {
    justify-content: center;
    text-align: center;
}

.rivax-promo-box.effect-layla .promo-title {
    transform: translateX(-30px);
}

.rivax-promo-box.effect-layla:hover .promo-title {
    transform: translateX(0);
}

.rivax-promo-box.effect-layla p {
    opacity: 0;
    transform: translateY(-20px);
    transition: 0.25s opacity, 0.35s;
}

.rivax-promo-box.effect-layla:hover p {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.05s;
}

/*--- Oscar ---*/

.rivax-promo-box.effect-oscar .image-wrapper::before {
    background: linear-gradient(45deg, #22682a94 0%, #9b4a1b94 40%, #3a342a94 100%);
}

.rivax-promo-box.effect-oscar .image-wrapper::after {
    border: 1px solid #fff;
    opacity: 0;
    transform: scale(0.5);
}

.rivax-promo-box.effect-oscar:hover .image-wrapper::after {
    opacity: 1;
    transform: scale(1);
}

.rivax-promo-box.effect-oscar .content-wrapper {
    justify-content: center;
    text-align: center;
    padding: 50px;
}

.rivax-promo-box.effect-oscar .promo-title {
    transform: translateY(30px);
}

.rivax-promo-box.effect-oscar:hover .promo-title {
    transform: translateY(0);
}

.rivax-promo-box.effect-oscar p {
    opacity: 0;
    transform: scale(0.5);
}

.rivax-promo-box.effect-oscar:hover p {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.05s;
}

/*--- Marley ---*/

.rivax-promo-box.effect-marley .content-wrapper {
    text-align: right;
    justify-content: space-between;
}

.rivax-promo-box.effect-marley .promo-title {
    transform: translateY(30px);
}

.rivax-promo-box.effect-marley:hover .promo-title {
    transform: translateY(0);
}

.rivax-promo-box.effect-marley p {
    transform: translateY(50px);
    opacity: 0;
}

.rivax-promo-box.effect-marley:hover p {
    transform: translateY(20px);
    opacity: 1;
    transition-delay: 0.05s;
}

.rivax-promo-box.effect-marley .promo-title::after {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #fff;
    content: "";
    transform: translateY(30px);
    opacity: 0;
    transition: inherit;
}

.rivax-promo-box.effect-marley:hover .promo-title::after {
    transform: translateY(0);
    opacity: 1;
}

/*--- Ruby ---*/

.rivax-promo-box.effect-ruby:hover img {
    transform: scale(1);
}

.rivax-promo-box.effect-ruby .image-wrapper::before {
    background: #3c43536e;
}

.rivax-promo-box.effect-ruby .content-wrapper {
    justify-content: center;
    text-align: center;
}

.rivax-promo-box.effect-ruby .promo-title {
    transform: translateY(30px);
}

.rivax-promo-box.effect-ruby:hover .promo-title {
    transform: translateY(0);
}

.rivax-promo-box.effect-ruby p {
    opacity: 0;
    transform: translateY(30px) scale(1.2);
    transition: 0.25s opacity, 0.35s;
}

.rivax-promo-box.effect-ruby:hover p {
    transform: translateY(0) scale(1);
    opacity: 1;
    transition-delay: 0.05s;
}

/*--- Roxy ---*/

.rivax-promo-box.effect-roxy .image-wrapper::before {
    background: #3c43536e;
}

.rivax-promo-box.effect-roxy .image-wrapper::after {
    border: 1px solid #fff;
    opacity: 0;
    transform: translateX(-20px);
}

.rivax-promo-box.effect-roxy:hover .image-wrapper::after {
    opacity: 1;
    transform: translateX(0);
}

.rivax-promo-box.effect-roxy .content-wrapper {
    justify-content: center;
    padding: 60px;
}

.rivax-promo-box.effect-roxy p {
    opacity: 0;
    transform: translateX(-10px);
}

.rivax-promo-box.effect-roxy:hover p {
    transform: translateY(0);
    opacity: 1;
}

/*--- Bubba ---*/

.rivax-promo-box.effect-bubba .image-wrapper::before {
    background: #3c43536e;
}

.rivax-promo-box.effect-bubba .content-wrapper {
    justify-content: center;
    text-align: center;
}

.rivax-promo-box.effect-bubba .promo-title {
    transform: translateY(-30px);
}

.rivax-promo-box.effect-bubba:hover .promo-title {
    transform: translateY(0);
}

.rivax-promo-box.effect-bubba p {
    opacity: 0;
    transform: translateY(30px);
    transition: 0.25s opacity, 0.35s;
}

.rivax-promo-box.effect-bubba:hover p {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.05s;
}

.rivax-promo-box.effect-bubba .content-wrapper::before,
.rivax-promo-box.effect-bubba .content-wrapper::after {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: "";
    opacity: 0;
    transition: inherit;
}

.rivax-promo-box.effect-bubba .content-wrapper::before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: scale(0, 1);
}

.rivax-promo-box.effect-bubba .content-wrapper::after {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    transform: scale(1, 0);
}

.rivax-promo-box.effect-bubba:hover .content-wrapper::before,
.rivax-promo-box.effect-bubba:hover .content-wrapper::after {
    opacity: 1;
    transform: scale(1);
}

/*--- Romeo ---*/

.rivax-promo-box.effect-romeo:hover img {
    transform: scale(1);
}

.rivax-promo-box.effect-romeo .image-wrapper::before {
    background: #3c43536e;
}

.rivax-promo-box.effect-romeo .content-wrapper {
    justify-content: center;
    text-align: center;
    gap: 20px;
}

.rivax-promo-box.effect-romeo .promo-title {
    transform: translateY(-20px);
}

.rivax-promo-box.effect-romeo:hover .promo-title {
    transform: translateY(0);
}

.rivax-promo-box.effect-romeo p {
    transform: translateY(20px);
}

.rivax-promo-box.effect-romeo:hover p {
    transform: translateY(0);
}

.rivax-promo-box.effect-romeo .content-wrapper::before,
.rivax-promo-box.effect-romeo .content-wrapper::after {
    position: absolute;
    top: 50%;
    right: 30px;
    left: 30px;
    height: 1px;
    content: "";
    transition: inherit;
    background: white;
}

.rivax-promo-box.effect-romeo:hover .content-wrapper::before {
    transform: rotate(45deg) scale(0.85);
}

.rivax-promo-box.effect-romeo:hover .content-wrapper::after {
    transform: rotate(-45deg) scale(0.85);
}

/*--- Sarah ---*/

.rivax-promo-box.effect-sarah:hover img {
    transform-origin: left;
}

.rivax-promo-box.effect-sarah .image-wrapper::before {
    background: #3c43536e;
    opacity: 0;
}

.rivax-promo-box.effect-sarah:hover .image-wrapper::before {
    opacity: 1;
}

.rivax-promo-box.effect-sarah .content-wrapper {
    gap: 10px;
}

.rivax-promo-box.effect-sarah .promo-title {
    position: relative;
}

.rivax-promo-box.effect-sarah p {
    transform: translateX(100px);
    opacity: 0;
}

.rivax-promo-box.effect-sarah:hover p {
    transform: translateX(0);
    opacity: 1;
}

.rivax-promo-box.effect-sarah .promo-title::before {
    position: absolute;
    bottom: -5px;
    width: 100%;
    left: 0;
    height: 3px;
    content: "";
    transition: inherit;
    background: white;
    transform: scaleX(0);
    transform-origin: left;
}

.rivax-promo-box.effect-sarah:hover .promo-title::before {
    transform: scaleX(1);
}

/*--- Chico ---*/

.rivax-promo-box.effect-chico:hover img {
    transform: scale(1);
}

.rivax-promo-box.effect-chico .image-wrapper::before {
    background: #3c43536e;
    opacity: 0;
}

.rivax-promo-box.effect-chico:hover .image-wrapper::before {
    opacity: 1;
}

.rivax-promo-box.effect-chico .image-wrapper::after {
    border: 1px solid #fff;
    opacity: 0;
    transform: scale(1.3);
}

.rivax-promo-box.effect-chico:hover .image-wrapper::after {
    opacity: 1;
    transform: scale(1);
}

.rivax-promo-box.effect-chico .content-wrapper {
    justify-content: center;
    text-align: center;
    padding: 50px;
}

.rivax-promo-box.effect-chico p {
    opacity: 0;
    transform: scale(1.3);
}

.rivax-promo-box.effect-chico:hover p {
    transform: scale(1);
    opacity: 1;
}

/*--- Milo ---*/

.rivax-promo-box.effect-milo:hover img {
    transform-origin: left;
}

.rivax-promo-box.effect-milo .image-wrapper::before {
    background: #3c43536e;
    opacity: 0;
}

.rivax-promo-box.effect-milo:hover .image-wrapper::before {
    opacity: 1;
}

.rivax-promo-box.effect-milo .content-wrapper {
    justify-content: space-between;
    flex-direction: column-reverse;
}

.rivax-promo-box.effect-milo .promo-title {
    text-align: right;
}

.rivax-promo-box.effect-milo p {
    opacity: 0;
    transform: translateX(-30px);
    max-width: 160px;
    border-inline-start: 3px solid;
    padding-inline-start: 12px;
}

.rivax-promo-box.effect-milo:hover p {
    transform: translateX(0);
    opacity: 1;
}

/*--- Apollo ---*/

.rivax-promo-box.effect-apollo:hover img {
    transform: scale(1);
}

.rivax-promo-box.effect-apollo .image-wrapper::before {
    background: #3c43536e;
    opacity: 0;
}

.rivax-promo-box.effect-apollo:hover .image-wrapper::before {
    opacity: 1;
}

.rivax-promo-box.effect-apollo .image-wrapper::after {
    background: rgba(255, 255, 255, 0.5);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);
}

.rivax-promo-box.effect-apollo:hover .image-wrapper::after {
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);
}

.rivax-promo-box.effect-apollo .content-wrapper {
    justify-content: space-between;
}

.rivax-promo-box.effect-apollo p {
    opacity: 0;
    transform: translateX(-30px);
    max-width: 160px;
    border-inline-start: 3px solid;
    padding-inline-start: 12px;
    margin-inline-start: auto;
}

.rivax-promo-box.effect-apollo:hover p {
    transform: translateX(0);
    opacity: 1;
}

/*--- Jazz ---*/

.rivax-promo-box.effect-jazz:hover img {
    transform: scale(1);
}

.rivax-promo-box.effect-jazz .image-wrapper::before {
    background: linear-gradient(-45deg, #f3cf3f4f 0%, #f33f584f 100%);
    opacity: 0;
}

.rivax-promo-box.effect-jazz:hover .image-wrapper::before {
    opacity: 1;
}

.rivax-promo-box.effect-jazz .image-wrapper::after {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    opacity: 0;
    transform: rotate(45deg) scale3d(1, 2, 1);
}

.rivax-promo-box.effect-jazz:hover .image-wrapper::after {
    opacity: 1;
    transform: rotate(45deg) scale3d(1, 1.5, 1);
}

.rivax-promo-box.effect-jazz .content-wrapper {
    justify-content: center;
    text-align: center;
}

.rivax-promo-box.effect-jazz .promo-title {
    transform: translateY(-10px);
}

.rivax-promo-box.effect-jazz:hover .promo-title {
    transform: scale(1.15);
}

.rivax-promo-box.effect-jazz p {
    opacity: 0;
}

.rivax-promo-box.effect-jazz:hover p {
    transform: scale(1.1);
    opacity: 1;
}

/*--- Ming ---*/

.rivax-promo-box.effect-ming:hover img {
    transform: scale(1);
}

.rivax-promo-box.effect-ming .image-wrapper::before {
    background: #3c43536e;
    opacity: 0;
}

.rivax-promo-box.effect-ming:hover .image-wrapper::before {
    opacity: 1;
}

.rivax-promo-box.effect-ming .image-wrapper::after {
    border: 3px solid #fff;
}

.rivax-promo-box.effect-ming .content-wrapper {
    justify-content: center;
    text-align: center;
}

.rivax-promo-box.effect-ming .promo-title {
    transform: translateY(-10px);
}

.rivax-promo-box.effect-ming:hover .promo-title {
    transform: scale(1.15);
}

.rivax-promo-box.effect-ming p {
    opacity: 0;
}

.rivax-promo-box.effect-ming:hover p {
    transform: scale(1.1);
    opacity: 1;
}