/* .post */
/* .call-out */
@font-face {
    font-family: inter;
    src: url(../fonts/Inter_24pt-Black.ttf)format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: schibsted grotesk;
    src: url(../fonts/schibsted-grotesk-400.ttf)format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: schibsted grotesk;
    src: url(../fonts/schibsted-grotesk-500.ttf)format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: schibsted grotesk;
    src: url(../fonts/schibsted-grotesk-600.ttf)format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: schibsted grotesk;
    src: url(../fonts/schibsted-grotesk-700.ttf)format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

:root {
    color-scheme: light dark;
    --bg-color: #FFFCF0;
    --bg2-color: #F2F0E5;
    --link-color: #1C1B1A;
    --link-underline-color: color-mix(in srgb, #1C1B1A 40%, transparent);
    --text-color: #1C1B1A;
    --text2-color: #6F6E69;
    --text3-color: #DC3C22;
    --ui-color: #E6E4D9;
    --footer-bg: #002FA7;
    --footer-text: #E6E4D9;
    --call-out-bg: #FFC857;
    --call-out-border: #DC3C22
}

@media(prefers-color-scheme:dark) {
     :root {
        --bg-color: #1C1B1A;
        --bg2-color: #282726;
        --link-color: #E6E4D9;
        --link-underline-color: #878580;
        --text-color: #E6E4D9;
        --text2-color: #878580;
        --text3-color: #FFC857;
        --ui-color: #2D2C2B;
        --call-out-bg: #002FA7;
        --call-out-border: #009999
    }
}

:root[data-theme=light] {
    --bg-color: #FFFCF0;
    --bg2-color: #F2F0E5;
    --link-color: #1C1B1A;
    --link-underline-color: color-mix(in srgb, #1C1B1A 40%, transparent);
    --text-color: #1C1B1A;
    --text2-color: #6F6E69;
    --text3-color: #DC3C22;
    --ui-color: #E6E4D9;
    --call-out-bg: #FFC857;
    --call-out-border: #DC3C22
}

:root[data-theme=dark] {
    --bg-color: #1C1B1A;
    --bg2-color: #282726;
    --link-color: #E6E4D9;
    --link-underline-color: #878580;
    --text-color: #E6E4D9;
    --text2-color: #878580;
    --text3-color: #FFC857;
    --ui-color: #2D2C2B;
    --call-out-bg: #002FA7;
    --call-out-border: #009999
}

html {
    background: var(--footer-bg);
    margin: 0;
    padding: 0
}

* {
    transition: background-color .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1)
}

body {
    margin: 0;
    padding: 0;
    font-family: schibsted grotesk, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background: var(--footer-bg)
}

.container {
    max-width: 600px;
    margin: 0 auto 3em;
    padding: 0 1rem
}

.content-wrapper {
    background: var(--bg-color);
    width: 100%;
    margin: 0;
    padding: 0
}

a {
    color: var(--link-color);
    border-bottom: solid 1px var(--link-underline-color);
    text-decoration: none
}

a:hover {
    border-bottom: 1px solid var(--link-color)
}

h2 a,
h3 a,
h4 a {
    text-decoration: none;
    border-bottom: none
}

h2 a:hover,
h3 a:hover,
h4 a:hover {
    text-decoration: none;
    border-bottom: none
}

ul {
    margin: 0;
    padding-inline-start: 20px
}

code {
    background-color: var(--ui-color);
    padding: .25rem;
    border-radius: 4px;
    font-family: monospace
}

.post,
header {
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--ui-color)
}

@media(max-width:700px) {
    .post,
    header {
        margin-bottom: 2rem
    }
}

footer {
    margin-top: 3rem;
    margin-bottom: 1.5rem
}

.color-bar-wrap {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    line-height: 0;
    z-index: 100
}

.color-bar-wrap .color-bar-row {
    width: 100%;
    margin: 0;
    padding: 0
}

.color-bar-wrap .color-bar-row.bar1 {
    background: #002fa7;
    height: 12px
}

.color-bar-wrap .color-bar-row.bar2 {
    background: #099;
    height: 6px
}

.color-bar-wrap .color-bar-row.bar3 {
    background: #f57c00;
    height: 6px
}

.color-bar-wrap .color-bar-row.bar4 {
    background: #ffc857;
    height: 6px
}

.site-header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.site-header .header-content .header-left {
    padding: .5rem 0;
    margin-top: .5rem;
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: .5rem
}

.site-header .header-content .header-left h1,
.site-header .header-content .header-left .site-title {
    font-family: Inter, schibsted grotesk, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, sans-serif;
    font-optical-sizing: auto;
    margin: 0;
    font-size: 1.5rem;
    white-space: nowrap
}

@media(max-width:700px) {
    .site-header .header-content .header-left h1,
    .site-header .header-content .header-left .site-title {
        font-size: 1.25rem
    }
}

.site-header .header-content .header-left h1 a,
.site-header .header-content .header-left .site-title a {
    text-decoration: none;
    border-bottom: none
}

.site-header .header-content .header-left h1 a:hover,
.site-header .header-content .header-left .site-title a:hover {
    text-decoration: none;
    border-bottom: none
}

.site-header .header-content .header-left .site-subhed {
    margin-top: .25rem;
    font-size: .9rem;
    color: var(--text2-color)
}

@media(max-width:520px) {
    .site-header .header-content .header-left .site-subhed {
        display: none
    }
}

.site-header .header-content .header-right {
    margin-left: 2rem;
    margin-top: .6rem;
    display: flex;
    align-items: flex-end;
    gap: 0
}

.site-header .header-content .header-right nav,
.site-header .header-content .header-right .nav-label {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .9rem;
    align-items: baseline
}

@media(max-width:700px) {
    .site-header .header-content .header-right nav,
    .site-header .header-content .header-right .nav-label {
        font-size: .8rem
    }
}

.site-header .header-content .header-right nav .nav-item,
.site-header .header-content .header-right .nav-label .nav-item {
    margin: 0 .5rem;
    display: flex;
    align-items: baseline
}

@media(max-width:520px) {
    .site-header .header-content .header-right nav .nav-item:nth-child(3),
    .site-header .header-content .header-right .nav-label .nav-item:nth-child(3) {
        display: none
    }
}

.site-header .header-content .header-right .search-toggle {
    background: 0 0;
    border: none;
    padding: .25rem;
    cursor: pointer;
    color: var(--text3-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s ease, background-color .2s ease
}

.site-header .header-content .header-right .search-toggle svg {
    width: 16px;
    height: 16px
}

@media(max-width:700px) {
    .site-header .header-content .header-right .search-toggle svg {
        width: 14px;
        height: 14px
    }
}

.pagination,
.nav-item,
.ui {
    margin-top: .5rem;
    margin-bottom: .5rem
}

.pagination a,
.nav-item a,
.ui a {
    color: var(--text3-color);
    border-bottom: none;
    position: relative
}

.pagination a:hover,
.nav-item a:hover,
.ui a:hover {
    border-bottom: none
}

.pagination a:hover::after,
.nav-item a:hover::after,
.ui a:hover::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--text3-color)
}

