#hero{padding:1rem 1rem 0.75rem;text-align:center}
#hero h1{color:var(--color-text-main);font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-0.02em;line-height:1.3}
#hero h1::after{background-color:var(--color-primary);border-radius:var(--radius-full);content:"";display:block;height:0.25rem;margin:0.625rem auto 0;width:3rem}
#hero p{color:var(--color-text-muted);font-size:0.875rem;line-height:1.5;margin-top:0.625rem}
@media (min-width: 768px){
#hero{padding:1.5rem 0 1rem;text-align:left}
#hero h1{font-size:2rem;line-height:1.2}
#hero h1::after{margin:0.625rem 0 0}
#hero p{font-size:1rem}
}
@media (min-width: 1024px){
#hero h1{font-size:2.5rem}
#hero p{font-size:1.0625rem}
}
@media (min-width: 1280px){
#hero h1{font-size:2.75rem}
}