.hero
{
    padding: 50px;
    height: 60vh;
    display: flex;
    align-items: center;
    background-attachment: fixed;
}
.hero h1
{
    margin: 0;
    font-family: hel-reg;
    color: var(--secondary);
    font-size: 2.3rem;
    width: 60%;
}
.hero .logo
{
    display: inline-block;
}
.hero .logo span:first-child
{
    font-size: 2.3rem;
}
.hero .logo span:last-child
{
    font-size: 2.5rem;
}

.mockups
{
    display: flex;
    min-height: 70vh;
    width: 100%;
    background: url(../media/card1.png) no-repeat fixed;
    background-size: cover;
}
.content-wrap
{
    display: flex; 
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    padding: 100px;
}
.content-wrap .content p
{
    font-family: hel-reg;
    color: var(--secondary);
    font-size: 2.5rem;
    width: 100%;
    text-align: center;
    line-height: 1.1;
}
.about-wrap
{
    padding: 0 40px 40px;
}
.about-wrap h2
{
    font-family: hel-bold;
    color: var(--secondary);
    margin: 0;
    font-size: 2.5rem;
    line-height: 1.3;
}
.about-wrap p
{
    font-family: hel-reg;
    color: var(--secondary);
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.1;
}
.about 
{
    padding: 50px 0;
}
@media screen and (max-width: 1100px)
{
    .hero h1
    {
        width: 90%;
    }  
    .mockups
    {
        height: 60vh;
    }  
    .content-wrap
    {
        height: 80vh;
    }
}
@media screen and (max-width: 900px)
{
    .hero h1
    {
        width: 100%;
    } 
    .content-wrap
    {
        padding: 30px;
    }
}