.page-content {
    margin-bottom: 6rem
}

.post .post-list-title-date {
    display: block;
    font-size: 1.5rem;
    margin-block-start: 0;
    margin-block-end: 0;
    line-height: 1.18
}

.post .post-list-title-date h2,
.post .post-list-title-date h1 {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: 2rem
}

@media(max-width:700px) {
    .post .post-list-title-date h2,
    .post .post-list-title-date h1 {
        font-size: 1.5rem
    }
}

.post .post-list-title-date h2 a,
.post .post-list-title-date h1 a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    border-bottom: none
}

.post .post-list-title-date .post-list-date {
    display: inline;
    color: var(--text2-color);
    font-size: .9rem;
    line-height: 1.18;
    margin-left: .5rem;
    padding: 0
}

.post .post-meta {
    font-size: .9rem;
    padding-top: .5rem
}

.post .post-meta .permalink {
    color: var(--text3-color);
    border-bottom: none
}

.post .post-meta .permalink:hover {
    border-bottom: 1px solid var(--text3-color)
}

.post .read-more {
    margin-top: .5rem;
    margin-bottom: .5rem
}

.post .read-more a {
    color: var(--text3-color);
    border-bottom: 1px solid transparent
}

.post .read-more a:hover {
    border-bottom: 1px solid var(--text3-color)
}

