body{
    background: var(--surface-2);
}
.page-fonts {
    display: grid;
    margin: 0 auto;
    grid-template-columns: 30ch auto;
    grid-gap: 1rem;
    gap: 1rem;
}
.page-fonts  > h1 {
        grid-column: 2;
        padding: 1em;
    }
.page-fonts nav {
        top: 50px;
        height: 100vh;
        padding: 2rem 1rem;

    }
.page-fonts nav .fonts {
            line-height: 2;
            font-size: 1.2em;
        }
.page-fonts nav .others {
            display: block;
            margin-top: 2rem;
        }
.page-fonts .all-fonts {
        padding: 1rem;
        display: grid;
        grid-template-rows: auto;
        grid-gap: 1rem;
        gap: 1rem;
        grid-column: 2;
        max-width: 1200px;
    }
.page-fonts .typeface {

        margin-bottom: 2em;
        padding: 1em;

        background: var(--surface-1);
    }
.page-fonts .typeface header {
            display: grid;
            grid-template-columns: auto  auto;
            align-content: center;
            justify-content: space-between;
            place-content: center space-between ;
            padding: 0.5em 0;
            border-bottom: 1px solid var(--border-color);
        }
.page-fonts .typeface .font-name {
            font-size: 2em;
            font-weight: 600;
        }
.page-fonts .typeface .font-tag {
            font-size: 1em;
            color: var(--text-secondaryc-color);
            background: var(--surface-2);
            margin: 0 1em;
            padding: 0.5em;
            border-radius: 1em;
            border: 1px solid var(--border-color);
            justify-self: start;
            text-align: left;
        }
.page-fonts .typeface .samples {
            display: flex;

        }
.page-fonts .typeface .sample {
            padding: 8px;
            margin: 0;
        }
.page-fonts .typeface .sample.general,.page-fonts .typeface .sample.body {
                font-size: 18px;
                text-align: left;
                text-wrap: balance;
                line-height: 1.7;
            }
.page-fonts .typeface .sample.display {
                font-size: 72px;
                text-align: left;
                text-wrap: balance;
                line-height: 1.5;
                -webkit-hyphens: auto;
                        hyphens: auto;
            }

.other-fonts {
    grid-column: 2;
}

@media screen and (min-width: 120.001ch) {
        .page-fonts nav {
            position: sticky;
        }
}

@media screen and (max-width: 120ch) {
    .page-fonts {
        grid-template-columns: 1fr;
        gap: 0.1em;
        margin: 0;
        padding: 0;
    }
        .page-fonts .all-fonts {
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            padding-right: 0;
            grid-column: 1;
        }
        .page-fonts > h1 {
            grid-column: 1;
        }
        .page-fonts nav {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            padding-left: 0;
            padding-right: 0;
            background: var(--surface-1);
            overflow-x: auto;
            scrollbar-width: none;
            height: -moz-fit-content;
            height: fit-content;
        }
            .page-fonts nav ul {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                gap: 1rem;
                line-height: 1;
            }

                .page-fonts nav ul li{
                    align-items: center;

                    color: var(--text-secondaryc-color);
                    background: var(--surface-2);
                    padding: 0.25em 1em;
                    border-radius: var(--border-radius);
                    height: -moz-fit-content;
                    height: fit-content;
                }
                .page-fonts nav ul li a {
                    width: -moz-fit-content;
                    width: fit-content;
                    white-space: nowrap;
                    padding: 0.5em 1em;
                }

        .page-fonts .typeface {
            padding-left: 0.25em;
            padding-right: 0.25em;
        }
            .page-fonts .typeface header {
                padding-left: 0.25em;
                padding-right: 0.25em;
                grid-template-columns: auto;
            }
            .page-fonts .typeface .samples {
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                width: 100vw;
            }
            .page-fonts .typeface .sample {
                padding-left: 0.25em;
                padding-right: 0.25em;
                min-width: 95vw;
                max-width: 95vw;
            }
    .other-fonts {
        grid-column: 1;
    }
}