.portfolio-filtros{padding-bottom:1rem}
.filtros{display:flex;flex-wrap:wrap;gap:.5rem}
.filtros button{
  font-family:var(--sans);
  font-size:.875rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  padding:.625rem 1.125rem;
  background:transparent;
  border:2px solid var(--linha-forte);
  color:var(--texto-70);
  cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background-color .18s ease;
}
.filtros button:hover{border-color:var(--texto);color:var(--texto)}
.filtros button.is-ativo{background:var(--acento);border-color:var(--acento);color:var(--acento-texto)}

.trabalho{padding-block:3.5rem 5rem}
.trabalho--alt{background:var(--fundo-2);border-block:1px solid var(--linha)}
.trabalho[hidden],.portfolio-modelos[hidden]{display:none}

.trabalho__cabecalho{padding-bottom:2.5rem}
.trabalho__cabecalho h2{margin-top:.75rem}

.trabalho__cabecalho--lado{
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
}
.trabalho__cabecalho--lado > p{max-width:22rem;color:var(--texto-70);text-align:right}

.trabalho-sites{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:3.5rem 2rem;
}
.trabalho-site{grid-column:span 5}
.trabalho-site--largo{grid-column:span 7}

.trabalho-site__media,
.modelo-cartao__media{
  display:block;

  aspect-ratio:1600/830;
  overflow:hidden;
  background:var(--fundo-3);
  border:1px solid var(--linha);
}
.trabalho-site__media img,
.modelo-cartao__media img{
  width:100%;height:100%;
  object-fit:cover;object-position:top center;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.trabalho-site__media:hover img,
.modelo-cartao__media:hover img{transform:scale(1.03)}

.trabalho-site .etiqueta,
.modelo-cartao .etiqueta{margin-top:1.25rem}
.trabalho-site h3,
.modelo-cartao h3{margin-top:.375rem;font-size:1.5rem}
.trabalho-site p:not(.etiqueta),
.modelo-cartao p:not(.etiqueta){margin-top:.5rem;color:var(--texto-70);max-width:30rem}

.trabalho-logos{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem 1.5rem;
}
.trabalho-logo{margin:0;display:flex;flex-direction:column}
.trabalho-logo--destaque{grid-column:span 2;grid-row:span 2}
.trabalho-logo__media{
  aspect-ratio:1;
  overflow:hidden;
  background:var(--fundo-3);
}
.trabalho-logo--destaque .trabalho-logo__media{aspect-ratio:auto;flex:1}
.trabalho-logo__media img{width:100%;height:100%;object-fit:cover}
.trabalho-logo figcaption{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-top:.75rem;
  font-weight:700;
}

.trabalho-pecas{columns:4 14rem;column-gap:1.25rem}
.trabalho-peca{
  margin:0 0 1.25rem;
  break-inside:avoid;
  background:var(--fundo-3);
}
.trabalho-peca img,
.trabalho-peca video{width:100%;height:auto}
.trabalho-peca video{background:#000}

.portfolio-modelos{background:var(--fundo-2);border-top:1px solid var(--linha);padding-bottom:5rem}
.portfolio-modelos__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:3rem 2rem;
}
.modelo-cartao__links{display:flex;flex-wrap:wrap;gap:0 1.75rem}

@media (max-width:56.25rem){
  .trabalho-sites{grid-template-columns:1fr;gap:3rem}
  .trabalho-site,.trabalho-site--largo{grid-column:auto}
  .trabalho-logos{grid-template-columns:repeat(2,1fr)}
  .trabalho-logo--destaque{grid-column:1 / -1;grid-row:auto}
  .trabalho-logo--destaque .trabalho-logo__media{aspect-ratio:1}
  .trabalho__cabecalho--lado{flex-direction:column;align-items:flex-start}
  .trabalho__cabecalho--lado > p{text-align:left}
}
@media (max-width:47.9375rem){
  .portfolio-modelos__grid{grid-template-columns:1fr}
  .trabalho-pecas{columns:2;column-gap:.75rem}
  .trabalho-peca{margin-bottom:.75rem}
}

.trabalho-site__offline{
  display:inline-block;
  margin-top:1.25rem;
  font-family:var(--mono);
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--texto-45);
}

.modelo-cartao__media{aspect-ratio:16/9}