*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
  background:#fff;
  color:#17100d;
}

body{
  min-width:320px;
  font-family:Arial,Helvetica,sans-serif;
}

.project-page{
  width:100%;
  margin:0 auto;
  padding-top:calc(7.2vw - 2cm);
  padding-bottom:100px;
}


/* CABEÇALHO */

.site-header{
  width:100%;
  max-width:820px;
  margin:0 auto;
}

.title-wrap,
.menu-wrap{
  display:block;
  width:100%;
}

.title-wrap img,
.menu-wrap>img{
  display:block;
  width:100%;
  height:auto;
}

.menu-wrap{
  position:relative;
  margin-top:3.1%;
}

.menu{
  position:absolute;
  inset:0;
}

.m{
  position:absolute;
  top:0;
  height:100%;
  display:block;
}

.desenhos{
  left:0;
  width:12.4499%;
}

.objetos{
  left:16.4561%;
  width:9.3374%;
}

.espacos{
  left:29.7689%;
  width:10.7858%;
}

.posteres{
  left:44.5609%;
  width:11.0324%;
}

.publicacoes{
  left:59.5686%;
  width:15.2234%;
}

.pinturas{
  left:78.7673%;
  width:10.0154%;
}

.sobre{
  left:92.7889%;
  width:7.2111%;
}


/* IMAGENS DOS PROJETOS */

.project-images{
  width:916px;
  margin:124px auto 0;
  display:grid;
  grid-template-columns:repeat(3,270px);
  column-gap:53px;
  row-gap:53px;
  align-items:start;
}

.project-images img{
  display:block;
  width:270px;
  height:auto;
  object-fit:contain;
  cursor:zoom-in;
}


/* ITENS COM LEGENDA */

.project-item{
  width:270px;
  text-align:center;
}

.project-caption{
  margin-top:10px;
  font-size:14px;
  line-height:17px;
  font-weight:400;
  text-align:center;
  color:#17100d;
}


/* VÍDEOS — LABOF */

.project-images video{
  display:block;
  width:270px;
  height:auto;
}


/* MOBILE */

@media (max-width:700px){

  .project-page{
    padding:0 5vw 12vw;
    min-height:100svh;
  }

  .site-header{
    width:90%;
    padding-top:12vw;
  }

  .menu-wrap{
    margin-top:3.1%;
  }

  .project-images{
    width:90%;
    margin:12vw auto 0;
    display:flex;
    flex-direction:column;
    gap:8vw;
  }

  .project-images img,
  .project-images video,
  .project-item{
    width:100%;
    height:auto;
  }

  .project-caption{
    margin-top:10px;
    font-size:14px;
    line-height:17px;
  }
}


/* LIGHTBOX — MESMO PADRÃO DE PÔSTERES */

.lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.88);
  padding:5vh 5vw;
}

.lightbox.is-open{
  display:flex;
}

.lightbox img{
  display:block;
  width:auto;
  height:auto;
  max-width:90vw;
  max-height:90vh;
  object-fit:contain;
  cursor:zoom-out;
}

.lightbox-close{
  position:fixed;
  top:22px;
  right:28px;
  border:0;
  background:transparent;
  color:#17100d;
  font:300 34px/1 Arial,Helvetica,sans-serif;
  cursor:pointer;
  padding:4px 8px;
}

body.lightbox-open{
  overflow:hidden;
}