/* Visual-only refinement for public website previews. */
.refresh-site-grid .home-web-shot.has-record-image{
  background-color:#f8f4eb;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}

.web-catalog{padding:18px 0 70px}
.web-project,.web-project.reverse{
  width:min(1180px,calc(100% - 40px));
  min-height:0;
  margin:0 auto;
  padding:58px 0;
  grid-template-columns:minmax(0,1.32fr) minmax(250px,.68fr);
  gap:clamp(42px,6vw,82px);
  border-top:1px solid rgba(18,61,49,.14);
}
.web-project:first-child{border-top:0}
.web-project.reverse{grid-template-columns:minmax(250px,.68fr) minmax(0,1.32fr)}
.project-preview,.project-preview.sage,.project-preview.blue{
  height:400px;
  padding:0;
  isolation:isolate;
  background:transparent;
}
.project-preview::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:4px;
  bottom:10px;
  width:132px;
  height:88px;
  border:1px solid rgba(18,61,49,.12);
  background:#eadfd4;
}
.web-project.reverse .project-preview::after{right:auto;left:4px}
.project-browser{
  position:relative;
  z-index:1;
  width:calc(100% - 58px);
  height:370px;
  border:1px solid var(--green);
  box-shadow:0 18px 36px rgba(18,61,49,.12);
}
.project-preview:hover .project-browser{transform:translateY(-3px)}
.project-phone{
  z-index:2;
  right:0;
  bottom:8px;
  width:122px;
  height:254px;
  border-width:5px;
  box-shadow:0 16px 28px rgba(18,61,49,.18);
}
.project-preview:hover .project-phone{transform:translate(2px,-4px)}
.project-phone>span{left:35px;width:42px}
.project-phone i{width:82px;height:112px}
.media-controls{bottom:-16px}
.project-copy{padding:24px 0}

@media(max-width:900px){
  .web-project,.web-project.reverse{
    padding:48px 0;
    grid-template-columns:1fr;
    gap:30px;
  }
  .project-preview{height:400px}
  .project-copy{max-width:650px}
}

@media(max-width:650px){
  .web-project,.web-project.reverse{width:min(100% - 30px,1180px);padding:38px 0;gap:24px}
  .project-preview{height:292px}
  .project-browser{width:calc(100% - 42px);height:270px}
  .project-phone{width:86px;height:184px;right:0;bottom:4px;border-width:4px}
  .project-phone>span{left:24px;width:30px}
  .project-phone i{width:58px;height:78px}
  .project-preview::after{width:92px;height:62px;bottom:4px}
  .media-controls{bottom:-14px}
}