body {
    margin: 0;
}

.content-who-we-are {
    width: calc(100vw - 196px);
    max-width: 2100px;
}

.block-with-image {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 130px;
    width: 100%;
    text-align: left;
}

.content-who-we-are .block-with-image:nth-child(even) {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
}

.block-with-image.last {
    margin-bottom: 0
}

.header1 {
    color: #c4c4c4;
    font-family: "Ony One";
    font-size: 74px;
    font-weight: 500;
    margin-bottom: 32px;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

.content-who-we-are .block-with-image:nth-child(even) .header1 {
    margin-bottom: 16px;
}

.text-who-we-are {
    font-family: "Ony One";
    font-size: 24px;
    color: #313332;
}

img {
    max-width: 100%;
    height: auto;
}

.collage img,
.block-with-image img {
    object-fit: cover;
}

.block-with-image img {
    width: 30.5vw;
    max-width: 550px;
    min-width: 132px;
    aspect-ratio: 439 / 464;
}

.block-with-image>div {
    width: 55%;
}

.values {
    margin-top: max(50px, min(13.4vh, 100px));
    text-align: left;
}

.content-values {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
    row-gap: 40px;
}

.header3 {
    font-size: 24px;
    font-family: "Ony One";
    font-weight: bold;
    color: #313332;
    text-align: left;
    margin: 0;
}

#history {
    width: 100%;
    margin-top: max(80px, min(12vh, 120px));
    text-align: left;
}

#history .header1 {
    text-align: center;
    margin-bottom: 64px;
}

#history .block {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: relative;
}

.note {
    width: 100%;
    display: flex;
    /* FIX: card border in the mockup is a thin 1px line, not 3px */
    border: 1px solid #ececec;
    position: relative;
    padding: 20px 0px;
    box-sizing: border-box;
    background-color: white;
    gap: 32px;
}

.left-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 27vw;
    min-width: min(382px, 100%);
    max-width: 800px;
    flex-shrink: 0;
}

.collage {
    position: relative;
    min-width: min(350px, 100%);
    width: 91.6%;
    max-width: 410px;
    /* FIX: this used to have its own fixed vh height, independent of the
     photo's actual rendered size (width 100% + aspect-ratio below) — any
     mismatch between the two left dead space in the box, pushing .years
     down below where the photo actually ends. Sizing the box off the same
     aspect ratio means it always matches the photo exactly. */
    aspect-ratio: 20471 / 19100;
}

.collage img {
    width: 100%;
    aspect-ratio: 20471 / 19100;
}

.years {
    color: #ad83ff;
    font-size: 40px;
    font-family: "Ony One";
    font-weight: 590;
    margin-top: 16px;
}

/*grid*/
.text-history {
    font-size: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* width: max(823px, min(57.2vw, 1200px)); */
    width: min(100%, max(823px, min(57.2vw, 1200px)));
    min-width: 0;
    column-gap: 32px;
    padding-top: max(63px, min(70px, 7vh));
    color: #313332;
    font-family: "Ony One";
}

@media (max-width: 1200px) {
    .content-who-we-are {
        width: calc(100vw - 174px);
    }

    .block-with-image {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: max(50px, min(9.6vw, 113px));
        width: 100%;
        margin-bottom: max(30px, min(7.2vh, 75px));
    }

    .content-who-we-are .block-with-image:nth-child(even) {
        flex-direction: row-reverse;
        align-items: flex-start;
    }

    .block-with-image>img {
        width: 29.92vw;
        min-height: 317px;
        max-height: 380px
    }

    .block-with-image>div {
        width: 54%;
    }

    .values {
        margin-top: max(50px, min(11vh, 100px));
    }

    .content-values {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr 1fr;
        column-gap: 64px;
        row-gap: 40px;
    }

    .header3 {
        font-size: 24px;
        font-family: "Ony One";
        font-weight: bold;
        color: #313332;
    }

    #history {
        width: 100%;
        margin-top: max(100px, min(15.6vh, 140px));
    }

    .left-note {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 32.3vw;
        min-width: min(290px, 100%);
        max-width: 750px;
    }

    .collage {
        min-width: min(273px, 100%);
        max-width: 365px;
    }

    .years {
        color: #ad83ff;
        font-size: 39px;
        font-family: "Ony One";
    }

    /*grid*/
    .text-history {
        font-size: 18px;
        font-family: "Ony One";
        column-gap: 24px;
        padding-top: max(40px, min(86px, calc(9vh)));
        color: #313332;
    }
}

