.banner_reference {
    position: relative;
    width: 100%;
    height: 240px;

    background: linear-gradient(120deg, rgba(255, 255, 255, .10), transparent 45%, rgba(0, 0, 0, .08)), var(--bg_silver);

    overflow: hidden;
}

.reference_layer {
    position: absolute;
    inset: 0;

    pointer-events: none;
    will-change: transform;
}


.reference_layer span {
    position: absolute;

    font-family: var(--font-theme);
    white-space: nowrap;

    transform: translate(var(--x), var(--y));
}

.reference_layer span::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    left: -10px;
    top: 50%;

    border-radius: 50%;
    background: currentColor;
    transform: translateY(-50%);
}

/* --------------------------------------- BACK ------------------------------- */
.reference_back {
    z-index: 1;

    font-size: var(--fs-parallax_back);
    font-weight: 800;
    color: rgba(0, 0, 0, .06);
}

.reference_back span:nth-child(1) { --x: -20vw; --y: -60px; }
.reference_back span:nth-child(2) { --x: 5vw;  --y: 180px; }





/* ---------------------------------------- MID ------------------------------- */
.reference_mid {
    z-index: 2;

    font-size: var(--fs-parallax_mid);
    font-weight: 600;
    color: rgba(0, 0, 0, .2);
}

.reference_mid span:nth-child(1) { --x: 6vw; --y: 8px; }
.reference_mid span:nth-child(2) { --x: 0vw; --y: 62px; }
.reference_mid span:nth-child(3) { --x: 8vw; --y: 115px; }
.reference_mid span:nth-child(4) { --x: 20vw; --y: 168px; }





/* --------------------------------------- FRONT ------------------------------ */
.reference_front {
    z-index: 3;

    font-size: var(--fs-parallax_front);
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
}

.reference_front span:nth-child(1) { --x: 36vw; --y: 40px; }
.reference_front span:nth-child(2) { --x: 10vw; --y: 90px; }
.reference_front span:nth-child(3) { --x: 44vw; --y: 140px; }
.reference_front span:nth-child(4) { --x: 5vw; --y: 190px; }





/* ------------------------------------------------------ MOBILE HORIZONTAL --------------------------- */
@media (orientation: landscape) and (max-height: 500px) {
    .banner_reference {
        height: 240px;
    }

    .reference_mid span:nth-child(1) { --x: 60vw; --y: 5px; }
    .reference_mid span:nth-child(2) { --x: 4vw; --y: 55px; }
    .reference_mid span:nth-child(3) { --x: 30vw; --y: 130px; }
    .reference_mid span:nth-child(4) { --x: 5vw; --y: 190px; }

    .reference_front {
        font-size: 2.1rem !important;
    }

    .reference_front span:nth-child(1) { --x: 36vw; --y: 20px; }
    .reference_front span:nth-child(2) { --x: 10vw; --y: 80px; }
    .reference_front span:nth-child(3) { --x: 44vw; --y: 160px; }
    .reference_front span:nth-child(4) { --x: 5vw; --y: 220px; }

}




/* ---------------------------------------------------------- TABLET ---------------------------------- */
@media (min-width: 768px) {
    .banner_reference {
        height: 280px;
    }

    .reference_mid span:nth-child(1) { --x: 60vw; --y: 5px; }
    .reference_mid span:nth-child(2) { --x: 4vw; --y: 55px; }
    .reference_mid span:nth-child(3) { --x: 30vw; --y: 130px; }
    .reference_mid span:nth-child(4) { --x: 5vw; --y: 190px; }

    .reference_front span:nth-child(1) { --x: 36vw; --y: 20px; }
    .reference_front span:nth-child(2) { --x: 10vw; --y: 80px; }
    .reference_front span:nth-child(3) { --x: 44vw; --y: 160px; }
    .reference_front span:nth-child(4) { --x: 5vw; --y: 220px; }
}

/* -------------------------------------------------- NOTEBOOK ------------------------------------ */
@media (min-width: 1024px) {
    .banner_reference {
        height: 280px;
    }

    .reference_mid span:nth-child(1) { --x: 10vw; --y: 5px; }
    .reference_mid span:nth-child(2) { --x: 10vw; --y: 50px; }
    .reference_mid span:nth-child(3) { --x: 30vw; --y: 110px; }
    .reference_mid span:nth-child(4) { --x: 3vw; --y: 180px; }

    .reference_front span:nth-child(1) { --x: 60vw; --y: 30px; }
    .reference_front span:nth-child(2) { --x: 2vw; --y: 90px; }
    .reference_front span:nth-child(3) { --x: 16vw; --y: 160px; }
    .reference_front span:nth-child(4) { --x: 48vw; --y: 220px; }
}

/* --------------------------------------------------- DELL ------------------------------------- */
@media (min-width: 1200px) {
    .banner_reference {
        height: 240px;
    }

    .reference_mid span:nth-child(1) { --x: 10vw; --y: 35px; }
    .reference_mid span:nth-child(2) { --x: 45vw; --y: 90px; }
    .reference_mid span:nth-child(3) { --x: 10vw; --y: 150px; }
    .reference_mid span:nth-child(4) { --x: 3vw; --y: 210px; }

    .reference_front span:nth-child(1) { --x: 60vw; --y: 30px; }
    .reference_front span:nth-child(2) { --x: 6vw; --y: 90px; }
    .reference_front span:nth-child(3) { --x: 66vw; --y: 140px; }
    .reference_front span:nth-child(4) { --x: 48vw; --y: 190px; }
}