/* =========================================
   CONTACT PAGE
========================================= */


.contact-page {

    min-height:calc(100vh - 80px);

    padding:160px 45px 100px;

    display:flex;

    align-items:center;

}



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


.contact-content {

    width:100%;

    max-width:1200px;

}


.contact-label {

    font-size:12px;

    opacity:.55;

    margin-bottom:55px;

}


.contact-content h1 {

    margin:0;

    font-size:48px;

    font-weight:400;

    letter-spacing:-0.04em;

    line-height:1;

}


/* =========================================
   LINKS
========================================= */


.contact-intro {

    margin-top:55px;

    max-width:520px;

}


.contact-intro p {

    margin:0;

    font-size:15px;

    line-height:1.5;

    font-weight:300;

    opacity:.65;

}


.contact-links {

    margin-top:55px;

    display:grid;

    grid-template-columns:repeat(3, minmax(0, 1fr));

    max-width:900px;

    border-top:1px solid rgba(0,0,0,.15);

}


.contact-links a {

    display:flex;

    align-items:center;

    gap:10px;

    padding:18px 20px 18px 0;

    color:inherit;

    text-decoration:none;

    font-size:15px;

    font-weight:300;

    border-bottom:1px solid rgba(0,0,0,.15);

    transition:opacity .25s ease;

}


.contact-links a + a {

    padding-left:20px;

    border-left:1px solid rgba(0,0,0,.15);

}


.contact-links a span {

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.04em;

    opacity:.45;

}


.contact-links a:hover {

    opacity:.5;

}


/* =========================================
   DETAILS
========================================= */


.contact-details {

    margin-top:100px;

    display:flex;

    gap:40px;

}


.contact-details p {

    margin:0;

    font-size:13px;

    opacity:.55;

}



/* =========================================
   MOBILE
========================================= */


@media(max-width:600px) {


    .contact-page {

        padding:120px 20px 60px;

    }


    .contact-label {

        margin-bottom:40px;

    }


    .contact-content h1 {

        font-size:clamp(38px, 5vw, 68px);

    }


   .contact-links {

    grid-template-columns:1fr;

}


.contact-links a + a {

    padding-left:0;

    border-left:none;

}


    .contact-details {

        margin-top:70px;

        flex-direction:column;

        gap:8px;

    }

}