﻿.jersey-home .intro {
    pointer-events:none;
}


.jersey-home:last-of-type .intro {
    cursor: pointer;
    pointer-events:all;
}

.intro .info-wrapper {
    position: relative;
}
.intro .text-wrapper p {
    font-size: 20px;
    line-height: 26px;
}

.intro .back {
    position: relative;
    height: 743px;
}

    .intro .back img,
    .intro .back video{
        object-fit: cover;
        height: 100%;
        width: 100%;
    }
.intro .dark-div {
    background-color: #242424;
    height: 655px;
}
.intro .dark-div p {
    position: relative;
    padding: 120px 21px 30px 30px;
    color: white;
    font-size: 36px;
    font-weight: bold;
    width: 95%;
    bottom: -350px;
}

    .intro .text-wrapper {
        position: absolute;
        padding: 60px 15px;
        color: white;
        top: 230px;
    }

    .intro .text-wrapper .title {
        font-size: 46px;
        line-height: 52px;
        font-weight: bold;
        margin: 0;
        /*padding-right: 20%;*/
        color: white;
    }

.intro .shadows {
    position: absolute;
    top: 0;
    width: 100%;
    height:100%;
}

    .intro .shadows .top-shadow {
        height: 444px;
        width: 100%;
        top: 0;
        background: linear-gradient(to bottom, rgb(0 0 0 / 65%), transparent);
    }

    .intro  .bot-shadow {
        height: 299px;
        width: 100%;
        background: linear-gradient(to top, rgb(0 0 0 / 50%), transparent);
    }

    .intro .shadows .top-color-layer {
        height: 22px;
        width: 100%;
        position: absolute;
        top: 0;
        mix-blend-mode: multiply;
    }

        .intro.principal .shadows .top-color-layer {
            background: #c30000;
        }

        .intro.alternate .shadows .top-color-layer {
            background: #F3B300;
        }

/*.intro .texture-img {
    position: absolute;
    bottom: -660px;
    right: 0;
}*/

/*.intro .player-img {
    height:800px;
    position: absolute;
    bottom: -400px;
}*/

    .intro .player-img img {
        width: min(calc(413 / 375 * 100vw), 480px);
        /*transform: translateY(69%)*/
    }
    .intro .texture-img img {
        width: min(calc(280 / 375 * 100vw), 280px);
    }

    .intro .player-img .campaign-element {
        z-index: 10;
    }

@media(min-width: 992px){

    .intro .text-wrapper {
        display: flex;
        padding: 120px 135px;
        gap: 25px;
        top: 0;
    }

        .intro .text-wrapper .title {
            font-size: 46px;
            line-height: 52px;
            padding: 0;
            width: 50%;
        }

        .intro .text-wrapper p {
            font-size: 20px;
            line-height: 26px;
            width: 50%;
        }

        .intro .shadows .top-shadow {
            height: 49%;
        }

        .intro .shadows .bot-shadow {
            height: 51%;
        }

        .intro .shadows .top-color-layer {
            height: 50px;
            width: 55%;
        }

            .intro.principal .shadows .top-color-layer {
                margin-right: 5%;
                right: 0;
            }

            .intro.alternate .shadows .top-color-layer {
                margin-left: 5%;
            }

            .jersey22_23-home.fase1 .intro.principal .shadows .top-color-layer {
                margin-right: 0;
                width: 60%;
            }

    .intro .back{
        height: 878px;
    }

    .intro .player-img {
        bottom: -215px;
    }
    .intro .player-img img{
        bottom: 0;
        transform: translateY(5%);
    }
    .intro .texture-img {
        bottom: 0;
    }

    .intro .player-img img, .intro .texture-img img {
        width: min( calc(559 / 1366 * 100vw), 559px);
    }


    .intro .dark-div p {
        padding: 60px 135px;
        font-size: 36px;
        width: max( calc(805 / 1366 * 100vw), 520px);
        margin-right: 0;
        margin-left: auto;
        line-height: 42px;
        bottom: -20px;
    }

    .intro .dark-div {
        height: 250px;
    }
}