.projects-hero{padding:120px 0 115px;background:#fff}
.projects-hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.5fr);gap:80px;align-items:end}
.projects-kicker{display:block;margin-bottom:20px;color:#64748b;font-size:13px;font-weight:800;letter-spacing:.1em}
.projects-hero h1{margin:0;font-size:70px;line-height:.96;letter-spacing:-.045em;font-weight:500;color:#111}
.projects-hero-copy p{margin:0;color:#64748b;font-size:19px;line-height:1.6}
.projects-list{padding:0 0 140px;background:#fff}
.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:86px 32px}
.project-card-wide{grid-column:1/-1}
.project-card a{text-decoration:none;color:inherit}

.project-thumb{
    position:relative;
    overflow:hidden;
    aspect-ratio:16/9;
    background:#eef3f7;
}

.project-card-wide .project-thumb{
    aspect-ratio:21/9;
}

.project-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform .65s ease;
}

.project-card:hover img{transform:scale(1.035)}
.project-placeholder{height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#e7f5ff,#cde7fb);font-size:40px;font-weight:700}
.project-view{position:absolute;right:26px;bottom:26px;width:124px;height:124px;border-radius:50%;display:grid;place-items:center;align-content:center;gap:7px;background:#1DA1FF;color:#fff;text-align:center;opacity:0;transform:translateY(16px) scale(.9);transition:.3s}
.project-view span{max-width:75px;font-size:11px;font-weight:800;text-transform:uppercase}
.project-card:hover .project-view{opacity:1;transform:none}
.project-copy{ gap:28px;padding-top:22px}
.project-client{display:block;margin-bottom:7px;color:#64748b;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.project-copy h2{margin:0;font-size:30px;line-height:1;letter-spacing:-.04em; text-align:center;}
.project-copy p{margin:4px 0 0;color:#667085;line-height:1.55}

@media(max-width:991px){
    .projects-hero-grid{grid-template-columns:1fr;gap:30px}
    .project-copy{grid-template-columns:1fr}
}

@media(max-width:767px){
    .projects-hero{padding:82px 0 80px}
    .projects-hero h1{font-size:45px}
    .projects-list{padding-bottom:90px}
    .projects-grid{grid-template-columns:1fr;gap:54px}
    .project-card-wide{grid-column:auto}

    .project-thumb,
    .project-card-wide .project-thumb{
        aspect-ratio:16/9;
    }

    .project-view{display:none}
    .project-copy h2{font-size:34px}
}