/*
 * About statement - Figma 1:3706 (desktop) / 1:1824 (mobile).
 *
 * A 1376 container inset 32 from a 1440: a 442 statement on the left and a
 * 559 x 626 photograph on the right, with a 555 x 545 White 100 rectangle behind
 * the photograph, offset 42 to its left and 122 down.
 *
 * The rectangle is drawn with a pseudo-element rather than an element of its
 * own - it carries no content and nothing should meet it in the reading order.
 */

.about-statement {
    padding: var(--spacing-large) var(--spacing-small);
}

.about-statement-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-med);
    /* 1376 in the frame. */
    max-width: 1376px;
    margin-inline: auto;
}

.about-statement-text {
    font-family: var(--font-primary);
    /* 48 in the frame, 28 at 375. */
    font-size: clamp(28px, 3.334vw, 48px);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-black);
    /* 442 of the 1376 container. */
    flex: 0 1 442px;
    margin: 0;
}

/*
 * The sentence turns grey partway through. The run is marked in the field, so
 * where it turns is the copy's decision and a translation can put it elsewhere.
 */
.about-statement-text span {
    color: var(--Medium-Grey);
}

.about-statement-photo {
    position: relative;
    /* 559 x 626. */
    flex: 0 0 559px;
    max-width: 50%;
    aspect-ratio: 559 / 626;
}

/* The White 100 block behind the photograph: 555 x 545, offset -42 and +122. */
.about-statement-photo::before {
    content: "";
    position: absolute;
    left: -42px;
    top: 122px;
    width: 555px;
    height: 545px;
    max-width: 100%;
    background: var(--color-white-100);
    z-index: 0;
}

.about-statement-image {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Medium devices (tablets, less than 992px) - the frame's stacked form. */
@media (max-width: 991.98px) {
    .about-statement-container {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-small);
    }

    .about-statement-text {
        flex: 0 0 auto;
    }

    .about-statement-photo {
        flex: 0 0 auto;
        max-width: none;
        /* 343 x 384 at 375 - a different ratio from the desktop box. */
        aspect-ratio: 343 / 384;
    }

    /*
     * The offset rectangle is a desktop idea; the mobile frame draws the
     * photograph on its own.
     */
    .about-statement-photo::before {
        content: none;
    }
}