/*
 * Our Story - Figma 1:3713 (desktop) / 1:1830 (mobile).
 *
 * Desktop is two 326 x 626 portraits beside a 442 text column, gap 137. The
 * frame's 282 between the two paragraphs is leftover space rather than a
 * measure, so it is space-between and holds at any length.
 *
 * The markup is in the mobile order - text, then photographs - and desktop uses
 * row-reverse to move the photographs to the left. One DOM order, and it is the
 * order the prose should be read in.
 */

.our-story {
    padding: var(--spacing-large) var(--spacing-small);
}

.our-story-container {
    display: flex;
    /* Markup is text-then-photos; the frame draws photos-then-text. */
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 137px;
}

.our-story-text {
    display: flex;
    flex-direction: column;
    /*
     * The frame's 282 gap between the paragraphs is what is left over once the
     * photo column sets the height, not a measured value.
     */
    justify-content: space-between;
    gap: 56px;
    flex: 0 1 442px;
    align-self: stretch;
}

.our-story-intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.our-story-paragraph {
    font-family: var(--font-secondary);
    font-size: 20px;
    font-weight: 300;
    line-height: 1.3;
    color: var(--color-shark);
    margin: 0;
}

.our-story-photos {
    display: flex;
    gap: 24px;
    flex: 0 1 676px;
}

.our-story-photo {
    /* 326 x 626 at desktop and 165 x 318 at mobile - the same ratio. */
    aspect-ratio: 326 / 626;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

.our-story-image {
    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) {
    .our-story-container {
        /* Stacked, and back to the DOM order: text, then photographs. */
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .our-story-text {
        flex: 0 0 auto;
        align-self: auto;
        /* 8 between the paragraphs once nothing else sets the height. */
        gap: 8px;
    }

    .our-story-photos {
        flex: 0 0 auto;
        /* 12 in the mobile frame, against 24 at desktop. */
        gap: 12px;
    }
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 576px) {
    .our-story {
        padding: 72px 16px;
    }
}