@media (max-width: 1024px) {

    /* Cards stay in the row layout (photo left, text right) all the way
     through tablet widths — only the two text columns collapse into one,
     since a single column reads better when one side has more copy than
     the other. Full stacking (photo on top, like the phone mockup) now
     only happens below the phone breakpoint further down, where .note
     switches to flex-direction: column. */
    .text-history {
        grid-template-columns: 100%;
        width: min(100%, min(700px, 88vw));
        gap: 24px;
        padding-top: 32px;
        font-size: 18px;
    }
}

@media (max-width: 900px) {
    .content-who-we-are {
        width: calc(100vw - 30px);
    }

    .block-with-image {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
        width: 100%;
        margin-bottom: 56px;
        min-width: 0;
    }

    .block-with-image img {
        min-width: 0;
    }

    .header1 {
        margin-bottom: 20px;
        font-size: 70px;
    }

    .content-who-we-are .block-with-image:nth-child(even) {
        flex-direction: row-reverse;
        align-items: center;
    }

    .block-with-image>img {
        width: 38.3vw;
        aspect-ratio: 285 / 299
    }

    .block-with-image>div {
        width: 50.9vw;
    }

    .values {
        margin-top: 63px;
    }

    .content-values {
        display: grid;
        width: 100%;
        grid-template-columns: 100%;
        gap: 32px;
    }

    .text-who-we-are {
        font-size: 20px;
    }

    .header3 {
        font-size: 20px;
        font-family: "Ony One";
        font-weight: bold;
        color: #313332;
    }

    #history {
        width: 100%;
        margin-top: 63px;
    }

    #history .header1 {
        margin-bottom: 48px;
    }

    .left-note {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .years {
        color: #ad83ff;
        font-size: 31px;
        font-family: "Ony One";
    }

    .text-history {
        font-size: 16px;
        font-family: "Ony One";
        color: #313332;
        padding-top: 0;
        grid-template-columns: 100%;
        gap: 24px;
        grid-auto-rows: min-content;
        width: min(100%, max(325px, min(43.835vw, 400px)));
    }

    .text-history>div {
        height: min-content;
    }
    
    
    .text-history {
        width: 95.43%;
        gap: 16px;
    }
    
    .text-history span{
        gap: 16px;
        display: flex;
        flex-direction: column;
    }
    
    .text-history p{
        margin: 0;
    }
}

@media (max-width: 700px) {
    .content-who-we-are {
        width: calc(100% - 32px);
    }

    .block-with-image {
        flex-direction: column-reverse;
        gap: 32px;
    }

    .block-with-image>div {
        width: 100%;
    }

    .content-who-we-are .block-with-image:nth-child(even) {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .header1 {
        font-size: 56px;
        margin-bottom: 24px;
    }

    .block-with-image img {
        height: auto;
        max-height: 500px;
        width: 100%;
    }

    .content-who-we-are .block-with-image:nth-child(even) .header1 {
        margin-bottom: 16px;
    }

    #history {
        margin-top: 40px;
    }

    .values .header1 {
        margin-bottom: 16px;
    }

    #history .header1 {
        margin-bottom: 32px;
        text-align: left;
    }

    #history .block {
        gap: 24px;
    }

    /* Only here — actual phone widths — do cards switch from the row
     layout to the fully stacked photo-on-top layout. */
    .note {
        gap: 16px;
        flex-direction: column;
        align-items: center;
    }

    .left-note {
        width: 100%;
        /* FIX: was a fixed height (42vh) — if the photo + year text needed more
       room than that on a given phone, they overflowed past this box and
       overlapped the paragraph text right below it. Let it size to its
       actual content instead. */
        height: auto;
    }

    .collage {
        width: 85.6vw;
        min-width: min(220px, 100%);
    }

    @media (orientation: landscape) {
        .left-note {
            /* FIX: same fixed-height overflow issue as above, for landscape phones */
            height: auto;
            min-height: 377px;
        }

        .collage {
            /* Landscape wants the photo sized off the available height instead
         of width — width: auto lets aspect-ratio derive the width from
         this height instead of fighting the 85.6vw set above. */
            width: auto;
            height: 78.5vh;
            max-height: 380px;
        }
    }
}

@media (min-width: 701px) {
    .text-history {
        margin-right: 24px;
    }
}