@font-face {
    font-family: "YZE";
    src: url("./assets/YZE.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

.blog {
    max-width: 1320px;
}

.blog-header {
    margin-bottom: var(--spacing2);
}

.blog h1,
.blog h2,
.blog h3,
.blog h4 {
    hyphens: none;
}

.blog-layout {
    align-items: start;
}

.blog-index {
    grid-column: span 4;
    position: sticky;
    top: var(--spacing4);
    max-height: calc(100vh - var(--spacing2));
    overflow-y: auto;
    padding-right: var(--spacing5);
}

.blog-index a {
    display: block;
    font-size: var(--h5);
    line-height: 1.05;
    margin-bottom: var(--spacing5);
}

.blog-feed {
    grid-column: 6 / span 7;
    max-height: calc(100vh - var(--spacing1));
    overflow-y: auto;
    border-top: 1px solid var(--grey);
    padding-right: var(--spacing5);
    scroll-behavior: smooth;
}

.blog-feed-row {
    padding: var(--spacing4) 0 var(--spacing3);
    border-bottom: 1px solid var(--grey);
}

.blog-feed-row h4 {
    margin-bottom: var(--spacing5);
}

.blog-feed-row p:last-child {
    margin-bottom: 0;
}

.blog-post {
    max-width: 920px;
    margin: 0 auto;
}

.blog-post p {
    line-height: 1.18;
}

.blog-post h4 {
    margin-top: var(--spacing4);
}

.blog-footer {
    border-top: 1px solid var(--grey);
    padding-top: var(--spacing5);
}

@media (max-width: 768px) {
    .blog-index {
        grid-column: span 6;
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
        border-bottom: 1px solid var(--grey);
        padding-bottom: var(--spacing5);
    }

    .blog-feed {
        grid-column: span 6;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}