/* =========================================================
   About
========================================================= */

.kr-about {
    padding: 120px 24px 140px;

    background: #F7F7F6;
}

.kr-about__inner {
    width: 100%;
    max-width: 1240px;

    margin: 0 auto;
}

/* =========================================================
   Hero
========================================================= */

.kr-about-hero {
    max-width: 760px;

    margin-bottom: 140px;
}

.kr-about-hero__eyebrow {
    margin: 0 0 20px;

    font-family: "Satoshi", sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: lowercase;

    color: #8A847D;
}

.kr-about-hero__title {
    margin: 0 0 40px;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(4rem, 7vw, 8rem);
    line-height: 0.9;
    letter-spacing: -0.05em;

    color: #111111;
}

.kr-about-hero__supporting {
    margin: 0;

    max-width: 24ch;

    font-family: "Satoshi", sans-serif;
    font-size: 22px;
    line-height: 1.7;

    color: #4F4A44;
}

/* =========================================================
   Philosophy
========================================================= */

.kr-about-philosophy {
    display: grid;
    gap: 120px;

    max-width: 720px;

    margin-bottom: 140px;
}

.kr-about-philosophy-block p {
    margin: 0 0 28px;

    max-width: 34ch;

    font-family: "Satoshi", sans-serif;
    font-size: 24px;
    line-height: 1.9;

    color: #2A2723;
}

.kr-about-philosophy-block p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   Closing
========================================================= */

.kr-about-closing {
    padding-top: 56px;

    border-top: 1px solid #D7D3CE;
}

.kr-about-closing__line {
    margin: 0;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    line-height: 1;

    color: #111111;
}

.kr-about-closing__link {
    margin: 28px 0 0;
}

.kr-about-closing__link a {
    display: inline-block;
    margin-top: 4px;
    font-family: "Satoshi", sans-serif;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: #6F6B65;

    text-decoration: none;
}

.kr-about-closing__link a:hover {
    color: #111111;
}
/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767px) {

    .kr-about {
        padding: 64px 20px 96px;
    }

    .kr-about-hero {
        margin-bottom: 96px;
    }

    .kr-about-hero__title {
        font-size: clamp(3.8rem, 16vw, 5.6rem);
    }

    .kr-about-hero__supporting {
        font-size: 18px;
    }

    .kr-about-philosophy {
        gap: 72px;

        margin-bottom: 96px;
    }

    .kr-about-philosophy-block p {
        font-size: 20px;
        line-height: 1.8;
    }

}