.website-portfolio .project-list{gap:170px}
.website-portfolio .project-card,
.website-portfolio .project-card:nth-child(even){
 display:grid;
 grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
 gap:6vw;
 align-items:center;
 position:relative;
 padding:0;
}
.website-portfolio .project-card:nth-child(even){
 grid-template-columns:minmax(320px,.65fr) minmax(0,1.35fr);
}
.website-portfolio .project-card:nth-child(even) .project-visual{order:2}
.website-portfolio .project-card:nth-child(even) .project-copy{order:1}
.website-portfolio .project-visual{
 width:100%;
 aspect-ratio:16/10;
 min-height:0;
 border-radius:22px;
 transform:translateZ(0);
 transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s;
}
.website-portfolio .project-visual:after{
 content:"";
 position:absolute;
 z-index:2;
 inset:38px 0 0;
 pointer-events:none;
 box-shadow:inset 0 0 0 1px #ffffff18;
 border-radius:0 0 18px 18px;
}
.website-portfolio .project-card:hover .project-visual{
 transform:translateY(-8px);
 box-shadow:0 45px 90px #211a0d26;
}
.website-portfolio .project-copy,
.website-portfolio .project-card:nth-child(even) .project-copy{
 display:flex;
 flex-direction:column;
 align-items:flex-start;
 gap:0;
 padding:2rem 0;
}
.website-portfolio .project-number{
 width:62px;
 height:62px;
 margin:0 0 4rem;
 border-color:#c99a35;
 color:#8e6816;
 position:relative;
}
.website-portfolio .project-number:after{
 content:"";
 position:absolute;
 left:calc(100% + 16px);
 width:45px;
 height:1px;
 background:#c99a35;
}
.website-portfolio .project-title-block small{
 display:block;
 color:#9a7019;
 letter-spacing:.15em;
}
.website-portfolio .project-title-block h3{
 font-size:clamp(3.4rem,5.6vw,6.7rem);
 line-height:.86;
 margin:1rem 0 2rem;
}
.website-portfolio .project-description{padding:0}
.website-portfolio .project-description p{
 max-width:520px;
 margin:0;
 font-size:1.05rem;
 line-height:1.7;
 color:#68675f;
}
.website-portfolio .project-description .tech{margin:2rem 0}
.website-portfolio .project-description .text-link{display:inline-block}
.website-portfolio .project-card:nth-child(odd):before,
.website-portfolio .project-card:nth-child(even):before{
 content:attr(data-project);
 position:absolute;
 z-index:0;
 top:-75px;
 font:700 11rem/1 Arial,sans-serif;
 letter-spacing:-.08em;
 color:#17171306;
 pointer-events:none;
}
.website-portfolio .project-card:nth-child(odd):before{right:0}
.website-portfolio .project-card:nth-child(even):before{left:0}
@media(max-width:1050px){
 .website-portfolio .project-card,
 .website-portfolio .project-card:nth-child(even){
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:4vw;
 }
 .website-portfolio .project-card:nth-child(even){
  grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);
 }
 .website-portfolio .project-number{margin-bottom:2.5rem}
 .website-portfolio .project-title-block h3{font-size:4.5rem}
}
@media(max-width:800px){
 .website-portfolio .project-list{gap:110px}
 .website-portfolio .project-card,
 .website-portfolio .project-card:nth-child(even){
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
 }
 .website-portfolio .project-card:nth-child(even) .project-visual,
 .website-portfolio .project-card:nth-child(even) .project-copy{order:initial}
 .website-portfolio .project-visual{aspect-ratio:16/10}
 .website-portfolio .project-copy,
 .website-portfolio .project-card:nth-child(even) .project-copy{padding:0}
 .website-portfolio .project-number{margin-bottom:1.5rem}
 .website-portfolio .project-title-block h3{font-size:3.5rem}
}
@media(max-width:600px){
 .website-portfolio .project-visual{aspect-ratio:16/11}
 .website-portfolio .project-title-block h3{font-size:2.8rem}
}