main {
  --gap: 2vw;            /* one knob: also the left/right edge gap and the grid gap */
  padding: var(--gap);
  padding-top: 24vh;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem;
  margin-bottom: var(--gap);
  font-weight: 700;
}
.filters button {
  padding: 0.2rem 0 0;
  font-weight: 700;
  color: #f90;
  background-color: inherit;
  border: 0;
  border-top: 0.15rem solid transparent;
  cursor: pointer;
  transition: border-top-color 0.2s ease-out, color 0.2s ease-out;
}
.filters button:hover, .filters button.selected {
  border-top-color: #fb0;
  color: #fb0;
  transition-duration: 0s;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* fill the row: edge gaps stay equal, scrollbar-proof */
  gap: var(--gap);
  margin: 0;
}
.gallery > a {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;     /* square tiles */
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);   /* steep ease-out */
}
.gallery > a.faded {
  opacity: 0;
}
.gallery > a.hidden {
  display: none;
}

.gallery-item {
  position: relative;
  height: 100%;
  overflow: hidden;
  background-color: #000;
}

.description {
  position: absolute;
  bottom: 0;
  padding: .5rem;
}
.description h3 {
  margin: 0 0 .5rem;
  font-weight: 700;
  color: #eee;
}
.description h4 {
  margin: 0;
  color: #cccdc7;
}

.gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform 100ms ease-out, opacity 100ms ease-out;
}

.gallery-item:hover .gallery-image, [href^="/project/"]:focus .gallery-image {
  transform: scale(1.05);
  opacity: 0.5;
}

.gallery-item#memorial-c .gallery-image {
  opacity: 0.5;
}
.gallery-item#memorial-c:hover .gallery-image {
  opacity: 0.2;
}
.gallery-item#history-education .gallery-image {
  object-position: bottom left;
}
.gallery-item#lcm-app .gallery-image {
  object-position: bottom;
}
.gallery-item#re-app .gallery-image {
  object-position: left;
}
.gallery-item#a-propos .gallery-image {
  object-position: top;
}

/* mobile */
@media screen and (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

/* desktop */
@media screen and (min-width: 1200px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}