.hero{
align-items:center;
gap:var(--spacing-xl);
}
.hero-media img{
border-radius:var(--color-radius);
box-shadow:var(--shadow-md);
width:100%;
height:auto;
}
.hero-text{
display:flex;
flex-direction:column;
justify-content:center;
}
.card img{
border-radius:var(--color-radius);
box-shadow:var(--shadow-sm);
}
.section .card{
background:var(--color-surface);
}
.grid.card{
align-items:center;
}
@media (max-width:768px){
.hero{
grid-template-columns:1fr;
}
.hero-text{
text-align:center;
}
}