.about {
    --about-space: 4rem;
    --about-space-sm: 4rem;
}

.about-title--sm {
    text-wrap: balance;
}

.about-heading .home-text {
    margin-top: 2rem;
}

.about-card-title {
    margin: 0;
    color: var(--color-dark-blue-100);
    font-size: var(--text-h6);
    font-variation-settings: var(--opsz-medium);
    font-weight: 600;
    line-height: var(--leading-h6);
}

.about-hero {
    margin-top: calc(-1 * var(--site-header-height));
    padding-block: calc(var(--site-header-height) + 3rem) 3rem;
    background: var(--color-blue-50);
}

.about-hero__text {
    display: grid;
    gap: 1.5rem;
    max-width: 64.5625rem;
    margin-inline: auto;
    text-align: center;
}

.about-hero__photo {
    display: block;
    width: 100%;
    max-width: 75rem;
    height: auto;
    aspect-ratio: 3 / 2;
    margin: 2.5rem auto 0;
    border-radius: 1.5rem;
    background: #f4f7fb;
}

.about-problems {
    padding-top: var(--about-space);
}

.about-problems__panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: 3rem;
    padding: 3rem 1.5rem;
    border: 1px solid var(--color-blue-75);
    border-radius: 1.5rem;
    background: linear-gradient(88.84deg, #1e69eb 0.4%, #1978e7 99.54%);
}

/* The grid is centred on the panel and reaches 663px above it, as in the design. */
.about-problems__panel::before {
    content: "";
    position: absolute;
    top: -41.4375rem;
    left: 50%;
    z-index: -1;
    width: 181.885rem;
    height: 61.765rem;
    background: url("../images/about/problems-grid.svg") center / 100% 100% no-repeat;
    translate: -50% 0;
    pointer-events: none;
}

.about-problems .home-title {
    color: var(--color-white);
}

.about-problems .home-text {
    max-width: 64.625rem;
    color: var(--color-blue-50);
}

.about-problems__list {
    display: grid;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-problem {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-blue-50);
    text-align: center;
}

.about-problem img {
    display: block;
    margin-bottom: 2rem;
}

.about-problem__title {
    margin: 0;
    color: var(--color-white);
    font-size: var(--text-h6);
    font-variation-settings: var(--opsz-medium);
    line-height: var(--leading-h6);
}

.about-problem p {
    max-width: 24.8rem;
    margin-top: 1rem;
}

.about-benefits {
    padding-block: var(--about-space) var(--about-space-sm);
}

.about-benefits .home-heading {
    max-width: 66.8125rem;
    margin-inline: auto;
}

.about-benefits__list {
    display: grid;
    gap: 1.5rem;
    margin: 4rem 0 0;
    padding: 0;
    list-style: none;
}

.about-benefit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    padding: 2rem 1.5rem;
    border-radius: 1.5rem;
    background: linear-gradient(180deg, #fcf9ff 0%, #f1f6ff 100%);
}

.about-benefit img {
    display: block;
}

.about-benefit:first-child img {
    opacity: 0.8;
}

.about-benefit__body {
    display: grid;
    gap: 1rem;
}

.about-benefit__body .home-text {
    max-width: 41.625rem;
}

.about-differences {
    padding-block: var(--about-space-sm) var(--about-space);
    background: linear-gradient(169.08deg, #ffffff 33.471%, #cfe3ff 89.969%, #87bfff 108.89%);
}

.about-differences .home-heading {
    max-width: 48.625rem;
    margin-inline: auto;
}

.about-differences__list {
    display: grid;
    gap: 1.5rem;
    margin: 4rem 0 0;
    padding: 0;
    list-style: none;
}

.about-difference {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem;
    border-radius: 1.5rem;
    background: var(--color-white);
    text-align: center;
}

.about-difference__icon {
    display: grid;
    place-items: center;
    width: 4.25rem;
    height: 4.25rem;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
    background: var(--color-blue-50);
}

.about-difference > p {
    margin-top: 1rem;
}

.about-vision {
    display: grid;
    gap: 2.5rem;
    align-items: start;
    padding-block: var(--about-space-sm) var(--about-space);
}

.about-vision__text {
    display: grid;
    justify-items: start;
    gap: 2rem;
}

.about-vision__body {
    display: grid;
    gap: 0.5rem;
}

.about-vision__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 1.5rem;
    background: #f4f7fb;
}

@media (min-width: 48rem) {
    .about {
        --about-space: 6rem;
        --about-space-sm: 5.5rem;
    }

    .about-title--sm {
        font-size: var(--text-h3);
        line-height: var(--leading-h3);
    }

    .about-card-title {
        font-size: var(--text-h5);
        line-height: var(--leading-h5);
    }

    .about-hero {
        padding-top: calc(var(--site-header-height) + 5rem);
        padding-bottom: 5rem;
    }

    .about-hero__photo {
        margin-top: 4rem;
    }

    .about-problems__panel {
        padding: 4rem 3rem;
        border-radius: 2.5rem;
    }

    .about-problems__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
    }

    .about-benefit {
        padding: 3rem 2.5rem;
    }

    .about-differences__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-difference {
        padding: 3rem;
    }
}

@media (min-width: 64rem) {
    .about-benefits__list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .about-benefit:is(:nth-child(1), :nth-child(4)) {
        grid-column: span 3;
    }

    .about-benefit:is(:nth-child(2), :nth-child(3)) {
        grid-column: span 2;
    }
}

@media (min-width: 77.5rem) {
    .about {
        --about-space: 10rem;
        --about-space-sm: 8.75rem;
    }

    .about-title--sm {
        font-size: var(--text-h2);
        line-height: var(--leading-h2);
    }

    .about-hero {
        padding-bottom: 8.3125rem;
    }

    .about-problems__panel {
        gap: 3.75rem;
        padding: 6.25rem;
    }

    .about-problems__list {
        gap: 4rem;
    }

    .about-benefit {
        gap: 5rem;
    }

    .about-vision {
        grid-template-columns: minmax(0, 628fr) minmax(0, 812fr);
        column-gap: 5rem;
    }
}