@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);
    line-height:1.8;

}

img{

    display:block;
    width:100%;

}

a{

    text-decoration:none;

}

.container{

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

}

/* PAGE */

#orgues-page{

    padding:126px 0 72px;

}

/* 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);

}

.title-divider{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:16.2px;

}

.title-divider span{

    width:90px;

    height:0.9px;

    background:rgba(215,183,122,.55);

}

.ornament{

    color:var(--gold);

}

/* GRID */

.orgues-grid{

    display:grid;

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

    gap:81px 54px;

}

/* CARD */

.orgue-card{

    text-align:center;

}

/* IMAGE */

.orgue-image{

    position:relative;

    padding:12.6px;

}

.orgue-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,.55);

    border-radius:16.2px;

}

.orgue-image img{

    position:relative;

    z-index:1;

    height:324px;

    object-fit:cover;

    border-radius:16.2px;

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

    transition:.45s;

}

/* CONTENT */

.orgue-content{

    padding:31.5px 18px 0;

}

.orgue-content::before{

    content:"";

    display:block;

    width:49.5px;

    height:1.8px;

    background:var(--gold);

    margin:0 auto 19.8px;

}

.orgue-content h2{

    font-family:"Cormorant Garamond",serif;

    font-size:1.98rem;

    font-weight:600;

    color:var(--blue-night);

    margin-bottom:13.5px;

}

.orgue-content p{

    margin-bottom:22.5px;

}

/* LINK */

.orgue-content a{

    color:var(--blue-night);

    font-weight:600;

    display:inline-flex;

    gap:9px;

    align-items:center;

}

.orgue-content a::after{

    content:"→";

    color:var(--gold);

    transition:.3s;

}

.orgue-content a:hover{

    color:var(--gold);

}

.orgue-content a:hover::after{

    transform:translateX(5.4px);

}

/* ANIMATION */

.orgue-card{

    animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(27px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* RESPONSIVE */

@media(max-width:810px){

    .orgues-grid{

        grid-template-columns:1fr;

        gap:63px;

    }

}

@media(max-width:540px){

    #orgues-page{

        padding:99px 0 54px;

    }

    .page-header h1{

        font-size:2.25rem;

    }

    .orgue-image img{

        height:270px;

    }

    .orgue-content h2{

        font-size:1.71rem;

    }

}