.about-page
{
    padding-top: 172px;
}

.about-hero
{
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 80px;
    align-items: center;
    min-height: 620px;
    padding-top: 70px;
    padding-bottom: 70px;
}

.about-hero__content
{
    max-width: 520px;
}

.about-hero__content h1
{
    margin: 18px 0 20px;
    font-size: clamp(48px, 5vw, 78px);
    line-height: 0.94;
}

.about-hero__content .line-indicator
{
    margin-bottom: 28px;
}

.about-hero__content p
{
    max-width: 490px;
    color: var(--color-text2);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.7;
}

.about-hero__image
{
    height: min(590px, 62vw);
    min-height: 440px;
    overflow: hidden;
    border-radius: 5px;
}

.about-hero__image img
{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.about-values-wrap
{
    padding: 90px 0;
    background: var(--color-bg2);
}

.about-values
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding-top:0px;
}

.about-value
{
    min-height: 260px;
    padding: 12px 42px 20px 0;
}

.about-value + .about-value
{
    padding-left: 42px;
    border-left: 1px solid rgba(26, 26, 26, 0.12);
}

.about-value > span
{
    display: block;
    margin-bottom: 55px;
    color: var(--color-acc);
    font-size: 11px;
    letter-spacing: 0.15em;
}

.about-value h2
{
    margin-bottom: 16px;
    font-size: clamp(28px, 3vw, 38px);
}

.about-value p
{
    max-width: 320px;
    color: var(--color-text2);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
}

.about-story
{
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 90px;
    padding-top: 110px;
    padding-bottom: 110px;
}

.about-story__heading h2
{
    margin-top: 16px;
    font-size: clamp(40px, 5vw, 62px);
}

.about-story__content
{
    max-width: 680px;
}

.about-story__content > *:first-child
{
    margin-top: 0;
}

.about-closing
{
    display: flex;
    min-height: 440px;
    align-items: center;
    background:
        linear-gradient(to right, rgba(20, 20, 18, 0.62), rgba(20, 20, 18, 0.28)),
        url('../images/front-page/nanika-about-us.jpg') center 62% / cover no-repeat;
}

.about-closing__inner
{
    color: #fff;
    padding-top:0px;
}

.about-closing__inner .nanika-eyebrow
{
    color: #fff;
}

.about-closing blockquote
{
    max-width: 850px;
    margin: 20px 0 0;
    font-family: var(--serif);
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 400;
    line-height: 0.95;
}

@media (max-width: 930px)
{
    .about-page
    {
        padding-top: 90px;
    }

    .about-hero
    {
        grid-template-columns: 1fr;
        gap: 42px;
        min-height: 0;
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .about-hero__image
    {
        height: 62vw;
        min-height: 360px;
    }

    .about-values
    {
        grid-template-columns: 1fr;
    }

    .about-value,
    .about-value + .about-value
    {
        min-height: 0;
        padding: 32px 0;
        border-left: 0;
    }

    .about-value + .about-value
    {
        border-top: 1px solid rgba(26, 26, 26, 0.12);
    }

    .about-value > span
    {
        margin-bottom: 28px;
    }

    .about-story
    {
        grid-template-columns: 1fr;
        gap: 42px;
        padding-top: 75px;
        padding-bottom: 75px;
    }
}

@media (max-width: 600px)
{
    .about-hero__content h1
    {
        font-size: 48px;
    }

    .about-hero__content p
    {
        font-size: 15px;
    }

    .about-hero__image
    {
        height: 105vw;
        min-height: 0;
    }

    .about-values-wrap
    {
        padding: 45px 0;
    }

    .about-closing
    {
        min-height: 360px;
    }
}