.dynamic-project{
  background-size:cover!important;
  background-position:center!important;
}
.review-stars{
  display:inline-block;
  margin-left:10px;
  letter-spacing:2px;
}
.work-intro{
  padding-bottom:25px;
}
#all-projects{
  display:grid;
  gap:55px;
}
.work-project{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:34px;
  align-items:start;
  padding-bottom:55px;
  border-bottom:1px solid rgba(20,30,24,.12);
}
.work-project h2{
  margin-top:8px;
}
.project-cover,
.project-placeholder{
  width:100%;
  min-height:430px;
  height:100%;
  max-height:600px;
  object-fit:cover;
  border-radius:2px;
}
.project-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#1a211d;
  color:#fff;
  letter-spacing:.25em;
  font-weight:700;
}
.before-after{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.before-after figure{
  margin:0;
  position:relative;
}
.before-after img{
  width:100%;
  height:430px;
  object-fit:cover;
}
.before-after figcaption{
  position:absolute;
  left:12px;
  bottom:12px;
  background:rgba(18,25,21,.84);
  color:white;
  padding:7px 10px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.project-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:22px 0;
}
.project-gallery img{
  width:100%;
  height:100px;
  object-fit:cover;
}
.dynamic-empty{
  font-size:20px;
  padding:50px 0;
}
@media(max-width:800px){
  .work-project{grid-template-columns:1fr}
  .project-cover,.project-placeholder,.before-after img{min-height:300px;height:300px}
  .project-gallery{grid-template-columns:repeat(2,1fr)}
}