/* Triggers */
#back-trigger,
#forward-trigger {
    display: block;
    position: absolute;
    height: 100%;
    width: 1vw;
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
    z-index: 1;
}


#back-trigger {
    left: 0;
}

#forward-trigger {
    right: 0;
}


/* Visual */
.back-visual,
.forward-visual {
    display: flex;
    position: absolute;
    height: 100%;
    width: 1.5vw;
    justify-content: center;
    align-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.25s linear;
    pointer-events: none;

    div {
        position: absolute;
        display: flex;
        bottom: 10%;
        align-content: center;
        justify-content: center;
        width: 60%;
        height: 10%;
    }

    img {
        object-fit: contain;
        width: 100%;
    }
}

.back-visual {
    left: 0;
    transform: translateX(-100%);
}

.forward-visual {
    right: 0;
    transform: translateX(100%);

    img {
        scale: -1;
    }
}

.forward-active {
    transform: translateX(0%) !important;
}

.back-active {
    transform: translateX(0%) !important;
}