:root {
    --font-sans-serif: 'Source Sans 3', ui-sans-serif, sans-serif;
    --font-serif: 'Source Serif 4', ui-serif, Serif;
}

body {
    font-family: 'Source Sans 3', system-ui;
}

.site-header__inner {
    max-width: 102.4rem;
}

.site-logo {
    flex: auto;
}

.site-logo img {
    height: 32px;
    width: auto;
    margin: 4px 0;
}

.main-home .btn {
    border: solid 2px;
}

.hero h1 {
    font-family: "source serif 4";
    font-size: 64px;
    line-height: 1;
    font-weight: 480;
    letter-spacing: -.04em;
}

section h2 {
    font-family: "source serif 4";
    font-weight: 480px;
    font-size: 24px;
    line-height: 32px;
}

.lp-section {
    position: relative;

    padding: 40px 0;
}

.lp-section h2 {
    font-weight: 600;
    margin: 0;
}

.postcard h3 {
    font-family: "source serif 4";
    letter-spacing: -.024em;
    font-size: 18px;
    line-height: 24px;
    margin: 0;
}

.hero .flex>div:nth-child(1) {
    padding: 0 40px 0 0;
}

.hero-cover .thumbnail {
    border: solid 1px;
}

.tabcontent {
    padding: 40px 0;
}

.tabcontent-cover {
    padding: 0 64px;
}

.section-header-centered {
    text-align: center;
    text-wrap: balance;
}

.section-header-centered nav {
    justify-content: center;
}

.section-header-centered nav a {
    margin: 0 16px;
}

.section-kerjasama h2 {
    font-weight: 700;
}

.section-kerjasama h2+p {
    font-weight: 400;
    font-family: 'source serif 4', serif;
    margin-bottom: 0;
}

.section-kerjasama h3 {
    font-weight: 600;
}

.section-tujuan {
    padding: 0 0 40px;
    background: var(--light);
}

.section-tujuan .grid-3x h3 {
    padding-top: 16px;
}

.section-tujuan .section-cover {
    order: -1;
    margin: -64px 0;
}

.knolbase {
    grid-gap: 16px;
    padding-top: 8px;
    min-width: 0;

}

.kb-card {
    box-shadow: none;
    background: var(--light);
    border: 0;
    padding: 0;
    min-width: 0;

    border-radius: 4px;
}

.kb-card h3 {
    font-size: 16px;
    line-height: 22px;
    font-weight: 480;
    min-width: 0;
}

.kb-card h3 a {
    display: block;
    padding: 12px 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.kb-card ul {
    display: none;
}

.thumbnail svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.postcard {
    border: solid 1px;
}

.team-profile {
    text-align: center;
    margin-top: 16px;
    padding: 0 16px 16px;
}

.team-avatar {
    max-width: 80%;
    margin: auto;
}

.team-profile .team-caption {
    padding-top: 16px;
    border-top: solid 1px;
}

.team-profile h3 {
    font-family: var(--font-serif);
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 24px;
}

.team-profile p {
    color: var(--gray);
    margin: 0;
}

footer {
    background: var(--ink);
    color: white;
    padding: 40px 0;
}

footer a {
    color: var(--sky);
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

footer h4 {
    font-size: 18px;
    line-height: 24px;
    position: relative;
    margin: 0 0 12px;
    padding: 0 0 12px;
}

footer h4:after {
    content: "";
    height: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    background: #88bd2d;
    opacity: .4;
}

@media(max-width: 768px) {
    body .hero {
        background: none !important;
    }

    .lp-section {
        padding: 24px 0;
    }

    .hero .grid {
        flex-direction: column-reverse;
        grid-gap: 24px;
    }

    .hero .flex>div {
        width: 100%;
    }

    .hero .flex>div:nth-child(1) {
        padding: 16px 0 0;
    }

    .hero h1 {
        font-size: 48px;
        padding: 0;
    }

    .hero .thumbnail {
        padding-bottom: 50%;
        border: 0;
    }

    .hero-cover {
        order: -1;
        margin: -24px -16px 0;

    }

    .section-header {
        margin-bottom: 16px;
    }

    .section-header h2.text-title-2 {
        font-size: 24px;
        line-height: 32px;
    }

    .tabcontent {

        padding: 24px 0;
    }

    .tabcontent-cover {
        padding: 0 24px;
    }

    .section-header-centered {
        text-wrap: pretty;
    }

    .section-header-centered .text-title-3 {
        font-size: 18px;
        line-height: 24px;
    }

    .kb-cover {
        width: 240px;
        margin-left: auto;
        margin-bottom: -52px;
    }

    .site-logo a img {
        height: 32px;
        margin-left: -8px;
    }

    footer {
        text-align: left !important;
    }

    footer .grid-4x {
        grid-template-columns: 1fr 1fr !important;
    }

    .section-nav {
        margin-top: 16px;
    }

    .section-tujuan .section-cover {
        width: 280px;
        margin: -32px 0 -24px;
    }

    .section-tujuan .grid-3x h3 {
        padding-top: 0;
    }

    .knolbase {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 8px;
    }

    .knolbase:before,
    .knolbase:after {
        display: none;
    }

    .section-team .grid-4x {
        grid-template-columns: 1fr 1fr !important;
        grid-gap: 0;
    }

    .team-profile h3 {
        font-family: var(--font-serif);
        margin: 0 0 8px;
        font-size: 18px;
        line-height: 24px;
    }

    .team-profile p {
        font-size: 14px;
        line-height: 18px;
    }

    .knolbase {
        grid-template-columns: 1fr 1fr !important;
    }
}