/* home */
.hero{padding-block:clamp(60px,12vh,130px) clamp(40px,7vh,72px)}
.hero h1{margin-block:18px 24px}
.homes{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.home-card{background:var(--bg);padding:28px 26px 24px;display:grid;gap:10px;align-content:start;
  transition:background .22s var(--ease)}
.home-card:hover{background:var(--bg2)}
.home-card h3{font-size:29px}
.home-card:hover h3{color:var(--gold)}
.home-card p{font-size:14.5px;color:var(--text-2);line-height:1.55}
.home-card span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-top:6px}
.give{border:1px solid var(--border-m);border-left:2px solid var(--green);background:var(--bg2);
  padding:clamp(28px,5vw,52px)}

/* create something */
.makes{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
.make-card{background:var(--bg);display:grid;grid-template-rows:auto 1fr;align-content:start;
  transition:background .22s var(--ease)}
.make-card:hover{background:var(--bg2)}
.make-card .make-body{padding:22px 24px 24px;display:grid;gap:9px;align-content:start}
.make-card h3{font-size:25px}
.make-card:hover h3{color:var(--gold)}
.make-card p{font-size:14px;color:var(--text-2);line-height:1.55}
.make-card .go{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-top:4px}
.make-card:hover .go{color:var(--gold)}
.make-art{aspect-ratio:16/10;overflow:hidden;background:var(--bg3);border-bottom:1px solid var(--border)}
.make-art img{width:100%;height:100%;max-width:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease)}
.make-card:hover .make-art img{transform:scale(1.04)}
.makes.rest{margin-top:1px;grid-template-columns:repeat(auto-fill,minmax(min(212px,100%),1fr))}
/* the featured one gets the full width of the grid on wide screens */
@media (min-width:900px){
  .make-card.feat{grid-column:1/-1;grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    align-items:stretch}
  .make-card.feat .make-art{aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--border)}
  .make-card.feat .make-body{align-content:center;padding:clamp(26px,4vw,44px)}
  .make-card.feat h3{font-size:clamp(30px,3.4vw,42px)}
  .make-card.feat p{font-size:15.5px;max-width:46ch}
}
@media (prefers-reduced-motion:reduce){
  .make-art img,.make-card:hover .make-art img{transition:none;transform:none}
}