@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;
    --gold:#D7B77A;
    --ivory:#F7F3EA;
    --text:#556173;

}

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

body{

    font-family:"Inter",sans-serif;
    background:var(--ivory);
    color:var(--text);

}

img{

    display:block;
    width:100%;

}

a{

    text-decoration:none;

}

/* PAGE */

#masterclasse-page{

    padding:126px 0 45px;

}

.container{

    width:min(1062px,92%);
    margin:auto;

}

/* HEADER */

.page-header{

    text-align:center;
    margin-bottom:81px;

}

.page-header h1{

    margin:21.6px 0;

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(2.7rem,5vw,4.05rem);

    color:var(--blue-night);

    font-weight:600;

}

.subtitle{

    margin-top:9px;

    font-size:0.972rem;

    color:var(--text);

}

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

.title-divider2 {
    padding-top: 21.6px;
}

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

.ornament{

    color:var(--gold);

}

/* SECTION */

.speakers-section{

    margin-top:36px;

}

.section-title{

    text-align:center;

    margin-bottom:63px;

}

.separator{

    width:54px;

    height:1.8px;

    background:var(--gold);

    margin:0 auto 19.8px;

}

.section-title h2{

    font-family:"Cormorant Garamond",serif;

    font-size:2.43rem;

    color:var(--blue-night);

}

/* GRILLE */

.speakers{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(297px,1fr));

    gap:37.8px;

}

/* CARTE */

.speaker-card{

    display:block;

    background:transparent;

    border:none;

    border-radius:0;

    overflow:visible;

    text-decoration:none;

    color:inherit;

    transition:.4s ease;

}

.speaker-card:hover{

    transform:translateY(-7.2px);

}

/* IMAGE */

.speaker-image{

    position:relative;

    padding:12.6px;

}

.speaker-image::before{

    content:"";

    position:absolute;

    top:25.2px;

    left:25.2px;

    width:calc(100% - 25.2px);

    height:calc(100% - 25.2px);

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

    border-radius:16.2px;

    z-index:0;

}

.speaker-image img{

    position:relative;

    z-index:1;

    height:378px;

    object-fit:cover;

    border-radius:16.2px;

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

    transition:.45s;

}

.speaker-card:hover img{

    transform:scale(1.04);

}

/* CONTENU */

.speaker-content{

    padding:31.5px 18px 18px;

    text-align:center;

}

.speaker-content::before{

    content:"";

    display:block;

    width:49.5px;

    height:1.8px;

    background:var(--gold);

    margin:0 auto 19.8px;

}

.speaker-content h3{

    font-family:"Cormorant Garamond",serif;

    font-size:1.98rem;

    font-weight:600;

    color:var(--blue-night);

    margin-bottom:10.8px;

}

.speaker-content p{

    color:var(--text);

    line-height:1.75;

    margin-bottom:19.8px;

}

.speaker-content span{

    color:var(--gold);

    font-weight:600;

    letter-spacing:0.054em;

    text-transform:uppercase;

    font-size:0.738rem;

}

.speaker-content span::after{

    content:" →";

}

/* ANIMATION */

.page-header,
.speaker-card,
.speaker-card:visited,
.speaker-card:hover,
.speaker-card:active{

    color:inherit;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(27px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* RESPONSIVE */

@media(max-width:810px){

    .speakers{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:630px){

    .page-header{

        margin-bottom:63px;

    }

    .page-header h1{

        font-size:2.25rem;

    }

    .section-title h2{

        font-size:1.98rem;

    }

    .speakers{

        grid-template-columns:1fr;

    }

    .speaker-image img{

        height:324px;

    }

}

@media(max-width:405px){

    #masterclass-page{

        padding:90px 0 63px;

    }

    .speaker-image img{

        height:270px;

    }

}