/* galeria: mosaico com 3 escalas e vazios propositais. Foto em canto reto.
   Fotos de 1080px nunca passam de ~900px de largura CSS. */

.galeria { position: relative; padding-block: 0 var(--respiro); }

.galeria__mosaico {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .75rem;
}

.galeria__foto img { width: 100%; height: auto; }
.galeria__foto--so-desktop { display: none; }

.galeria__topo {
  grid-column: 1 / -1;
  grid-row: 2;
  padding: 2rem var(--margem) 1.25rem;
}
.galeria__topo .apoio { margin-top: .5rem; }

/* Celular: 6 fotos. Sangria, colunas desiguais, largura total, colunas desiguais */
/* A foto é uma faixa larga: aqui ela ganha altura, com os reformers no centro */
.galeria__foto--1 { grid-column: 1 / -1; grid-row: 1; }
@media (max-width: 1023.98px) {
  .galeria__foto--1 img { aspect-ratio: 16 / 10; object-fit: cover; }
}
.galeria__foto--2 { grid-column: 1 / span 7; padding-left: var(--margem); }
.galeria__foto--3 { grid-column: 8 / -1; align-self: end; padding-right: var(--margem); }
.galeria__foto--4 { grid-column: 1 / -1; }
.galeria__foto--5 { grid-column: 1 / span 5; align-self: start; padding-left: var(--margem); }
.galeria__foto--7 { grid-column: 6 / -1; padding-right: var(--margem); }

@media (min-width: 1024px) {
  .galeria { padding-top: 0; }

  .galeria__mosaico {
    gap: clamp(1.5rem, 3vw, 2.75rem) var(--gutter);
    padding-inline: var(--margem);
  }

  .galeria__foto--so-desktop { display: block; }

  /* Abre com o salão grande, sangrando à esquerda; título na lateral */
  .galeria__foto--1 {
    grid-column: 1 / span 9;
    grid-row: 1;
    margin-left: calc(var(--margem) * -1);
  }
  .galeria__topo {
    grid-column: 10 / -1;
    grid-row: 1;
    align-self: end;
    padding: 0 0 .5rem;
  }
  .galeria__topo .titulo { font-size: clamp(2.5rem, 3.6vw, calc(3.625rem + var(--folga) * .03)); }

  .galeria__foto--2 { grid-column: 2 / span 4; grid-row: 2; padding: 0; margin-top: clamp(2rem, 5vw, 5rem); }
  .galeria__foto--3 { grid-column: 7 / span 6; grid-row: 2; padding: 0; align-self: start; }

  /* Fileira com a escala pequena: dois quadrados em alturas diferentes */
  .galeria__foto--4 { grid-column: 1 / span 6; grid-row: 3; align-self: start; }
  .galeria__foto--5 { grid-column: 7 / span 3; grid-row: 3; padding: 0; align-self: end; }
  .galeria__foto--8 { grid-column: 10 / -1; grid-row: 3; align-self: start; }

  .galeria__foto--6 { grid-column: 2 / span 5; grid-row: 4; }
  .galeria__foto--7 { grid-column: 8 / -1; grid-row: 4; padding: 0; align-self: start; margin-top: clamp(3rem, 7vw, 6.5rem); }
}