/* ============================================================

   OSHO PREMMARG

   ABOUT US

   ------------------------------------------------------------

   CSS esclusivo di /AboutUs.aspx

   ============================================================ */





/* ============================================================

   PAGE

   ============================================================ */



.about-page {

    padding-top: clamp(65px, 6vw, 105px);

    padding-bottom: clamp(80px, 8vw, 140px);

}





/* ============================================================

   MAIN LAYOUT



   Testo a sinistra

   Immagine ridotta a destra

   ============================================================ */



.about-layout {

    display: grid;

    grid-template-columns: minmax(0, 1fr) clamp(280px, 27vw, 410px);

    gap: clamp(55px, 7vw, 125px);

    align-items: start;

}





/* ============================================================

   TEXT COLUMN

   ============================================================ */



.about-text-column {

    width: 100%;

    max-width: 820px;

}





/* ============================================================

   HEADER

   ============================================================ */



.about-header {

    width: 100%;

}





.about-section-label {

    display: block;

    margin-bottom: 15px;

    color: #7d827b;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 11px;

    font-weight: 400;

    letter-spacing: .18em;

    text-transform: uppercase;

}





.about-header h1 {

    margin: 0;

    color: #27362e;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(42px, 4vw, 68px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: -.025em;

}





/* ============================================================

   INTRO

   ============================================================ */



.about-intro {

    max-width: 720px;

    margin-top: 25px;

}





    .about-intro p {

        margin: 0;

        color: #565c56;

        font-family: Georgia, "Times New Roman", serif;

        font-size: clamp(16px, 1vw, 18px);

        line-height: 1.65;

    }





/* ============================================================

   PERSON

   ============================================================ */



.about-person {

    margin-top: clamp(60px, 6vw, 95px);

}





/* ============================================================

   PERSON HEADING

   ============================================================ */



.about-person-heading {

    display: grid;

    grid-template-columns: 45px 1fr;

    align-items: baseline;

    margin-bottom: 28px;

    padding-bottom: 14px;

    border-bottom: 1px solid rgba(39, 54, 46, .18);

}





.about-number {

    color: #999d97;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 14px;

}





.about-person-heading h2 {

    margin: 0;

    color: #27362e;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(27px, 2.2vw, 40px);

    font-weight: 400;

    line-height: 1.1;

}





/* ============================================================

   PERSON TEXT

   ============================================================ */



.about-person-text {

    max-width: 720px;

    color: #4f554f;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(15px, .92vw, 17px);

    line-height: 1.75;

}





    .about-person-text p {

        margin: 0 0 1.35em;

    }





        .about-person-text p:last-child {

            margin-bottom: 0;

        }





/* ============================================================

   IMAGE COLUMN

   ============================================================ */



.about-image-column {

    width: 100%;

    padding-top: 5px;

}





/* ============================================================

   PHOTO

   ============================================================ */



.about-photo {

    width: 100%;

    overflow: hidden;

}





    .about-photo img {

        display: block;

        width: 100%;

        height: auto;

    }





/* ============================================================

   TABLET

   ============================================================ */



@media (max-width: 1000px) {



    .about-layout {

        grid-template-columns: minmax(0, 1fr) minmax(250px, 34vw);

        gap: 45px;

    }





    .about-text-column {

        max-width: none;

    }

}





/* ============================================================

   SMALL TABLET

   ============================================================ */



@media (max-width: 800px) {



    .about-page {

        padding-top: 60px;

    }





    .about-layout {

        grid-template-columns: 1fr;

        gap: 50px;

    }





    .about-image-column {

        grid-row: 2;

        max-width: 480px;

        padding-top: 0;

    }





    .about-person {

        margin-top: 70px;

    }

}





/* ============================================================

   PHONE

   ============================================================ */



@media (max-width: 600px) {



    .about-page {

        padding-top: 50px;

        padding-bottom: 75px;

    }





    .about-header h1 {

        font-size: clamp(40px, 12vw, 56px);

    }





    .about-intro {

        margin-top: 22px;

    }





    .about-person {

        margin-top: 60px;

    }





    .about-person-heading {

        grid-template-columns: 38px 1fr;

        margin-bottom: 25px;

    }





        .about-person-heading h2 {

            font-size: clamp(27px, 8vw, 36px);

        }





    .about-person-text {

        font-size: 15px;

        line-height: 1.7;

    }





    .about-image-column {

        max-width: 100%;

    }

}