@media (max-width: 768px) {
#lightbox img{
  width: 90%;
  height: auto;
}
}

.titres {
margin-top: 5rem;
text-align: left;
padding: 32px;
}

.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 20%; /* IE10 */
flex: 20%;
max-width: 20%;
padding: 0 4px;
}

.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
  -ms-flex: 50%;
  flex: 50%;
  max-width: 50%;
}
}

#lightbox{
position: fixed;
top: 0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,0.8);
display:flex;
align-items:center;
justify-content:center;
display:none;
}

#lightbox img{
object-fit: contain;
height:80%;
}

#lightbox.active{
display:flex;
}

.exit{
text-decoration: none;
color: #fff;
position: absolute;
top: 6%;
right: 1%;
}