.about-page {
    width: 100%;
}

.fullwidth-wrapper--about-page-hero {
    --about-page-hero-bg-image: none;
    --about-page-hero-bg-color: var(--internal-banner-bg);
    --about-page-hero-bg-position: center top;
    --about-page-hero-bg-size: cover;
    --about-page-hero-spacing-top: clamp(56px, 4.875vw, 78px);
    --about-page-hero-spacing-bottom: clamp(72px, 5.25vw, 101px);
    --about-page-hero-content-max-width: 1192px;
    --about-page-hero-content-gap: 16px;
    --about-page-hero-actions-gap: 16px;
    --about-page-hero-title-size: var(--font-size-internal-h1);
    --about-page-hero-title-line-height: 1.22;
    --about-page-hero-title-gradient: linear-gradient(180deg, #1280E1 43.41%, #0A467B 78.26%);
    --about-page-hero-desc-size: clamp(18px, 1.5vw, 24px);
    --about-page-hero-desc-line-height: 1.34;
    --about-page-hero-desc-color: #4D4D5B;
    --about-page-hero-desc-max-width: 888px;
    --about-page-hero-region-gap: 7px;
    --about-page-hero-region-padding-y: 8px;
    --about-page-hero-region-padding-x: 24px;
    --about-page-hero-region-bg: #FFFFFFBF;
    --about-page-hero-region-border: #B8D9F6;
    --about-page-hero-region-color: #4199E7;
    --about-page-hero-region-radius: 300px;
    --about-page-hero-region-font-size: 16px;
    width: 100%;
    background-color: var(--about-page-hero-bg-color);
    background-image: var(--about-page-hero-bg-image);
    background-position: var(--about-page-hero-bg-position);
    background-size: var(--about-page-hero-bg-size);
    background-repeat: no-repeat;
}

.about-page-hero {
    width: 100%;
    max-width: 1316px;
    margin: 0 auto;
    padding: var(--about-page-hero-spacing-top) 0 var(--about-page-hero-spacing-bottom);
}

.about-page-hero__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: var(--about-page-hero-content-max-width);
}

.about-page-hero__region {
    display: inline-flex;
    align-items: center;
    gap: var(--about-page-hero-region-gap);
    max-width: 100%;
    margin-bottom: 16px;
    padding: var(--about-page-hero-region-padding-y) var(--about-page-hero-region-padding-x);
    color: var(--about-page-hero-region-color);
    background-color: var(--about-page-hero-region-bg);
    border: 1px solid var(--about-page-hero-region-border);
    border-radius: var(--about-page-hero-region-radius);
    font-size: var(--about-page-hero-region-font-size);
    font-weight: 400;
    line-height: 1.48;
}

.about-page-hero__region svg {
    flex: 0 0 11px;
}

.about-page-hero__region span {
    white-space: nowrap;
}

.about-page-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--about-page-hero-content-gap);
    width: 100%;
    margin-bottom: clamp(40px, 3.75vw, 60px);
}

.about-page-hero__title {
    max-width: var(--about-page-hero-content-max-width);
    font-family: var(--font-family-heading);
    font-size: var(--about-page-hero-title-size);
    font-weight: 600;
    line-height: var(--about-page-hero-title-line-height);
    text-transform: uppercase;
    background: var(--about-page-hero-title-gradient);
    background-clip: text;
    color: transparent;
}

.about-page-hero__description {
    max-width: var(--about-page-hero-desc-max-width);
    color: var(--about-page-hero-desc-color);
    font-size: var(--about-page-hero-desc-size);
    line-height: var(--about-page-hero-desc-line-height);
}

.about-page-hero__description > * + * {
    margin-top: 12px;
}

.about-page-hero__description > *:last-child {
    margin-bottom: 0;
}

.about-page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--about-page-hero-actions-gap);
}

.about-page-hero__button {
    min-width: 275px;
}

.about-page-hero__benefits .preim__list {
    padding-top: clamp(56px, 5.21vw, 100px);
}

@media (max-width: 991px) {
    .about-page-hero__button {
        min-width: 240px;
    }
}

@media (max-width: 767px) {
    .fullwidth-wrapper--about-page-hero {
        --about-page-hero-spacing-top: clamp(48px, 14vw, 72px);
        --about-page-hero-spacing-bottom: clamp(56px, 14vw, 72px);
        --about-page-hero-actions-gap: 12px;
    }

    .about-page-hero__actions,
    .about-page-hero__button {
        width: 100%;
    }

    .about-page-hero__region {
        padding-right: 18px;
        padding-left: 18px;
    }
}