/* ATTENTION, la CSS de lightbox est chargée dans les options (roue crantée) de la CSS */

.grid-container {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
  grid-auto-flow: dense;
}
.grid-container .item {
  background:#8FF;
  display:flex;
}
.grid-container .item a {
  display:flex;
  width:100%;
}
.grid-container .item.portrait {
  grid-row: auto / span 2;
}
.grid-container .item img {
  width:100%;
  height:auto;
  object-fit:cover;
}


/* CSS ne servant qu'à la décoration, inutile pour le fonctionnement */

.filter-buttons {
  padding:1rem;
  text-align:center;
}
.filter-buttons button {
  background: #000;
    border: none;
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    color: white;
}
.filter-buttons button:focus {
  outline:none;
  background:#d40000;
}
.filter-buttons button:active {
  outline:none;
  background:#d40000;
}
.filter-buttons button:hover {
  outline:none;
  background:#d40000;
}