.page-intro {
    padding-top: 3.6em;
    padding-bottom: 20px;
}

.page-intro .wrap.wide {
    max-width: calc(1680px + 10em);
    padding: 0 5em;
}

.page-intro .wrap {
    max-width: calc(1440px + 10em);
    padding: 0 5em;
}

.page-intro .box-title {
    font-size: 2.8em;
}

.page-intro .intro {
    margin-top: 0.6em;
    font-size: 1.4em;
    color: var(--text-green);
}

@media all and (max-width: 1400px) {
    .page-intro .box-title {
        font-size: 2.4em;
    }
    .page-intro .intro {
        font-size: 1.3em;
    }
}

@media all and (max-width: 1200px) {
    .page-intro {
        padding-top: 2.8em;
    }
}

@media all and (max-width: 1000px) {
    .page-intro {
        padding-top: 2em;
    }
    .page-intro .wrap.wide {
        max-width: calc(1680px + 2.5em);
        padding: 0 25px;
    }
    .page-intro .wrap {
        max-width: calc(1440px + 5em);
        padding: 0 25px;
    }
    .page-intro .box-title {
        font-size: 2.1em;
    }
    .page-intro .intro {
        font-size: 1.2em;
    }
}

@media all and (max-width: 700px) {
    .page-intro .box-title {
        font-size: 1.9em;
    }
    .page-intro .intro {
        font-size: 1.1em;
    }
}

@media all and (max-width: 500px) {
    .page-intro .box-title {
        font-size: 1.5em;
    }
    .page-intro .intro {
        font-size: 1em;
    }
}

@media all and (max-width: 400px) {
    .page-intro .box-title {
        font-size: 1.4em;
    }
    .page-intro .intro {
        font-size: 0.95em;
    }
}