.post .in-post-image {
    text-align: center
}

.post .in-post-image img {
    border-radius: 4px;
    margin: 0;
    padding: 0;
    max-width: 100%;
    box-sizing: border-box
}

.post .in-post-image figcaption {
    font-size: .8rem;
    color: var(--text2-color);
    text-align: center
}

.post .in-post-image a {
    border-bottom: none
}

.link h1,
.link h2,
.micro h1,
.micro h2,
.call-out h1,
.call-out h2 {
    display: inline;
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
    padding: 0
}

.link h1 a,
.link h2 a,
.micro h1 a,
.micro h2 a,
.call-out h1 a,
.call-out h2 a {
    text-decoration: none;
    border-bottom: none;
    color: var(--text-color)
}

.link h1 a:hover,
.link h2 a:hover,
.micro h1 a:hover,
.micro h2 a:hover,
.call-out h1 a:hover,
.call-out h2 a:hover {
    text-decoration: none;
    border-bottom: none
}

.link p:first-of-type,
.micro p:first-of-type,
.call-out p:first-of-type {
    display: inline;
    margin: 0;
    padding: 0
}

.archive-list {
    margin-bottom: 5rem
}

.archive-list .archive-year {
    margin-bottom: 2rem
}

.archive-list .archive-year h2 {
    color: var(--text2-color);
    border-bottom: 1px solid var(--ui-color);
    margin: 0
}

.archive-list .archive-year h3 {
    color: var(--text2-color);
    font-size: 1.1rem;
    margin: .5rem 0
}

.archive-list .archive-month {
    margin: 1.5rem 0
}

.archive-list .archive-month ul {
    list-style: none;
    padding-left: 1rem
}

.archive-list ul li,
.more-posts ul li {
    margin: .5rem 0;
    display: block
}

.archive-list ul li a,
.more-posts ul li a {
    text-decoration: underline;
    text-decoration-color: var(--link-underline-color);
    text-decoration-thickness: .9px;
    text-underline-offset: 5px;
    border-bottom: none
}

.archive-list ul li a:hover,
.more-posts ul li a:hover {
    text-decoration-color: var(--link-color);
    border-bottom: none
}

.archive-list ul li .post-date,
.more-posts ul li .post-date {
    margin-left: .25rem;
    color: var(--text2-color);
    font-size: .9rem
}

.more-posts {
    margin-top: 3rem;
    margin-bottom: 5rem
}

.more-posts h2 {
    color: var(--text2-color);
    margin-bottom: .5rem
}

.more-posts ul {
    list-style: none;
    padding-left: 0
}

blockquote {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 10px;
    margin-inline-end: 10px;
    unicode-bidi: isolate;
    padding-left: 1rem;
    border-left: 4px solid var(--ui-color)
}

.post.quote .quote-content {
    position: relative
}

.post.quote .quote-content p::before {
    content: "\201C";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 3rem;
    font-family: Georgia, serif;
    color: var(--text3-color);
    line-height: 1
}

.post.quote .quote-content blockquote {
    border-left: none
}

figure {
    margin: 0;
    padding: 0
}

.header-image {
    max-width: calc(100% + 2rem);
    margin-top: 1rem
}

