/* ============================================================
   SCALA FLUIDA (controlla tutto)
============================================================ */
:root {
    --scale-home: 1;
}

/* ============================================================
   IMMAGINE INTRO
============================================================ */
.img-30 {
    display: block;
    margin: 0 auto;
    /* Mantiene le dimensioni originali del file */
    width: auto;
    height: auto;
    max-width: none;
}
/* ============================================================
   TESTO INTRO
============================================================ */
.home-intro h2 {
    font-size: calc(1.6rem * var(--scale-home));
}

.home-intro p {
    font-size: calc(1rem * var(--scale-home));
    line-height: 1.5;
}

/* ============================================================
   BREAKPOINT DI LARGHEZZA (SCALING)
============================================================ */

/* ≥1200px → 100% */
@media (min-width: 1200px) {
    :root {
        --scale-home: 1;
    }
}

/* 992–1199px → 95% */
@media (min-width: 992px) and (max-width: 1199px) {
    :root {
        --scale-home: 0.95;
    }
}

/* 768–991px → 90% */
@media (min-width: 768px) and (max-width: 991px) {
    :root {
        --scale-home: 0.90;
    }
}

/* 576–767px → 85% */
@media (min-width: 576px) and (max-width: 767px) {
    :root {
        --scale-home: 0.85;
    }
}

/* ≤575px → 80% */
@media (max-width: 575px) {
    :root {
        --scale-home: 0.80;
    }
}

/* ============================================================
   BREAKPOINT DI ALTEZZA (PREMIUM)
============================================================ */

/* Altezza media → 90% */
@media (max-height: 850px) {
    :root {
        --scale-home: 0.90;
    }
}

/* Altezza bassa → 85% */
@media (max-height: 750px) {
    :root {
        --scale-home: 0.85;
    }
}

/* Altezza molto bassa → 80% */
@media (max-height: 650px) {
    :root {
        --scale-home: 0.80;
    }
}



/* 992px → 1199px */
@media (min-width: 992px) and (max-width: 1199px) {
    .img-30 {
        width: 30%;
        height: auto;
    }
}

/* 768px → 991px */
@media (min-width: 768px) and (max-width: 991px) {
    .img-30 {
        width: 45%;
    }
}

/* 576px → 767px */
@media (min-width: 576px) and (max-width: 767px) {
    .img-30 {
        width: 55%;
    }
}

/* ≤575px */
@media (max-width: 575px) {
    .img-30 {
        width: 70%;
    }
}