.reference-projects{
  display:grid;
  gap:34px;
}

.reference-project{
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  gap:34px;
  align-items:center;
  padding:28px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:0 10px 26px rgba(0,0,0,0.20);
  content-visibility:auto;
  contain:layout paint style;
  contain-intrinsic-size:700px;
}

.reference-project.reverse{
  grid-template-columns:1.05fr 0.95fr;
}

.reference-project.reverse .reference-project-image{
  order:2;
}

.reference-project.reverse .reference-project-content{
  order:1;
}

.reference-project-image{
  width:100%;
  height:360px;
  overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
}

.reference-project-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%;
  display:block;
}

.reference-project-content h3{
  margin:0 0 14px 0;
}

.reference-project-content .muted{
  margin-bottom:14px;
}

.reference-project-content .muted:last-child{
  margin-bottom:0;
}

@media (max-width: 900px) {
  .reference-project,
  .reference-project.reverse {
    grid-template-columns: 1fr;
  }

  .reference-project.reverse .reference-project-image,
  .reference-project.reverse .reference-project-content {
    order: initial;
  }

  .reference-project-image {
    height: 250px;
  }
}