*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}


body{
    width: 100%;
    height: 100%;
    font-family: 'Geist', sans-serif;
    background-color: snow;
}

section{
    width: 100%;
    height: 100vh;
}

.hero h1{
    position: absolute;
    width: 100%;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: clamp(1.75rem, 0.4688rem + 6.5104vw, 3.4375rem);
    color: #212121;
}

.hero p{
    text-align: center;
    padding-top: 16px;
    font-size: clamp(1rem, 0.9019rem + 0.4984vw, 1.5rem);
    color: #212121;
}

.card.scroll{
    position: relative;
}

.img{
    position: absolute;
    top:75%;
    left:50%;
    transform: translate(-50%, -50%);
    width: clamp(25rem, 13.9965rem + 35.2113vw, 56.25rem);
    height: clamp(56.25rem, 62.8521rem + -21.1268vw, 37.5rem);
}

.img img {
    border-radius: 16px;
width: 100%;
    height: 100;
    object-fit: cover;
}

#projets{
    height: fit-content;
    padding-top: 60px;
    position: relative;
  z-index: 10;
}

@media (max-width: 900px) {

    .hero{
        height: 100vh;
        width: 100%;
    }

    section{
    width: 100%;
    height: 100vh;
}

    body{
        width: 100%;
        height: fit-content;
    }

    .img{
        max-width: 80vw;
        min-height: 60vh;
        max-height: 70vh;
    }

    .img img{
        max-width: 100%;
        height: 100%;
    }

}