/* =========================
PROJECT PAGE
========================= */

/* HERO */

.project-hero{
margin-bottom:100px;
text-align:center;
}

.project-hero h2{
font-size:2.5rem;
margin-bottom:15px;
}

.project-subtitle{
opacity:.8;
margin-bottom:30px;
}

/* video */

.project-video{

  max-width:1000px;   /* 👈 controls overall size */
  margin:40px auto;  /* 👈 centers it */

}

.project-video iframe{

  width:100%;
  aspect-ratio:16/9;

  border:none;
  border-radius:10px;

}


/* =========================
SECTIONS
========================= */

.project-section{
margin-bottom:100px;
max-width:800px;
}

.project-section h3{
margin-bottom:20px;
font-size:1.6rem;
}


/* =========================
PROCESS STEPS
========================= */

.process-steps{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.step img{
width:100%;
border-radius:8px;
margin-bottom:10px;
}

.step p{
font-size:.9rem;
opacity:.8;
}


/* =========================
GALLERY
========================= */

.gallery{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.gallery img{
width:100%;
border-radius:8px;
}


/* =========================
RESPONSIVE
========================= */

@media (max-width:600px){

.process-steps{
grid-template-columns:1fr;
}

.gallery{
grid-template-columns:1fr;
}

}