.project-card{inline-size:100%;max-inline-size:min(60rem,calc(100vw - var(--layout-padding) * 4));block-size:auto;border-radius:var(--border-radius-small);background-image:linear-gradient(180deg in oklch,oklch(from var(--color-surface-base) l c h / .98) 60%,oklch(from var(--color-brand-surface-2) l c h / .1));background-size:100% 200%;background-position:0% 100%;display:grid;grid-template-rows:2fr 3fr;gap:0;aspect-ratio:2 / 3;box-shadow:var(--shadow-box);transition:background var(--transition-duration-moderate-2) var(--ease-out-2),box-shadow var(--transition-duration-moderate-2) var(--ease-out-2),background-position var(--transition-duration-moderate-2) var(--ease-out-2)!important;border:1px solid var(--color-border-brand);&:hover,&:focus-within{animation:pulse512 var(--transition-duration-gentle-2) var(--ease-out-2);animation-fill-mode:forwards;background-position:0% 0%;& img{transform:scale(1.05)}.project-image:after{transform:translateY(100%)}}&[data-is-small=true]{aspect-ratio:unset;max-inline-size:100%;grid-template-columns:1fr;grid-template-rows:auto 12rem;block-size:100%}@media(min-width:48rem){aspect-ratio:20 / 10;grid-template-columns:1fr 1fr;grid-template-rows:1fr;&[data-is-small=true]{aspect-ratio:unset;grid-template-columns:3fr 1fr;grid-template-rows:1fr}}}.project-image{inline-size:100%;block-size:100%;border-radius:0 0 var(--border-radius-small) var(--border-radius-small);overflow:hidden;position:relative;z-index:-1;>img{transition:transform var(--transition-duration-gentle-2) var(--ease-out-2);block-size:100%;object-fit:cover;inline-size:100%;border-radius:inherit}&:after{content:"";position:absolute;inset:0;transition:transform var(--transition-duration-gentle-2) var(--ease-out-2);background-image:linear-gradient(180deg in oklch,oklch(from var(--color-brand-primary-base) l c h / .02) 60%,oklch(from var(--color-brand-primary-base) l c h / .3))}@media(min-width:48rem){border-radius:0 var(--border-radius-small) var(--border-radius-small) 0}}.project-title{font-size:var(--font-size-medium)}.projects-content{padding:var(--spacing-far)}.card-meta{font-size:var(--font-size-small)}