.project{--card-padding:16px;--border-radius:16px;background:var(--clr-project-card-bg);border-radius:var(--border-radius);box-shadow:0 8px 30px #0000001f;color:var(--clr-primary-text);display:grid;font-size:1.25rem;grid-template-areas:"img          img           img" "title        title         title" "description  description   description" "website      codebase      .";grid-template-columns:auto auto 1fr;grid-template-rows:auto auto 1fr auto;padding-block-end:var(--card-padding);row-gap:16px}@media screen and (min-width:72em){.project{-moz-column-gap:32px;column-gap:32px;grid-template-areas:"img title        title       title" "img description  description description" "img website      codebase    ." "img .            .           .";grid-template-columns:auto auto auto 1fr;grid-template-rows:auto auto auto auto;padding-block-end:0;padding-inline-end:16px;row-gap:16px}}.project-image{aspect-ratio:1;border-radius:var(--border-radius);box-shadow:0 8px 30px #0000000d;grid-area:img;inline-size:100%;overflow:clip}@media screen and (min-width:72em){.project-image{inline-size:512px}}.project-padded-content{padding-inline:var(--card-padding)}@media screen and (min-width:72em){.project-padded-content{padding-inline:0}}.project-title{grid-area:title;word-break:break-word}@media screen and (min-width:72em){.project-title{padding-block-start:1.5rem}}.project-description{font-size:1.125rem;font-weight:400;grid-area:description;inline-size:max(45ch,100%);line-height:1.6667;word-break:break-word}.project-description>p:not(:first-of-type){margin-block-start:1rem}.project-description a{font-weight:600}.project-link{block-size:-moz-fit-content;block-size:fit-content;border:1px solid var(--clr-link);border-radius:100vmax;box-shadow:0 4px 12px #0000001f;font-size:1.125rem;font-weight:700;inline-size:-moz-fit-content;inline-size:fit-content;line-height:1.6667em;margin-block-start:12px;margin-inline-start:var(--card-padding);padding-block:.5rem;padding-inline:1rem;place-self:end;transition:all .3s ease}@media screen and (min-width:72em){.project-link{margin-block-start:32px;margin-inline-start:0;padding-block:.75rem;padding-inline:1rem}}.project-link:hover{background:var(--clr-link);color:var(--clr-bg);text-decoration:none}.project-link:last-child{margin-inline-end:var(--card-padding)}@media screen and (min-width:72em){.project-link:last-child{margin-inline-end:0}}.project-website{grid-area:website}.project-codebase{grid-area:codebase}