@font-face {
    font-family: "Hubot";
    src: url("/public/fonts/Hubot-Sans.woff2") format("woff2");
}
@font-face {
    font-family: "Mona Sans VF";
    src:
        url("/public/fonts/MonaSansVF[wdth,wght,opsz,ital].woff2")
            format("woff2 supports variations"),
        url("/public/fonts/MonaSansVF[wdth,wght,opsz,ital].woff2")
            format("woff2-variations");
    font-weight: 200 900;
    font-stretch: 75% 125%;
    font-style: normal;
    font-optical-sizing: auto;
}

@font-face {
    font-family: "Mona Sans VF";
    src:
        url("/public/fonts/MonaSansVF[wdth\,wght\,opsz\,ital].woff2")
            format("woff2 supports variations"),
        url("/public/fonts/MonaSansVF[wdth,wght,opsz,ital].woff2")
            format("woff2-variations");
    font-weight: 200 900;
    font-stretch: 75% 125%;
    font-style: italic;
    font-optical-sizing: auto;
}

html {
    font-family: "Mona Sans VF";
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Hubot";
}

.examples {
    margin-top: 2.5rem;
}

.examples-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.example-card {
    margin: 0;
}

.example-card img {
    width: 100%;
    height: auto;
    display: block;
}

.example-card figcaption {
    margin-top: 0.5rem;
    text-align: left;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .examples-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}