.project-teaser { margin-block: clamp(38px,6vw,84px); }
.project-teaser-link { display:grid; grid-template-columns: clamp(96px,16vw,205px) 1fr auto; align-items:center; gap:clamp(16px,3vw,45px); padding:20px 0; border-block:1px solid #b9cdc2; color:#173d35; }
.project-teaser-link > img { width:100%; height:clamp(80px,9vw,116px); object-fit:cover; border-radius:5px; }
.project-teaser h2 { margin:0; color:#173d35; font:600 clamp(26px,3vw,42px)/1.12 Manrope,sans-serif; letter-spacing:-.045em; }
.project-teaser p { margin:8px 0 0; max-width:56ch; color:#45645a; line-height:1.55; }
.project-teaser-action { display:inline-flex; align-items:center; gap:10px; color:#12685c; font-weight:700; }
.project-teaser-action span { display:grid; place-items:center; width:37px; height:37px; border:1px solid #adc9be; border-radius:50%; transition:transform .25s,background .25s,color .25s; }
.project-teaser-link:is(:hover,:focus-visible) .project-teaser-action span { transform:translate(2px,-2px); background:#12685c; color:white; }
@media(max-width:650px) {
  .project-teaser-link { grid-template-columns:85px minmax(0,1fr); gap:7px 16px; }
  .project-teaser-link > img { grid-row:1/3; height:100%; max-height:130px; }
  .project-teaser-action { grid-column:2; font-size:14px; }
  .project-teaser-action span { width:auto;height:auto;border:0; }
  .project-teaser p { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { .project-teaser-action span { transition:none; } }