.hero{align-items:center}
.hero-text{display:flex;flex-direction:column;justify-content:center}
.hero-media img{border-radius:var(--color-radius);box-shadow:var(--shadow-md)}
.media img{border-radius:var(--color-radius);box-shadow:var(--shadow-sm)}
h1,h2{color:var(--color-primary)}
.section:nth-child(even){background:var(--color-surface)}
.flex a{flex:1 1 auto}
@media (max-width:768px){
.hero{padding:var(--spacing-xl)}
.hero-text,.hero-media{width:100%}
}