/* ==========================================
   SERVICES
========================================== */

.services__line{

    grid-column:1 / -1;

    width:100%;
    height:.1px;

    background:var(--text-grey);

    margin-bottom:20px;

    transform-origin:left center;
    transform:scaleX(0);
}


.services{

    position:relative;

    padding:80px 20px;

    background:var(--bg);
    color:var(--text);

    display:grid;

    grid-template-columns:repeat(12,1fr);

    margin-bottom:0px;
}

/* ==========================================
   LEFT
========================================== */

.services__title{

    grid-column:span 6;

    font-size:var(--font-size-sm);

    font-weight:800;
}

/* ==========================================
   RIGHT
========================================== */

.services__list{

    grid-column:span 6;

    position:relative;

    z-index:20;
}

.service-item{

    font-size:var(--font-size-3xl);

    line-height:.95;

    letter-spacing:-0.02em;

    cursor:pointer;

    transition:opacity .3s ease;

    padding-bottom: 10px;
    padding-left: 10px;
}

.services__list:hover .service-item{

    opacity:.25;
}

.services__list .service-item:hover{

    opacity:1;
}

/* ==========================================
   PREVIEW IMAGE
========================================== */

.services-preview{

    position:fixed;

    top:0;
    left:0;

    width:320px;
    height:420px;

    pointer-events:none;

    opacity:0;

    z-index:10;

    transform:translate(-50%,-50%);

    transition:opacity .3s ease;
}

.services-preview img{

    width:100%;
    height:100%;

    object-fit:cover;
}




/* ==========================================
   TABLET
========================================== */

@media (max-width:1490px){

.service-item{

        font-size: var(--font-size-xxl);


}
/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px){

    .services{

        display:flex;

        flex-direction:column;

        gap:40px;

        padding:80px 20px;
    }

    .services__line{

        margin-bottom:0;
    }

    .services__title{

        width:100%;
    }

    .services__list{

        width:100%;
    }

    .service-item{

        font-size: var(--font-size-xxl);

        line-height:1;

        opacity:1 !important;

        padding-bottom: 10px;
        padding-left: 0px;
    }

    /* Désactive l'effet desktop */

    .services__list:hover .service-item{

        opacity:1;
    }

    .services-preview{

        display:none;
    }
}





.services__title,
.service-item{

    opacity:0;

}