body{
    font-family: 'Inter';
    font-weight: 500;
}
.hero{
    padding-top: 10vh;
    overflow-y: hidden;
}
.hero h1{
    margin: 12vh auto 4vh;
    font-size: max(20px, 6.8vw);
    width: 90%;
    color: #FFFFFF;
}
.hero h2{
    margin: 0 auto;
    font-size: max(12px, 2vw);
    font-weight: 300;
    width: 90%;
    color: #FFFFFF;
}
.hero img{
    width: 50vw;
    margin-top: -15%;
    margin-left: auto;
    transform: translateY(35%);
}
.mention{
    padding: 3% 5%;
    min-height: 25vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mention--light{
    background-color: #FFFFFF;
}
.mention--dark{
    background-color: var(--main-color);
    color: #FFFFFF;
}
.mention h3{
    font-size: max(16px, 2vw);
    margin-bottom: 2%;
}
.mention h4{
    font-size: max(14px, 1.6vw);
    margin-bottom: 1%;
    margin-top: 2%;
}
.mention h4:nth-of-type(1){margin-top: 0;}
.mention p{
    font-size: max(12px, 1.3vw);
    text-align: justify;
}
.mention ul{
    font-size: max(12px, 1.3vw);
    text-align: justify;
    padding-left: 4%;
    margin: 1% 0;
}