.title {
    display: flex;
    flex-direction: column;
    gap: 12px; /* --spacing-2xs */
    width: 100%; /* was max-width: 800px — this module's box now always fills its container's width;
                    alignment below is now purely about the title/subtitle text within that full-width
                    box, not about positioning a narrower column inside a wider row. */
}

/* Alignment modifiers (see module.html's `alignment` field). `--center` is this module's original, and
   only, alignment before that field existed — align-items/text-align orient the title/subtitle text
   itself within the now-full-width box above. */
.title--center {
    align-items: center;
    text-align: center;
}

.title--left {
    align-items: flex-start;
    text-align: left;
}

.title--right {
    align-items: flex-end;
    text-align: right;
}

.title__heading {
    margin: 0;
    font-weight: 400; /* shared by every size below: --display-*/--heading-*-font-weight */
}

/* Design system's .display--s/m/l scale (s/m/l) plus, for a title smaller than .display--s can go, its
   .heading--l/xl scale (xxs/xs) — reproduced as resolved-value modifier classes, no LESS build here to
   reference the classes themselves (same reasoning as hero-banner.module's .hero-banner__title). `l` is
   the default (see module.html's `titleSize`); `.title__heading--s` is what this module always rendered
   before `titleSize` existed — kept as the `s` name rather than renumbering, so it stays obvious which
   variant a page using the old default is still on. */
.title__heading--xxs {
    font-size: 24px; /* --heading-mobile-l-font-size */
    line-height: 1.22; /* --heading-mobile-l-line-height */
    letter-spacing: -0.5px; /* --heading-mobile-l-letter-spacing */
}

.title__heading--xs {
    font-size: 28px; /* --heading-mobile-xl-font-size */
    line-height: 1.22; /* --heading-mobile-xl-line-height */
    letter-spacing: -0.6px; /* --heading-mobile-xl-letter-spacing */
}

.title__heading--s {
    font-size: 32px; /* --display-mobile-s-font-size */
    line-height: 1.02; /* --display-mobile-s-line-height */
    letter-spacing: -0.6px; /* --display-mobile-s-letter-spacing */
}

.title__heading--m {
    font-size: 42px; /* --display-mobile-m-font-size */
    line-height: 0.97; /* --display-mobile-m-line-height */
    letter-spacing: -1.3px; /* --display-mobile-m-letter-spacing */
}

.title__heading--l {
    font-size: 52px; /* --display-mobile-l-font-size */
    line-height: 0.97; /* --display-mobile-l-line-height */
    letter-spacing: -1.6px; /* --display-mobile-l-letter-spacing */
}

@media (min-width: 992px) {
    .title__heading--xxs {
        font-size: 32px; /* --heading-desktop-l-font-size */
        line-height: 1.24; /* --heading-desktop-l-line-height */
        letter-spacing: -0.6px; /* --heading-desktop-l-letter-spacing */
    }

    .title__heading--xs {
        font-size: 40px; /* --heading-desktop-xl-font-size */
        line-height: 1.24; /* --heading-desktop-xl-line-height */
        letter-spacing: -0.8px; /* --heading-desktop-xl-letter-spacing */
    }

    .title__heading--s {
        font-size: 52px; /* --display-desktop-s-font-size */
        line-height: 1; /* --display-desktop-s-line-height */
        letter-spacing: -1.6px; /* --display-desktop-s-letter-spacing */
    }

    .title__heading--m {
        font-size: 66px; /* --display-desktop-m-font-size */
        line-height: 1; /* --display-desktop-m-line-height */
        letter-spacing: -2px; /* --display-desktop-m-letter-spacing */
    }

    .title__heading--l {
        font-size: 87px; /* --display-desktop-l-font-size */
        line-height: 1; /* --display-desktop-l-line-height */
        letter-spacing: -3.5px; /* --display-desktop-l-letter-spacing */
    }
}

.title__subtitle {
    /* Design system's .body--l (regular weight), colored like --text-secondary — both reproduced as
       resolved values, same reasoning as above. */
    margin: 0;
    font-size: 16px; /* --body-l-regular-font-size */
    line-height: 1.22; /* --body-l-regular-line-height */
    font-weight: 400; /* --body-l-regular-font-weight */
    letter-spacing: -0.1px; /* --body-l-regular-letter-spacing */
    color: rgba(140, 140, 140, 1); /* --text-secondary */
}