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


:root{
    --background:#f7f7f5;
    --text:#18213b;
    --gray:#a4a4a4;
}


body{

    background:var(--background);
    color:var(--text);

    font-family:"Inter", sans-serif;

}


.container{

    width:100%;
    min-height:100vh;

    padding:5vh 8vw 4vh;

}


.top{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:70px;

}


.section-title,
.home{

    text-decoration:none;
    color:var(--text);

}


.section-title{

    font-family:"Cormorant Garamond", serif;

    font-size:18px;
    font-weight:500;

}


.home{

    font-size:14px;
    font-weight:300;

    color:var(--gray);

}


.intro{

    max-width:850px;

}


h1{

    font-family:"Cormorant Garamond", serif;

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

    font-weight:500;

    line-height:1;

    margin-bottom:30px;

}


h3{

    font-size:16px;

    font-weight:500;

    margin-bottom:15px;

}


.role{

    color:var(--gray);

    margin-bottom:8px;

}


.text{

    max-width:780px;

    margin-top:45px;

}


h2{

    font-size:13px;

    font-weight:600;

    margin-top:28px;
    margin-bottom:8px;

}


p,
li{

    font-size:15px;

    font-weight:300;

    line-height:1.55;

}


p{

    margin-bottom:15px;

}


ul{

    list-style:none;

    margin:10px 0 15px;

}


li{

    margin-bottom:6px;

}


li::before{

    content:"•";

    margin-right:10px;

}


.line{

    width:100%;

    height:1px;

    background:#18213b;

    opacity:.5;

    margin:55px 0 30px;

}


.comparison{

    display:flex;

    flex-direction:column;

    gap:90px;

    margin-bottom:60px;

    max-width:820px;
}

.comparison div{

    display:flex;

    flex-direction:column;

    gap:15px;

    width:100%;
}

.comparison img{

    width:70%;

    height:auto;

    display:block;
}


.comparison span{

    font-size:13px;

    font-weight:300;

    color:var(--gray);

}


.images img{

    width:100%;

    height:auto;

    display:block;

}


.navigation{

    display:flex;

    gap:8vw;

    margin-top:50px;

}


.navigation a{

    color:var(--gray);

    text-decoration:none;

    font-size:14px;

    font-weight:300;

    transition:.3s;

}


.navigation a:hover{

    color:var(--text);

}


.navigation .active{

    color:var(--text);

}


@media(max-width:768px){

    .container{

        padding:35px 30px;

    }


    .top{

        margin-bottom:50px;

    }


    h1{

        font-size:46px;

    }


    p,
    li{

        font-size:15px;

    }


    .comparison{

        max-width:100%;

    }


    .navigation{

        flex-direction:column;

        gap:18px;

        margin-top:40px;

    }

}