.header-image img {
    border-radius: 4px;
    width: 100%;
    height: auto;
    display: block
}

.image-credit {
    text-align: right;
    font-size: .8rem;
    color: var(--text2-color)
}

.image-credit a {
    text-decoration: none;
    border-bottom: none
}

.image-credit .camera-icon {
    color: var(--text2-color);
    margin: 0 .1rem .2rem 0;
    vertical-align: middle
}

.responsive-image {
    margin: 2rem 0;
    max-width: 100%
}

.responsive-image img {
    width: 100%;
    height: auto;
    display: block
}

.responsive-image picture {
    display: block;
    width: 100%
}

.post.call-out {
    position: relative;
    border-top: 6px solid var(--call-out-border);
    background-color: var(--call-out-bg);
    padding: 1.5rem 1rem;
    margin-top: 1rem;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px
}

.post.call-out .help-icon {
    float: right;
    color: var(--text-color);
    opacity: .7;
    transition: opacity .2s, color .2s;
    vertical-align: middle;
    z-index: 2;
    text-decoration: none;
    border-bottom: none
}

.post.call-out .help-icon:hover,
.post.call-out .help-icon:focus {
    color: var(--link-color);
    opacity: 1;
    text-decoration: none;
    border-bottom: none
}

.post.call-out .help-icon-svg {
    vertical-align: middle
}

.anchor {
    color: var(--text2-color);
    text-decoration: none;
    margin-left: -1em;
    padding-right: .5em;
    visibility: hidden
}

h1:hover .anchor,
h2:hover .anchor,
h3:hover .anchor,
h4:hover .anchor {
    visibility: visible
}

.post.link .link-card {
    max-width: 600px;
    width: 100%;
    margin: 1rem auto;
    border: 1px solid var(--ui-color);
    border-radius: 4px;
    background: var(--bg2-color);
    overflow: hidden;
    transition: box-shadow .2s
}

@media(max-width:700px) {
    .post.link .link-card {
        max-width: 100%;
        margin: 1rem 0
    }
}

.post.link .link-card a {
    text-decoration: none;
    border-bottom: none
}

.post.link .link-card .link-card-content {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit
}

.post.link .link-card .link-card-content:hover {
    text-decoration: none
}

.post.link .link-card .link-card-image img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--ui-color)
}

.post.link .link-card .link-card-body {
    padding: 1rem 1rem .5rem
}

.post.link .link-card .link-card-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .25rem;
    color: var(--text-color)
}

.post.link .link-card .link-card-title .link-card-site-separator {
    color: var(--text2-color);
    margin: 0;
    display: inline
}

.post.link .link-card .link-card-title .link-card-site {
    font-weight: 400;
    color: var(--text2-color);
    font-size: .8rem;
    display: inline;
    white-space: nowrap
}

.post.link .link-card .link-card-description {
    font-size: .9rem;
    color: var(--text-color);
    margin-bottom: .5rem
}

.post.link .link-card .link-card-site {
    display: flex;
    align-items: center;
    gap: .4em;
    font-size: .8rem
}

.post.link .link-card .link-card-site-icon {
    margin-right: .2em;
    color: var(--text2-color)
}

.post.link .link-card.link-card-square .link-card-content {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%
}

.post.link .link-card.link-card-square .link-card-image-square {
    flex: 0 0 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--text2-color)
}

.post.link .link-card.link-card-square .link-card-image-square img {
    width: 120px;
    height: 120px;
    object-fit: cover
}

.post.link .link-card.link-card-square .link-card-content-right {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center
}

.post.link .link-card.link-card-square .link-card-square-body {
    flex: 1;
    padding: 0;
    margin: .5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start
}

.post.link .link-card.link-card-square .link-card-square-body .link-card-description {
    font-size: .9rem;
    color: var(--text-color);
    margin: 0 0 0 .5rem
}

@media(max-width:700px) {
    .post.link .link-card.link-card-square .link-card-square-body .link-card-description {
        font-size: .8rem;
        margin: 0 0 0 .25rem
    }
}

