@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root{
    --blue-night:#17263B;
    --blue:#243B5A;
    --gold:#D7B77A;
    --ivory:#F7F3EA;
    --text:#455367;
}

/* RESET */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Inter",sans-serif;
    background:var(--ivory);
    color:var(--text);
    line-height:1.9;
}

img{
    display:block;
    width:100%;
}

.container{
    width:min(1062px,92%);
    margin:auto;
}

/* PAGE */

#choeur-page{
    padding:126px 0 45px;
}

/* HEADER */

.page-header{
    text-align:center;
    margin-bottom:81px;
}

.page-header h1{
    margin:19.8px 0;

    font-family:"Cormorant Garamond",serif;
    font-size:clamp(2.52rem,5vw,4.05rem);
    font-weight:600;
    color:var(--blue-night);
    line-height:1.1;
}

.title-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16.2px;
}

.title-divider span:first-child,
.title-divider span:last-child{
    width:90px;
    height:0.9px;
    background:rgba(215,183,122,.55);
}

.ornament{
    color:var(--gold);
    font-size:0.81rem;
    letter-spacing:0;
    opacity:.9;
}

/* PRESENTATION */

.presentation-layout{

    display:grid;

    grid-template-columns:432px 1fr;

    gap:81px;

    align-items:center;
}

/* IMAGE */

.presentation-image{

    position:relative;
}

.presentation-image::before{

    content:"";

    position:absolute;

    top:16.2px;
    left:16.2px;

    width:100%;
    height:100%;

    border:0.9px solid rgba(215,183,122,.5);

    border-radius:16.2px;

    z-index:0;
}

.presentation-image img{

    position:relative;

    z-index:1;

    height:558px;

    object-fit:cover;

    border-radius:16.2px;

    box-shadow:
    0 22.5px 49.5px rgba(0,0,0,.14);

    transition:.45s;
}

/* CONTENT */

.section-title{

    margin-bottom:40.5px;
}

.separator{

    display:block;

    width:54px;
    height:1.8px;

    margin-bottom:19.8px;

    background:var(--gold);
}

.section-title h2{

    font-family:"Cormorant Garamond",serif;

    font-size:2.52rem;

    font-weight:600;

    color:var(--blue-night);

    line-height:1.1;
}

/* TEXT */

.presentation-text{

    position:relative;
}

.presentation-text::before{

    content:"";

    position:absolute;

    left:-31.5px;

    top:4.5px;

    width:1.8px;

    height:100%;

    background:linear-gradient(
        to bottom,
        var(--gold),
        transparent
    );
}

.presentation-text p{

    margin-bottom:25.2px;

    font-size:0.945rem;

    color:var(--text);
}

.presentation-text p:last-child{

    margin-bottom:0;
}

/* ANIMATION */

.page-header,
.presentation-layout{

    animation:fadeUp .8s ease both;
}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(31.5px);
    }

    to{

        opacity:1;

        transform:none;
    }

}

/* RESPONSIVE */

@media(max-width:900px){

    #choeur-page{

        padding:108px 0 81px;
    }

    .presentation-layout{

        grid-template-columns:1fr;

        gap:54px;
    }

    .presentation-image{

        max-width:585px;

        margin:auto;
    }

    .presentation-image img{

        height:432px;
    }

    .presentation-text::before{

        display:none;
    }

}

@media(max-width:630px){

    .page-header{

        margin-bottom:54px;
    }

    .page-header h1{

        font-size:2.25rem;
    }

    .section-title h2{

        font-size:1.89rem;
    }

    .presentation-image img{

        height:324px;
    }

}

@media(max-width:405px){

    #choeur-page{

        padding:99px 0 63px;
    }

    .page-overline{

        font-size:0.63rem;

        letter-spacing:0.225em;
    }

    .page-header h1{

        font-size:1.8rem;
    }

    .presentation-image img{

        height:270px;
    }

    .presentation-image::before{

        top:10.8px;
        left:10.8px;
    }

}