.about-intro {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:55px;
    align-items:center;
    padding-bottom:20px
}

.about-photo {
    position:relative
}

.about-photo img {
    height:460px;
    width:100%;
    border-radius:30px;
    object-position:center
}

.about-story h2 {
    font-size:3.4rem;
    margin-bottom:24px
}

.about-story p:not(.eyebrow) {
    margin-bottom:20px
}

.about-story .button {
    margin-top:12px
}

.values {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px
}

.values article {
    border:1px solid var(--border);
    background:white;
    border-radius:20px;
    padding:26px
}

.values article>span {
    font-size:2.5rem;
    color:var(--blue);
    line-height:1
}

.values article:nth-child(even)>span {
    color:var(--red)
}

.values h3 {
    margin:20px 0 12px
}

.values p {
    font-size:.94rem
}

@media(max-width:1100px) {

    .values {
        grid-template-columns:repeat(2,1fr)
    }

}

@media(max-width:900px) {

    .about-intro {
        gap:30px
    }

    .about-story h2 {
        font-size:2.7rem
    }

}

@media(max-width:650px) {

    .about-intro {
        grid-template-columns:1fr;
        gap:30px
    }

    .about-photo img {
        height:310px
    }

    .about-story h2 {
        font-size:3rem
    }

    .values {
        grid-template-columns:1fr 1fr;
        gap:12px
    }

    .values article {
        padding:20px 16px
    }

    .values h3 {
        font-size:1.7rem
    }

    .values p {
        font-size:.88rem
    }

}