*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:#17100d}
body{min-width:320px}
.paintings-page{width:100%;max-width:1912px;margin:0 auto;padding-top:calc(7.2vw - 2cm);padding-bottom:100px}

/* Cabeçalho idêntico ao padrão já aprovado */
.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%}

/* 281 x 351 = exatamente o tamanho das capas de Pôsteres.
   106px = o dobro do espaço de 53px entre os pôsteres.
   A borda esquerda da grade coincide com a borda esquerda do nome (820px). */
.painting-grid{
  width:641.5px;
  margin-top:128px;
  margin-left:calc(50% - 410px);
  display:grid;
  grid-template-columns:repeat(2,281px);
  column-gap:79.5px;
  align-items:start
}
.painting-card{text-align:center}
.cover{
  display:block;
  width:281px;
  height:351px;
  object-fit:cover;
  transition:transform .18s ease;
  transform-origin:center center
}
.lettering{
  height:31px;
  margin-top:14px;
  display:flex;
  align-items:flex-start;
  justify-content:center
}
.lettering img{
  display:block;
  width:auto;
  max-width:100%
}
.painting-card:nth-child(1) .lettering img{height:11px}
.painting-card:nth-child(2) .lettering img{height:14px}
@media (hover:hover) and (pointer:fine){
  .painting-card:hover .cover{transform:scale(1.03)}
}

@media(max-width:700px){
  .paintings-page{padding:0 5vw 12vw;min-height:100svh}
  .site-header{width:90%;padding-top:12vw}
  .menu-wrap{margin-top:3.1%}
  .painting-grid{
    width:90%;
    margin:12vw auto 0;
    display:flex;
    flex-direction:column;
    gap:12vw
  }
  .painting-card{width:100%}
  .cover{width:100%;height:auto;aspect-ratio:750/938;object-fit:cover}
  .lettering{margin-top:14px;height:auto}
  .lettering img{height:14px;max-height:14px}
}
