/*
 * agile.css — Agile team (236:2081/2079/2063/2082). Spec: 03-studio.md §5. Marchio grande a
 * sinistra, titolo 94, testo, CTA ghost; nuvole sotto. Fondo gradiente ciano.
 * Griglia e fascia nuvole sono le stesse dello statement della home (statement.css + .clouds--bottom
 * in base.css §4): stesse colonne, stessi gap, stesso ancoraggio al fondo. I valori sono ripetuti
 * qui e non condivisi in una classe perche' i nomi BEM restano per sezione (.agile__*), ma se
 * cambiano di la' vanno cambiati anche qui.
 */
.agile {
    position: relative;
    overflow: hidden;
}
/* Come .statement--home: la fascia e' fuori dal flusso, la sezione le riserva l'altezza. */
.site-main > .agile {
    padding-bottom: 7.28%;
}
/* Nessun align-items: le due colonne partono in alto come nello statement, e il marchio scende
   con il margin-top della propria immagine (sotto, da 900). */
.agile__grid {
    display: grid;
    gap: var(--space-xl);
}
.agile__brand {
    order: 2;
    width: min(60vw, 320px);
}
.agile__brand-img {
    width: 100%;
    height: auto;
}
.agile__copy {
    order: 1;
    display: grid;
    gap: var(--space-md);
    justify-items: start;
    max-width: none;
    position: relative;
    z-index: 2;
}
.agile__title {
    text-transform: uppercase;
}
.agile__body {
    line-height: var(--line-height-lead-figma);
}
@media (min-width: 900px) {
    .agile__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 593px);
        justify-content: space-between;
        gap: var(--space-3xl);
        align-items: flex-start;
    }
    .agile__brand {
        order: 1;
        width: 472px;
        margin-left: 0;
    }
    .agile__brand-img {
        margin-top: var(--space-2xl);
    }
    .agile__copy {
        order: 2;
    }
}