/* ===========================
        PAGE PRESENTATION
   (styles partagés : .content-section
   dans css/index.css)
=========================== */

/* la photo est à droite du texte, juste sous le titre, et le texte l'épouse */
.president-section {
    display: flow-root;
    padding: 3.75rem 0rem 12.5rem 0rem;
}

.president-photo {
    float: right;
    width: clamp(10rem, 22vw, 14.375rem);
    height: clamp(10rem, 22vw, 14.375rem);
    object-fit: cover;
    border-radius: 50%;
    margin: 0.375rem 0 1rem clamp(1.25rem, 3vw, 2.5rem);
    border: 0.25rem solid white;
    box-shadow: 0 0.625rem 1.5625rem rgba(0, 0, 0, 0.2);
    shape-outside: circle(50%);
}

/* sur petit écran : pas la place à côté du texte, la photo repasse centrée au-dessus */
@media (max-width: 600px) {
    .president-photo {
        float: none;
        display: block;
        margin: 0.5rem auto 1.25rem;
        shape-outside: none;
    }
}