.post.link .link-card.link-card-square .link-card-square-body .link-card-title {
    margin: 0 0 .5rem .5rem
}

@media(max-width:700px) {
    .post.link .link-card.link-card-square .link-card-square-body .link-card-title {
        margin: 0 0 .25rem .25rem
    }
}

.tags {
    margin: 0 0 0 .5rem;
    color: var(--text2-color)
}

.tags a {
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
    border-radius: 5px;
    color: var(--text2-color);
    display: inline-block;
    margin: 0 4px 8px 0;
    padding: 1px 6px;
    text-decoration: none
}

.tags a:hover {
    background: color-mix(in srgb, var(--text-color) 5%, transparent);
    transition: var(--transition);
    text-decoration: none
}

.site-footer {
    background-color: var(--footer-bg);
    padding: 2rem 0;
    margin: 2rem 0
}

.site-footer .footer-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 1rem
}

.site-footer .theme-switcher {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem
}

.site-footer .theme-switcher button {
    background: 0 0;
    border: none;
    border-radius: 4px;
    padding: .25rem .5rem;
    color: #fffcf0;
    cursor: pointer;
    font-size: .9rem
}

.site-footer .footer-content {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.site-footer .footer-content p {
    color: var(--footer-text);
    margin: 0;
    padding: 0
}

.site-footer .footer-content p a {
    color: var(--footer-text);
    font-weight: 700;
    text-decoration: none;
    border-bottom: none
}

.site-footer .footer-content p a:hover {
    border-bottom: 1px solid var(--footer-text)
}

.site-footer .footer-content .center {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center
}

#fastSearch {
    display: none;
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-color, #fff);
    border: 1px solid var(--ui-color, #ccc);
    border-radius: 8px;
    z-index: 9999;
    width: 90vw;
    max-width: 500px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, .15);
    padding: 1rem
}

#fastSearch.active {
    display: block
}

#searchInput {
    width: 100%;
    display: block;
    margin: 0 auto 1rem;
    font-size: 1.2rem;
    padding: .5rem;
    border-radius: 4px;
    border: 1px solid var(--ui-color, #ccc);
    background: var(--bg2-color, #f9f9f9);
    color: var(--text-color, #222);
    max-width: 475px
}

@media(max-width:520px) {
    #searchInput {
        max-width: 340px
    }
}

#searchResults {
    list-style: none;
    margin: 0;
    padding: 0
}

#searchResults li {
    padding: .75rem 1rem;
    border-radius: 6px;
    margin-bottom: .25rem;
    background: 0 0;
    transition: background .2s, color .2s, border .2s;
    cursor: pointer;
    font-size: 1rem;
    border: 1px solid transparent
}

#searchResults li.selected,
#searchResults li:hover {
    background: var(--ui-color, #e6e4d9);
    color: var(--link-color, #24837B);
    border: 1px solid var(--link-color, #24837B)
}

#searchResults li .title {
    font-weight: 700;
    color: var(--text-color, #1C1B1A);
    display: block
}

#searchResults li em {
    color: var(--text2-color, #888);
    font-size: .95em;
    font-style: normal
}

#searchResults li a {
    border-bottom: none
}

#searchResults li a em {
    border-bottom: none
}

.newsletter-subscribe-form {
    margin: 3rem 0;
    padding: 2rem;
    background: var(--bg2-color);
    border-top: 1px solid var(--ui-color);
    border-bottom: 1px solid var(--ui-color)
}

@media(max-width:700px) {
    .newsletter-subscribe-form {
        padding: 1.5rem;
        margin: 2rem 0
    }
}

.newsletter-subscribe-form .embeddable-buttondown-form {
    margin: 0;
    padding: 0;
    background: 0 0;
    border: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
    flex-direction: row
}

@media(max-width:700px) {
    .newsletter-subscribe-form .embeddable-buttondown-form {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem
    }
}

