/* 1200px: desktops (minor refinements when large but below ultra-wide) */
@media (max-width: 1200px) {
    .hero-title { line-height: 1.08; }
}

/* 992px: tablets landscape */
@media (max-width: 992px) {
    .hero-section-component { padding-top: clamp(120px, 22vw, 180px); }
}

/* 768px: tablets portrait */
@media (max-width: 768px) {
    .hero-title { line-height: 1.1; }

    .hero-section-component .hero-title {
        margin-bottom: 20px;
    }

    .hero-section-component {
        position: relative;
        color: var(--white);
        padding: 100px 0 16px ;
    }

    .hero-section-component .subtitle-content .text {
        display: none;
    }
}

/* 576px: phones */
@media (max-width: 576px) {
    .hero-title {
        font-size: clamp(28px, 8vw, 40px);
        line-height: 1.1;
    }

    
}

/* 400px: very small phones */
@media (max-width: 400px) {
    .hero-section-component { padding-top: 110px; }
    .hero-title { font-size: 30px; }
}