/**
 * Fichier  : /pages/homepage/section-2/assets/css/style.css
 * Fonction : style de la section 2 de la page d'accueil
 */


/* ==================================================
   SECTION
================================================== */

#owner {
    position: relative;
}

#owner {
    height: 100vh;
}

#owner {
    background: rgb(0, 0, 0);
    background-image:
        linear-gradient(
            -90deg,
            rgba(0, 0, 0, 0.40) 0%,
            rgba(0, 0, 0, 0.20) 60%,
            rgba(0, 0, 0, 0) 100%
        ),
        url("https://dermaboost.fr/wp-content/uploads/2026/05/1259609876374.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#owner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}


/* ==================================================
   CONTENT
================================================== */

#owner .inner {
    width: 30%;
    margin-right: 14em;

    display: flex;
    flex-direction: column;
    gap: 1.2em;
}


/* ==================================================
   TEXT
================================================== */

#owner .inner h5 {
    font-family: 'content-font';
    font-size: 8px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 8px;
    color: #fff;
}

#owner .inner h3 {
    font-family: 'bold-font';
    font-size: 2.4em;
    letter-spacing: -1px;
    line-height: 1em;

    text-shadow: 0 0 1px #000;
    color: #fff;
}

#owner .inner p {
    font-family: 'content-font';
    font-size: .9em;
    line-height: 1.6em;
    color: #fff;
}

#owner .inner p b {
    font-family: 'bold-font';
}


/* ==================================================
   RESPONSIVE
================================================== */

@media screen and (max-width: 1024px) {

    #owner {
        flex-direction: column-reverse;

        background-image:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.60) 0%,
                rgba(0, 0, 0, 0.20) 60%,
                rgba(0, 0, 0, 0) 100%
            ),
            url("https://dermaboost.fr/wp-content/uploads/2026/05/1856958878546.webp");
    }

    #owner .inner {
        width: auto;
        margin: 4em 2em;
    }

    #owner .inner h3 {
        font-size: 1.8em;
        line-height: 1.2em;
    }

    #owner .planity {
        display: none;
    }

}