.newsletter-subscribe-form .embeddable-buttondown-form label {
    color: var(--text-color);
    font-weight: 500;
    font-size: .95rem;
    line-height: 1.4;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
    flex-basis: auto
}

@media(max-width:700px) {
    .newsletter-subscribe-form .embeddable-buttondown-form label {
        font-size: .85rem;
        margin-bottom: .5rem;
        white-space: normal
    }
}

.newsletter-subscribe-form .embeddable-buttondown-form .form-inputs {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    flex-basis: auto
}

@media(max-width:700px) {
    .newsletter-subscribe-form .embeddable-buttondown-form .form-inputs {
        gap: .5rem
    }
}

.newsletter-subscribe-form .embeddable-buttondown-form input[type=email] {
    flex: 0 1 160px;
    min-width: 120px;
    padding: .75rem 1rem;
    border: 1px solid var(--ui-color);
    border-radius: 4px;
    background: var(--bg-color);
    color: var(--text-color);
    font-family: inherit;
    font-size: .95rem;
    transition: border-color .2s ease, box-shadow .2s ease;
    box-sizing: border-box;
    margin: 0
}

@media(max-width:700px) {
    .newsletter-subscribe-form .embeddable-buttondown-form input[type=email] {
        flex: 1;
        min-width: 120px;
        font-size: .85rem;
        padding: .6rem .8rem
    }
}

.newsletter-subscribe-form .embeddable-buttondown-form input[type=email]:focus {
    outline: none;
    border-color: var(--text3-color);
    box-shadow: 0 0 0 3px rgba(94, 64, 157, .1)
}

.newsletter-subscribe-form .embeddable-buttondown-form input[type=email]::placeholder {
    color: var(--text2-color)
}

.newsletter-subscribe-form .embeddable-buttondown-form input[type=submit] {
    background: var(--footer-bg);
    color: var(--footer-text);
    border: none;
    border-radius: 4px;
    padding: .75rem 1.5rem;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .2s ease, transform .1s ease;
    white-space: nowrap
}

@media(max-width:700px) {
    .newsletter-subscribe-form .embeddable-buttondown-form input[type=submit] {
        font-size: .85rem;
        padding: .6rem 1rem;
        white-space: nowrap
    }
}

.newsletter-subscribe-form .embeddable-buttondown-form input[type=submit]:hover {
    background: var(--footer-bg);
    transform: translateY(-1px)
}

.newsletter-subscribe-form .embeddable-buttondown-form input[type=submit]:active {
    transform: translateY(0)
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 30%));
    gap: 20px;
    margin: 3em 0
}

@media only screen and (max-width:768px) {
    .project-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 45%));
        justify-content: center;
        margin: 20px 0
    }
}

.project-grid .project-card {
    position: relative;
    border: 1.5px solid var(--ui-color);
    border-radius: 6px;
    padding: 20px 20px 10px;
    cursor: pointer
}

@media only screen and (max-width:768px) {
    .project-grid .project-card {
        padding: 20px 10px 10px
    }
}

.project-grid .project-card .project-type {
    position: absolute;
    top: 0;
    right: 16px;
    height: 24px;
    line-height: 24px;
    border-bottom: 1px solid var(--ui-color);
    background-color: var(--ui-color);
    padding: 0 8px;
    font-size: .8rem;
    border-radius: 0 0 4px 4px;
    letter-spacing: .5px
}

.project-grid .project-card .project-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: none
}

.project-grid .project-header {
    display: flex;
    align-items: flex-end;
    align-items: flex-start;
    gap: 8px;
    margin-top: 24px;
    margin-bottom: 12px
}

.project-grid .project-header .project-emoji {
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: flex-start
}

.project-grid .project-header .project-title {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--text-color)
}

.project-grid .project-description {
    color: var(--text2-color);
    margin-bottom: 8px;
    font-size: .8rem;
    line-height: 1.4
}