/* Code CSS de la section about de la page d'accueil 
présente un titre, un paragraphe de présentation, ainsi qu'une photo en positionnement absolute et parallaxe. */
.about{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin:150px 0 50px 0;
    & h2{
    font-family:'AlbertSansExtraBold';
    text-transform: none;
    font-size:4rem;
    margin:0;
    padding:0;
    text-align:center;
    line-height: 1;
  }
      & p{
        font-family:'AlbertSansMedium' !important;
        color:var(--black);
        font-size:1.2rem;
        text-align: center;
        width:75%;
        & span{
            font-family:'ALbertSansBold';
        }
    }

    & .about-container{
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width:75%;
        gap:50px;
    }

}

.photo-img {
    display:flex;
    align-items: center;
    margin:10px 0;
    & img{
    object-fit: cover;
    width: 15vw;
    height:15vw;
    min-width:15vw;
    border-radius:50%;
    z-index: 1;
    border:5px solid var(--accent);
}
}


/* ---------- responsive ---------- */

@media screen and (max-width:1024px){
    .about{
        margin: 80px 0 50px 0;
        justify-content: center;
        gap:50px;
        & h2{
            font-size:3rem;
            line-height:1;
            margin:0;
        }
        & p{
            width:100%;
            font-size:1rem !important;
        }

        .photo-img img{
            width: 25vw;
            height: 25vw;
            min-width: 25vw;
        }
    } 
}


@media screen and (max-width:768px){
    .about{
        margin-bottom:30px;
        margin: 50px 0 50px 0;
        & h2{
            margin: 0;
        }
        & p{
            font-size:1rem !important;
        }
        & .about-container{
            gap:20px;
        }
        &  .photo-img img{
        width:40vw;
        height:40vw;
        min-width:40vw;
    }
    }

}


@media screen and (max-width:480px){
    .about{
        & p{
            font-size:0.9rem !important;
        }
    }

}