/* ============================================
   6- HERO
============================================ */
.hero {
    width: 100%;
}

.hero-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* ============================================
  MEDIA QUERIES - DESKTOP
============================================ */
@media (min-width: 48rem) {
    /* Hero maggiore su desktop */
    .hero-image {
        max-height: 500px;
        object-fit: cover;
    }
    
    /* Content più grande su desktop */
    .content {
    padding: var(--spacing-2xl) var(--spacing-sm);
    }
    
    .content h1 {
        font-size: var(--font-size-3xl);
    }
    
    .content p {
        font-size: var(--font-size-lg);
    }
    
}