.hero
{
    height: 70vh;
    place-content: center;
    place-items: center;
}
.hero h1
{
    font-size: 4rem;
}
.hero p
{
    width: 40%;
    color: var(--sec-text);
    font-family: hel-reg;
    text-align: center;
    font-size: 1rem;
}
.featured
{
    padding: 0 50px 100px;
}
.featured .work-grid
{
    padding: 0;
}

@media (max-width: 1050px) 
{
    .hero
    {
        height: 50vh;
    }
    .hero h1
    {
        font-size: 5rem;
    }
    .hero p
    {
        width: 80%;
    }
}
@media (max-width: 500px)
{
    .hero
    {
        height: 50vh;
        padding: 0 20px;
    }
    .hero h1
    {
        font-size: 3rem;
    }
    .hero p
    {
        width: 100%;
        font-size: 0.7rem;
    }
    .featured
    {
        padding: 0 20px 50px;
    }
}