.hero{
    position:relative;
    width:100%;
    height:500px;
    background-size:cover;
    background-position:center;
}

.hero-content{
    max-width:700px;
}

.hero-overlay{
    position:absolute;
    inset:0;

    display:flex;
    align-items:flex-end;

    background:linear-gradient(
        to top,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.3),
        rgba(0,0,0,0)
    );
}

.hero-text{
    color:white;
    padding:40px;
    max-width:600px;
}

.hero-text h1{
    font-size:40px;
    margin-bottom:10px;
}

.hero-text p{
    font-size:18px;
}

@media (max-width:768px){

.hero{
    height:350px;
}

.hero-text{
    padding:25px;
}

.hero-text h1{
    /* font-size:28px; */
    font-size:clamp(32px,5vw,56px);
    line-height:1.2;
}

.hero-text p{
    /* font-size:16px; */
    font-size:clamp(16px,2vw,20px);
}

}